:root { color-scheme: light dark; } main { position: relative; max-height: 90vh; overflow-y: scroll; } body { background: none; padding: 0.5rem; } body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../img/rough_bg.jpg"); } .day { height: 100%; min-width: 120px; } .dayEvents { max-width: 95%; grid-template-rows: repeat(24, 60px); position: relative; } .dayName { position: sticky; top: 0; z-index: 20; margin-bottom: 2px; box-shadow: 0px 3px 4px -2px black; } .dayTimes { grid-template-rows: repeat(24, 60px); } .dayTime { padding-left: 0.5rem; padding-right: 0.5rem; } .event { cursor: pointer; padding: 0.25rem 0.35rem; margin-bottom: 6px; position: absolute; width: 100%; } .eventTitle { text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; font-size: small; font-weight: 500; margin-bottom: 0.15rem; } .eventTime { font-size: x-small; font-weight: 200; } .line { border: none; position: absolute; width: 100%; color: transparent; border-bottom: 1px solid #111; }