main.categories-main{background-color:var(--bg-main);height:100vh;padding-block-start:3rem;display:grid;grid-template-rows:auto 1fr;overflow-x:hidden}.top>p{color:#fff;font-size:2rem;font-family:poppins-semiBold;width:90vw;margin:0rem auto 4rem;position:relative;opacity:0;z-index:3;animation:slide-up 2s ease-in-out forwards;-webkit-animation:slide-up 2s ease-in-out forwards;transform:rotateX(-90deg) translateY(40rem);-webkit-transform:rotateX(-90deg) translateY(40rem);-moz-transform:rotateX(-90deg) translateY(40rem);-ms-transform:rotateX(-90deg) translateY(40rem);-o-transform:rotateX(-90deg) translateY(40rem)}.top>p:after{content:"";width:15rem;height:15rem;background:linear-gradient(var(--ball));opacity:.4;position:absolute;top:0;left:0;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;animation:alternate float 10s ease-in-out infinite;-webkit-animation:alternate float 10s ease-in-out infinite;transition:all ease;-webkit-transition:all ease;-moz-transition:all ease;-ms-transition:all ease;-o-transition:all ease;z-index:-1}.categories-main .categories-body{position:relative;z-index:6;background-color:var(--category-bg);border-top-left-radius:4rem;border-top-right-radius:4rem;padding:2rem}.categories-body h1{font-family:poppins-semibold;font-size:2.5rem;font-weight:400;margin:1rem auto 1rem 0rem;max-width:90vw}.categories-container{display:flex;justify-items:center;flex-wrap:wrap;row-gap:4rem;column-gap:5rem;justify-content:center;width:90vw;max-width:45rem;margin:3rem auto 0}.categories-container>div{max-width:fit-content;display:flex;align-items:center;flex-direction:column}.categories-container>div>div{width:14rem;height:14rem;display:flex;align-items:center;justify-content:center;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.categories-container>div .active-addition{border:8px solid hsl(16,100%,73%)}.categories-container>div .active-subtraction{border:8px solid hsl(196,100%,73%)}.categories-container>div .active-division{border:8px solid hsl(100,100%,73%)}.categories-container>div .active-multiplication{border:8px solid hsl(316,100%,73%)}.addition .addition-circle{background:linear-gradient(var(--btn-addition));box-shadow:0 .5rem 1rem #ff4f0f80}.subtraction .subtraction-circle{background:linear-gradient(var(--btn-subtraction));box-shadow:0 .5rem 1rem #00a1db80}.division .division-circle{background:linear-gradient(var(--btn-division));box-shadow:0 .5rem 1rem #23ff0f80}.multiplication .multiplication-circle{background:linear-gradient(var(--btn-multiplication));box-shadow:0 .5rem 1rem #ff0fbf66}.categories-container>div div p{color:#fff;font-size:5rem;font-family:poppins-semiBold}.categories-container>div div p::selection{background-color:initial;color:#fff}.categories-container>div>p{font-size:2rem;font-family:poppins-semiBold;cursor:pointer;margin:1rem 0 0}@media screen and (min-width:600px){.top p{font-size:2.5rem}.categories-body h1{text-align:center;margin:1rem auto 4rem}.categories-container{column-gap:10rem}.categories-container>div>div{width:15rem;height:15rem}}@media screen and (min-width:900px){.top{height:15rem}.top>p{margin:1.5rem auto 0rem}.categories-main .categories-body{border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0}.categories-container{display:flex;max-width:none;align-items:center;margin:5rem auto}}@keyframes float{25%{top:-2rem}50%{top:2rem}75%{top:-2rem}to{right:0;left:90%}}@keyframes slide-up{to{transform:rotateX(0) translateY(0);-webkit-transform:rotateX(0deg) translateY(0);-moz-transform:rotateX(0deg) translateY(0);-ms-transform:rotateX(0deg) translateY(0);-o-transform:rotateX(0deg) translateY(0);opacity:1}}.categories-container>div>div:hover{cursor:pointer;transform:scale(1.05);-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05)}.categories-container>div>div:active{transform:scale(.95) translateY(5px);-webkit-transform:scale(.95) translateY(5px);-moz-transform:scale(.95) translateY(5px);-ms-transform:scale(.95) translateY(5px);-o-transform:scale(.95) translateY(5px)}.score-main{background-image:linear-gradient(var(--gameplay-bg));min-height:100vh;padding:7rem 0 0}.score-main .congrats{font-size:3rem;color:#fff;text-align:center;font-family:poppins-semiBold;max-width:fit-content;margin:auto}.score-main .done{max-width:30rem;color:#fff;font-size:1.7rem;text-align:center;margin:1rem auto}.score-main .scores{display:flex;align-items:center;justify-content:space-between;width:90vw;max-width:40rem;margin:5rem auto}.scores .current-score,.scores .high-score{display:flex;flex-direction:column;align-items:center;width:50%}.current-score p:first-child,.high-score p:first-child{font-size:1.5rem;color:#fff}.current-score p:last-child,.high-score p:last-child{font-size:8rem;color:#fff;font-family:poppins-semiBold}.scores .high-score{border-left:1px dashed white}.buttons button{display:block;margin:4rem auto;font-family:poppins-semiBold;font-size:2rem;padding:1rem 4rem;border:none;border-radius:.8rem;-webkit-border-radius:.8rem;-moz-border-radius:.8rem;-ms-border-radius:.8rem;-o-border-radius:.8rem;background-color:var(--cta-button);color:var(--cta-button-text);box-shadow:0 0 1rem var(--cta-button-shadow)}@media screen and (min-width:600px){.score-main .congrats{font-size:5rem;margin:4rem auto 0}.score-main .done{max-width:40rem;color:#fff;font-size:2rem;text-align:center;margin:1rem auto}}@media screen and (min-width:900px){.score-main .buttons{display:flex;align-items:center;justify-content:space-between;max-width:50rem;margin:auto}}.buttons button:hover{cursor:pointer;transform:scale(1.05);-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05)}.buttons button:active{transform:scale(.95) translateY(5px);-webkit-transform:scale(.95) translateY(5px);-moz-transform:scale(.95) translateY(5px);-ms-transform:scale(.95) translateY(5px);-o-transform:scale(.95) translateY(5px)}main.gameplay-main{background-image:linear-gradient(var(--gameplay-bg));min-height:100vh;padding:3rem 0 4rem}.gameplay-main .cancel{background-color:var(--x-fill);color:#fff;padding:.5rem;margin:0 0 0 2rem;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.gameplay-main .progress{color:#fff;font-size:1.4rem;text-align:center;margin:2rem 0 0}.gameplay-main .question{font-size:6rem;font-family:poppins-semiBold;color:#fff;max-width:fit-content;margin:0 auto 2rem}.gameplay-main .answers{display:grid;grid-template-columns:1fr 1fr;justify-items:center;margin:4rem auto 6rem;max-width:40rem;row-gap:4rem}.answers .answer{width:12rem;height:12rem;display:flex;align-items:center;justify-content:center;background-color:var(--answers-bg);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;box-shadow:0 0 2rem var(--answers-shadow);border:10px solid var(--answers-border)}.answer.active{background-color:var(--answer-fill)}.answer p{font-size:4rem;font-family:poppins-semiBold;color:#fff}.gameplay-main button{display:block;margin:4rem auto;font-family:poppins-semiBold;font-size:2rem;padding:1rem 2.5rem;border:none;border-radius:.8rem;-webkit-border-radius:.8rem;-moz-border-radius:.8rem;-ms-border-radius:.8rem;-o-border-radius:.8rem;background-color:var(--cta-button);color:var(--cta-button-text);box-shadow:0 0 1rem var(--cta-button-shadow)}.gameplay-main button.disabled{opacity:.6;pointer-events:none}.gameplay-main .overlay{position:fixed;top:0;left:0;background-color:#00000063;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.01s ease-in-out;-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-ms-transition:.01s ease-in-out;-o-transition:.01s ease-in-out}div.score-showcase{background-color:var(--wrong-answer-popup);width:90%;max-width:40rem;border-radius:1rem;padding:2rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;-o-border-radius:1rem;box-shadow:0 0 1rem #0000003a}.score-showcase span{font-size:2rem;font-family:poppins-semiBold}.score-showcase p{color:#fff;font-size:1.5rem;font-family:poppins;text-align:center}.score-showcase button{margin:4rem auto 0}.gameplay-main .overlay.visible{visibility:visible;opacity:1}@media screen and (min-width:600px){.gameplay-main .cancel{margin:1rem 0 0 6rem}.gameplay-main .progress{margin:6rem auto 1rem;font-size:1.5rem}.gameplay-main .question{margin:0 auto 4rem}}@media screen and (min-width:900px){.gameplay-main .progress{margin:9rem auto 1rem}.gameplay-main .answers{display:flex;align-items:center;justify-content:space-between;max-width:60rem}}.answers .answer:hover,.gameplay-main .cancel:hover,.gameplay-main button:hover{cursor:pointer;transform:scale(1.05);-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-ms-transform:scale(1.05);-o-transform:scale(1.05)}.answers .answer:active,.gameplay-main .cancel:active,.gameplay-main button:active{transform:scale(.95) translateY(5px);-webkit-transform:scale(.95) translateY(5px);-moz-transform:scale(.95) translateY(5px);-ms-transform:scale(.95) translateY(5px);-o-transform:scale(.95) translateY(5px)}@keyframes score-float{to{transform:translateY(-50rem);-webkit-transform:translateY(-50rem);-moz-transform:translateY(-50rem);-ms-transform:translateY(-50rem);-o-transform:translateY(-50rem);opacity:0}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:poppins;transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-ms-transition:.2s ease-in-out;-o-transition:.2s ease-in-out}html{font-size:62.5%}:root{--bg-main:#005675;--popup-bg:#A8E8FF;--popup-button:#005675;--category-bg: #dbf5ff;--ball:to bottom right, hsl(196, 100%, 63%) 10% ,hsl(196, 100%, 23%);--btn-addition:to bottom right, #ff7544, #DB3A00;--btn-subtraction:to bottom right, hsl(196, 100%, 63%), hsl(196, 100%, 43%);--btn-division:to bottom right, hsl(115, 100%, 53%), hsl(115, 100%, 43%);--btn-multiplication: to bottom right, hsl(196, 100%, 63%), hsl(316, 100%, 63%);--gameplay-bg:#FF7544, #DB3A00;--x-fill:#BD0900;--answers-bg:#EA8B69;--answers-border:hsl(16, 95%, 62%);--answer-fill:hsl(16, 100%, 53%);--answers-shadow: #a82d0080;--wrong-answer-popup:hsl(16, 100%, 53%);--cta-button: #FFE5DB;--cta-button-text: #751F00;--cta-button-shadow: #0000004d}body.red{--gameplay-bg:#FF7544, #DB3A00;--x-fill:#BD0900;--answers-bg:#EA8B69;--answers-border:hsl(16, 95%, 62%);--answer-fill:hsl(16, 100%, 53%);--answers-shadow: #a82d0080;--wrong-answer-popup:hsl(16, 100%, 53%)}body.blue{--gameplay-bg:hsl(196, 100%, 63%) ,hsl(196, 100%, 23%);--x-fill:hsl(183, 100%, 27%);--answers-bg:hsl(196, 75%, 66%);--answers-border:hsl(196, 95%, 52%);--answer-fill:hsl(196, 100%, 43%);--answers-shadow: hsla(196, 100%, 33%, .502);--wrong-answer-popup:hsl(196, 100%, 43%);--cta-button: hsl(197, 100%, 93%);--cta-button-text: hsl(196, 100%, 23%)}body.green{--gameplay-bg: hsl(115, 70%, 53%), hsl(115, 80%, 43%);--x-fill:hsl(102, 100%, 27%);--answers-bg:hsl(115, 75%, 66%);--answers-border:hsl(115, 95%, 52%);--answer-fill:hsl(115, 100%, 33%);--answers-shadow: hsla(115, 100%, 33%, .502);--wrong-answer-popup:hsl(115, 80%, 43%);--cta-button: hsl(116, 100%, 93%);--cta-button-text: hsl(115, 100%, 23%)}body.purple{--gameplay-bg: hsl(196, 100%, 63%), hsl(316, 100%, 63%);--x-fill:hsl(196, 100%, 27%);--answers-bg:hsl(316, 75%, 66%);--answers-border:hsl(316, 100%, 52%);--answer-fill:hsl(316, 100%, 43%);--answers-shadow: hsla(316, 100%, 33%, .502);--wrong-answer-popup:hsl(316, 90%, 63%);--cta-button: hsl(317, 100%, 93%);--cta-button-text: hsl(316, 100%, 23%)}@font-face{font-family:poppins;src:url(/assets/Poppins-Regular.707fdc5c.ttf)}@font-face{font-family:poppins-semiBold;src:url(/assets/Poppins-SemiBold.248c0244.ttf)}@font-face{font-family:poppins-Bold;src:url(/assets/Poppins-Bold.7219547e.ttf)}*::selection{background-color:var(--cta-button);color:var(--cta-button-text)}.home-overlay{background-color:var(--bg-main);height:100vh;display:flex;align-items:center;justify-content:center}.home-overlay .popup{width:90vw;max-width:45rem;background-color:var(--popup-bg);padding:2rem;border-radius:.7rem;-webkit-border-radius:.7rem;-moz-border-radius:.7rem;-ms-border-radius:.7rem;-o-border-radius:.7rem;box-shadow:0 .2rem 1rem #0000004b}form h2{text-align:center;font-weight:400;font-size:1.7rem;margin:0 0 3rem;font-family:poppins-semiBold}form input{padding:1.5rem;max-width:100%;display:block;margin:auto;border:none;border-radius:3rem;-webkit-border-radius:3rem;-moz-border-radius:3rem;-ms-border-radius:3rem;-o-border-radius:3rem;text-align:center}form input::placeholder{font-size:1.2rem;text-align:center}form .validator{font-size:1.2rem;color:#8c1818;text-align:center;margin:1rem 0 0}form .validator.hidden{visibility:none;opacity:0;margin:0;transform:scale(0);-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);height:.1rem}form button{display:block;margin:3rem auto 0;padding:1rem 2.7rem;background-color:var(--popup-button);color:#fff;font-family:poppins-bold;letter-spacing:.4px;font-size:1.5rem;border:none;border-radius:.5rem;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;-ms-border-radius:.5rem;-o-border-radius:.5rem;box-shadow:0 .2rem .4rem #0003}form button:hover{cursor:pointer}form button:active{transform:translateY(2px);-webkit-transform:translateY(2px);-moz-transform:translateY(2px);-ms-transform:translateY(2px);-o-transform:translateY(2px);box-shadow:none}