body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;box-sizing:border-box;background-color:#222;color:#eee;margin-top:5vh;font-size:2rem}.logo{display:flex;align-items:center;justify-content:center;margin-bottom:2rem}.logo img{border-radius:1rem;box-shadow:0 0 10px 10px #64646480}.container{display:grid;grid-template-rows:auto;grid-template-areas:"header header header" "sel sel sel" "1 2 3" "4 5 6" "slider slider slider" "footer footer footer"}.header{grid-area:header;font-size:4rem;font-weight:700;text-align:center;margin-bottom:2rem}.selector{grid-area:sel;display:flex;align-items:center;justify-content:center;margin-bottom:2rem;gap:1rem}.selector button{border:deeppink 2px solid;border-radius:2rem;width:11rem;height:3rem;font-weight:500;font-size:2rem;text-align:center}.selector .active{background-color:#ff1493;color:#222}.selector .inactive{background-color:#222;color:#ff1493}.selector .inactive:hover{box-shadow:0 0 5px 5px #ff149380}.title{text-align:center;font-size:3ch;font-weight:700;height:3rem;margin-bottom:3rem}.title-a{color:#d2691e}.title-b{color:#7fff00}.title-c{color:#00bfff}.field{text-align:center;font-size:2rem;font-weight:700;margin-bottom:1rem;height:6rem;width:10rem;border-radius:2rem;vertical-align:middle;color:#222;place-self:center;line-height:6rem}.field-a{background-color:#d2691e}.field-b{background-color:#7fff00}.field-c{background-color:#00bfff}.field-inactive{background-color:#222}.control{margin-top:5vh;margin-bottom:5vh;grid-area:slider;display:flex;flex-direction:column;align-items:center}.slider-div{width:100%;flex-grow:2;text-align:center}.slider{-webkit-appearance:none;width:50%;accent-color:chartreuse;height:20px;border-radius:10px;outline:none;opacity:.7;-webkit-transition:.2s;transition:opacity .2s}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#7fff00;cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#7fff00;cursor:pointer}.footer{grid-area:footer;text-align:center;font-size:1rem}@media only screen and (max-width: 600px){body{font-size:1.25rem}.header{font-size:2.5rem}.title{font-size:1.75rem;margin-bottom:1rem}.field{font-size:1.5rem;width:6rem}.footer{font-size:.75rem}.selector button{font-size:1.5rem;width:7rem}}