#schedule{--full-bleed:80;background-color:color-mix(var(--secondary),transparent 80%);padding:6px;border-radius:8px;box-shadow:0 2px 8px var(--secondary);display:flex;flex-wrap:wrap;.day { flex: 0 0 calc(100% / 7); max-width: calc(100% / 7); box-sizing: border-box; padding: 2px; .weekday { align-items: center; } &:not(.day-empty) .weekday { font-weight: bold; } .showings { display: flex; flex-direction: column; .showing { padding-left: 2px; --c: attr(data-id type(<color>)); background-color: attr(data-id type(<color>)); color: contrast-color(attr(data-id type(<color>))); text-wrap: nowrap; overflow-x: clip; .time { .time-sep { display: none; } .time-mins { vertical-align: super; font-size: 0.73em; } } a { color: inherit; text-decoration: none; } &.showing-inattendance { background: repeating-linear-gradient( 135deg, var(--c), var(--c) 10px, color-mix(var(--c), transparent 30%) 10px, color-mix(var(--c), transparent 30%) 16px); } &:hover { overflow-x: visible; z-index: 1; a { background-color: color-mix(var(--c), transparent 10%); box-shadow: 0px 1px 1px var(--secondary); padding-right: 2px; } } } } }}#movies{margin-bottom:var(--content-gap);.movie { display: inline-flex; flex-wrap: nowrap; padding: 0 2px; margin: 1px 0; border-radius: 999px; border: 2px solid color-mix(attr(data-id type(<color>)), var(--primary) 40%); background-color: attr(data-id type(<color>)); color: contrast-color(attr(data-id type(<color>))); input { position: absolute; opacity: 0; width: 0; height: 0; } &:not(:has(input:checked)) { color: revert; background-color: revert; border-color: attr(data-id type(<color>)); } }}@media screen and (max-width:900px){#schedule{--full-bleed:97;.day { flex: 0 0 calc(100% / 3); max-width: calc(100% / 3); } .day-empty { display: none; }}}@media screen and (max-width:675px){#schedule .day{flex:0 0 calc(100%/2);max-width:calc(100%/2)}}@media(hover:none){#schedule{.day .showings .showing { overflow: scroll; overflow-x: scroll !important; &:hover a { background-color: none; box-shadow: none; } }}}