:root{max-width:1280px;margin:0 auto;text-align:center;font-family:Atma,system-ui;font-weight:400;font-style:normal;color:#fff;background-color:#8b8bfa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#main{margin:auto;max-width:80dvw}body{margin:auto;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.3em .8em;font-size:1.5em;font-weight:500;font-family:inherit;color:#fff;background-color:#006400;cursor:pointer;transition:border-color .25s}@media (max-width: 600px){#main{max-width:90dvw;min-height:70dvh}}#gameScreen .gameData{display:flex;justify-content:center;align-items:center;gap:5px;margin-bottom:20px;font-size:1.4em}#gameScreen .gameData div:not(#chrono){background-color:#00f;padding:5px 10px;border-radius:10px;font-weight:bolder}#gameScreen #chrono{background-color:#00f;padding:1px 12px;border-radius:10px;font-weight:bolder;font-size:1.2em}#gameScreen button{margin-top:20px}#gameScreen .questionsContainer{margin:auto;position:relative;width:85dvw;max-width:500px;height:60dvh}#gameScreen:nth-child(2){transform:translateY(-100%)}#gameScreen .questionCard{background-color:#add8e6;border-radius:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;left:0;top:0}#gameScreen .questionCard h3{margin:0;padding:10px 30px;background-color:#00f;border-radius:20px;font-size:2.5em}#gameScreen .questionCard h2{color:#00f}#gameScreen .questionCard ul{padding:0;list-style:none;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}@media (max-width: 600px){#gameScreen{margin:auto}#gameScreen .gameData{display:flex;flex-wrap:wrap}#gameScreen .gameData #chrono{width:65%}#gameScreen .questionsContainer{max-height:50dvh}#gameScreen .questionsContainer ul{max-width:90%;margin:auto}}.answer{position:relative;padding:10px;min-width:24px;background-color:#fff;border-radius:10px;color:#000;cursor:pointer}.answer p{font-weight:bolder;margin:0}.answer div{display:none;top:0;left:0;width:100%;height:100%;align-items:center}.answer div span{width:100%;height:100%;font-size:2em;font-weight:bolder;color:#fff}.answer[wrong=true]{background-color:red}.answer[wrong=true] p{opacity:0}.answer[wrong=true] .wrongMark{display:flex;position:absolute;animation-name:wrong-animation;animation-duration:.5s}.answer[correct=true]{background-color:green}.answer[correct=true] p{opacity:0}.answer[correct=true] .correctMark{display:flex;position:absolute;transform-origin:50%;animation-name:correct-animation;animation-duration:.3s}@keyframes correct-animation{50%{transform:scale(3)}to{transform:scale(1)}}@keyframes wrong-animation{0%{transform:rotate(0)}20%{transform:rotate(20deg)}40%{transform:rotate(-20deg)}60%{transform:rotate(20deg)}80%{transform:rotate(-20deg)}to{transform:rotate(0)}}#selectTablesForm div{display:flex;justify-content:center;align-items:center;gap:20px;font-size:1.5em;flex-wrap:wrap}#selectTablesForm label{background-color:#00008b;font-weight:bolder;width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}#selectTablesForm input{display:none}#selectTablesForm input:checked+label{background-color:green}#selectTablesForm button{margin-top:20px}@media (max-width: 600px){#selectTablesForm div{max-width:95dvw;margin:auto}}#startEmoji .emoji{font-size:5em;position:absolute;left:80px;bottom:80px;animation-name:bounce;animation-duration:1s;animation-direction:alternate;animation-iteration-count:infinite}#startEmoji .textBox{color:#000;background-color:#fff;border-radius:20px;font-size:2em;position:absolute;bottom:100px;left:200px}#startEmoji .textBox span{padding:30px}#startEmoji .textBox:before{border:15px solid white;content:"";border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;position:absolute;bottom:9px;left:-26px;transform:rotate(90deg)}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(20px)}}#gameEmoji .emoji{font-size:5em;position:absolute;left:80px;bottom:80px;animation-name:lateralMove;animation-duration:1.5s;animation-direction:alternate;animation-iteration-count:infinite}#gameEmoji .emoji[data-animation="2"]{animation-name:rightAnimation;animation-duration:1.5s;animation-direction:normal}#gameEmoji .emoji[data-animation="1"]{animation-name:wrongAnimation;animation-duration:.6s;animation-direction:normal}@keyframes lateralMove{0%{transform:translate(0)}to{transform:translate(20px)}}@keyframes rightAnimation{0%{transform:translateY(0)}20%{transform:translateY(30px)}40%{transform:translateY(0)}80%{transform:translateY(30px)}to{transform:translateY(0)}}@keyframes wrongAnimation{0%{transform:rotate(0)}35%{transform:rotate(15deg)}65%{transform:rotate(-15deg)}to{transform:rotate(0)}}@media (max-width: 600px){#startEmoji .emoji,#gameEmoji .emoji{font-size:4em;left:20px;bottom:20px}#startEmoji .textBox,#gameEmoji .textBox{left:120px;bottom:30px;right:15px;font-size:1.5em}#startEmoji .textBox span,#gameEmoji .textBox span{padding:10px}#startEmoji .textBox:before,#gameEmoji .textBox:before{bottom:4px;left:-22px}}#finalModalContainer,#closeModalContainer{transform-origin:50%;position:absolute;width:100dvw;height:100dvh;top:0;left:0;display:flex;justify-content:center;align-items:center;background-color:#f5deb338;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#finalModalContainer .finalModal,#finalModalContainer .closeModal,#closeModalContainer .finalModal,#closeModalContainer .closeModal{width:70%;height:70%;background-color:#00f;border-radius:20px;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center}#finalModalContainer .finalModal button,#finalModalContainer .closeModal button,#closeModalContainer .finalModal button,#closeModalContainer .closeModal button{margin:10px 30px;font-weight:800}#finalModalContainer .finalModal button+button,#finalModalContainer .closeModal button+button,#closeModalContainer .finalModal button+button,#closeModalContainer .closeModal button+button{background-color:red}.finalWrong,.finalTime,.finalNoWrong{font-size:1.2em;color:#90ee90;text-wrap:balance}.finalWrong{color:red}h2:has(span.finalNoWrong){animation-name:noErrors;animation-duration:.5s;animation-direction:alternate;animation-iteration-count:infinite}@keyframes noErrors{0%{transform:scale(1)}to{transform:scale(1.8)}}@media (max-width: 600px){#closeModalContainer .finalModal,#closeModalContainer .closeModal,#finalModalContainer .finalModal,#finalModalContainer .closeModal{width:90dvw;height:75dvh}#closeModalContainer h1,#finalModalContainer h1{margin-bottom:.4em}#closeModalContainer h2,#finalModalContainer h2{display:flex;flex-direction:column}}#closeButton{border-radius:50%;background-color:#fff;color:red;font-size:2.5em;font-weight:800;padding:8px 12px 2px;line-height:1em;border:4px solid red;position:absolute;top:10px;right:10px;display:flex;align-items:center}@media (max-width: 600px){#closeButton{font-size:1.5em;padding:8px 10px 2px}}