style.min.css

@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap";.red{background-color:#f44336}.blue{background-color:#2196f3}.green{background-color:#4caf50}.purple{background-color:#673ab7}.brown{background-color:#795548}.yellow{background-color:#ffeb3b}.logo{font-size:1.4rem;color:#fff;opacity:.5;text-align:center;margin-bottom:.8rem;display:flex;align-items:center;justify-content:center}.logo button{outline:none;vertical-align:middle;border:.0625rem solid #fff;font-size:.75rem;padding:.3125rem;border-radius:.3125rem;color:#fff;background-color:rgba(0,0,0,0);margin:0 .2rem;transition:.3s opacity}.logo button:hover{opacity:.8}.logo .credits{font-size:.9rem;margin-left:.5rem}.logo .credits a{color:#fff;text-decoration:none;border-bottom:.0625rem dotted #fff;transition:.3s opacity}.logo .credits a:hover{opacity:.8}html{font-size:16px}body{background-color:#37474f;display:flex;align-items:center;justify-content:center;font-family:"Fredoka",sans-serif}.container{max-width:21.875rem}.game{background-color:#cfd8dc}.game .board{display:flex;justify-content:center;align-items:center;border-bottom:.0625rem solid #607d8b;padding:.4375rem .625rem}.game .board.active{background-color:#eceff1}.game .board .ball{margin:0 .3125rem;width:2.5rem;height:2.5rem;flex:0 0 2.5rem;border:.0625rem solid #607d8b;border-radius:100%}.game .board .tips{display:flex;flex-wrap:wrap;flex:0 0 3.125rem;margin-left:.625rem}.game .board .tips div{margin:.125rem;width:1.25rem;height:1.25rem;flex:0 0 1.25rem;border-radius:100%;border:.0625rem solid #607d8b}.game .board .tips div.correct{background-color:#000}.game .board .tips div.incorrect{background-color:#fff}.btns{display:flex;justify-content:center;margin:.8rem auto}.btns button{margin:0 .625rem;color:#fff;outline:none;cursor:pointer;border:none;text-transform:uppercase;font-size:1rem;padding:.625rem 1.5625rem;background-color:#009688;transition:.3s background-color}.btns button.clear{background-color:#78909c}.btns button.clear:hover{background-color:#90a4ae}.btns button:hover{background-color:#26a69a}.play-again{margin-top:1.25rem;color:#fff;outline:none;cursor:pointer;border:none;text-transform:uppercase;font-size:1rem;padding:.625rem 1.5625rem;background-color:#009688;transition:.3s background-color}.play-again:hover{background-color:#26a69a}.options{background-color:#b8c1c5;display:flex;justify-content:center;padding:.625rem;border-bottom:.3125rem solid #795548}.options button{cursor:pointer;outline:none;margin:.3125rem .5rem;border-radius:100%;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;border:.0625rem solid #607d8b;transition:.2s transform}.options button:hover{transform:translateY(-0.125rem)}.options button:disabled{cursor:default;opacity:.2}.dialog{position:fixed;z-index:2;width:100%;height:100%;font-size:1.125rem;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;top:0;left:0}.dialog .body{background-color:#fff;width:100%;max-width:37.5rem;padding:2.5rem 1.25rem;text-align:center;color:#455a64}.dialog .body p{line-height:1.1}.dialog .body p strong{font-weight:500}.dialog .body h1{font-size:1.75rem;margin-bottom:0}.dialog .body h2{font-size:1.375rem;margin-bottom:1.25rem}.dialog .body h3{font-size:1.125rem;margin-bottom:.625rem}.dialog .body .answer{display:flex;justify-content:center}.dialog .body .answer div{margin:.3125rem .625rem;border-radius:100%;width:3.125rem;height:3.125rem;border:.0625rem solid #607d8b}.dialog .body h4{font-weight:500;margin-bottom:1.25rem;font-size:1.25rem;margin-top:1.25rem}.dialog .body .share button{background-color:rgba(0,0,0,0);border:none;outline:none;cursor:pointer;font-size:2rem;color:#455a64;margin:0 .3125rem}