:root{font-family:Inter,sans-serif;font-feature-settings:'liga' 1,'calt' 1}@supports(font-variation-settings:normal){:root{font-family:InterVariable,sans-serif}}*{box-sizing:border-box;margin:0;padding:0}#toggle{position:absolute;bottom:20px;right:20px;padding:20px;opacity:.75;font-size:25px;color:#fff;background-color:#000;border-radius:30px;border:none;cursor:pointer;&:hover, &:active, &:focus{color:#000;background-color:#fff}}html,body{height:100%;padding:0;margin:0;font-size:clamp(1vh,2vh,4vh);table{height:100%;width:100%;border-collapse:collapse;th{font-size:clamp(.5vh,2vh,3vh);cursor:pointer;span{font-size:clamp(.1vh,1.5vh,2.5vh)}&.game{display:table-cell}&.practice{display:none}&.adult-1, &.adult-2{display:none}}tbody tr:nth-child(odd){color:#fff;background-color:#b50000}tbody tr:nth-child(even){color:#fff;background-color:#0d1d41}td{padding:0 0 0 1rem;vertical-align:middle;&.number{text-align:center;padding:0;width:clamp(.5rem,10vw + .5rem,5rem)}&.game{display:table-cell}&.practice{display:none}&.adult-1, &.adult-2{display:none}}}}html{body.practice{ #toggle { color: rgb(181, 0, 0, 1.0); background-color: rgb(13, 29, 65, 1.0); font-weight: bold; &:hover, &:active, &:focus { color: rgb(13, 29, 65, 1.0); background-color: rgb(181, 0, 0, 1.0); } } table { thead { th { color: rgb(0, 0, 0, 1.0); } } tbody tr:nth-child(odd) { color: rgb(0, 0, 0, 1.0); background-color: rgb(255, 255, 255, 1.0); } tbody tr:nth-child(even) { color: rgb(255, 255, 255, 1.0); background-color: rgb(0, 0, 0, 1.0); } th, td { &.game { display: none; } &.practice { display: table-cell; } } }}}@media(min-width:1000px){html{body{table{tbody{td{&.adult-1, &.adult-2{display:table-cell;max-width:7vw}}}}}}}