body{margin:.5vmin;height:calc(100vh - 1vmin);display:grid;grid-template:8vmin auto/1fr 1fr;grid-template-areas:"date surface" "board board";grid-gap:.5vmin;overflow:hidden;font-family:sans-serif;font-size:3.3vmin;--cell-size:calc((100vh - 19vmin) / 8)}@media screen and (orientation:portrait){body{grid-template:8vmin 8vmin auto/1fr;grid-template-areas:"date" "surface" "board";--cell-size:calc((100vw - 10vmin) / 7)}}.running{background-size:100% 200%;background-image:linear-gradient(white 0,red 1%,#fff 2%,#fff 50%,red 51%,#fff 52%);animation:calc-animation 2s linear infinite}@keyframes calc-animation{0%{background-position-y:0%}100%{background-position-y:-100%}}input[type=date]{grid-area:date;display:block;margin:2px;border:2px groove grey;background-color:transparent;font-family:inherit;font-size:inherit;text-align:center}fieldset{grid-area:surface;display:grid;grid-template:1fr/repeat(3,1fr);align-content:center;grid-gap:.5vmin;border:none;padding:0;margin:2px}fieldset label{color:#d3d3d3;text-shadow:1px 1px gray;display:flex;justify-content:center;align-items:center;border:2px outset grey;text-align:center}fieldset input{display:none}fieldset input:checked+label{color:inherit;text-shadow:none}.solutions{grid-area:board;display:flex;overflow:auto;scroll-snap-type:x mandatory;scroll-padding:5vmin}.grid{scroll-snap-align:start;scroll-padding:5vmin;display:inline-grid;grid-template:repeat(8,var(--cell-size))/repeat(7,var(--cell-size));width:auto;margin:5vmin}.grid>div{background-color:var(--main-color);border:.3vmin inset var(--main-color)}.grid>.text{grid-area:1/2/span 2/span 5;display:flex;justify-content:center;align-items:center;background-color:#ffffe0}.grid>div.tile_x{border-style:solid}.grid>div.tile_date{--main-color:black;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:5vmin}.grid>div.tile_day{--main-color:black;background-color:#fff;display:flex;justify-content:center;align-items:center;font-size:7vmin}.tile_0{--main-color:maroon}.tile_1{--main-color:red}.tile_2{--main-color:purple}.tile_3{--main-color:fuchsia}.tile_4{--main-color:green}.tile_5{--main-color:lime}.tile__{--main-color:olive}.tile_6{--main-color:navy}.tile_7{--main-color:blue}.tile_8{--main-color:teal}.tile_9{--main-color:aqua}.tile_x{--main-color:transparent;border:none}