@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap";:root{--light-color: #f1f0d8;--dark-color: #242424;--primary: #039be5;--primary-dark: #266daf}body,button{font-family:Chakra Petch,sans-serif}h1,h2,h3,h4,p{margin:0;color:var(--light-color)}h1{font-size:120px;font-weight:900}h2{font-size:92px;font-weight:700}h3{font-size:48px}h4{font-size:32px}body{color:var(--light-color);background-color:var(--dark-color);min-height:100vh;max-height:100vh;margin:0;overflow:hidden}.full-width{width:100%!important}.flex{display:flex}.flex.column{flex-direction:column}.flex.center{align-items:center;justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}.gap-5{gap:3rem}@keyframes init{0%{width:0px;height:0px}to{width:56px;height:56px;margin-top:0;opacity:1}}@keyframes moveDown{0%{left:50%;top:50%}50%{top:40%}to{top:calc(100% - 60px)}}@keyframes moveUp{50%{top:40%}to{top:50%}}@keyframes movePaddle{0%{left:20%}20%{left:10%}to{left:50%}}@keyframes materia{50%{top:26px}to{position:relative;width:100%;height:50px;border-radius:0;top:26px;background:linear-gradient(180deg,var(--primary),var(--primary-dark))}}@keyframes puff{to{top:50%;height:100%;padding:0 100%;background:var(--dark-color)}}@keyframes borderRadius{to{border-radius:0}}@keyframes show{to{opacity:1}}@keyframes pulse{0%{box-shadow:0 1px 5px 0 var(--primary)}50%{box-shadow:0 1px 14px 0 var(--primary)}to{box-shadow:0 1px 5px 0 var(--primary)}}@keyframes score{0%{transform:scale(.2) translateY(-50%)}70%{transform:scale(1.2) translateY(-50%)}to{transform:scale(1) translateY(-50%)}}.align-center{align-items:center!important}.justify-center{justify-content:center!important}.align-left{align-items:left!important}.justify-left{justify-content:left!important}.align-right{align-items:right!important}.justify-right{justify-content:right!important}.justify-around{justify-content:space-around!important}.justify-between{justify-content:space-between!important}.justify-evenly{justify-content:space-evenly!important}.m-0{margin:0!important}.mt-0,.my-0{margin-top:0!important}.mr-0,.mx-0{margin-right:0!important}.mb-0,.my-0{margin-bottom:0!important}.ml-0,.mx-0{margin-left:0!important}.m-1{margin:.25rem!important}.mt-1,.my-1{margin-top:.25rem!important}.mr-1,.mx-1{margin-right:.25rem!important}.mb-1,.my-1{margin-bottom:.25rem!important}.ml-1,.mx-1{margin-left:.25rem!important}.m-2{margin:.5rem!important}.mt-2,.my-2{margin-top:.5rem!important}.mr-2,.mx-2{margin-right:.5rem!important}.mb-2,.my-2{margin-bottom:.5rem!important}.ml-2,.mx-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mt-3,.my-3{margin-top:1rem!important}.mr-3,.mx-3{margin-right:1rem!important}.mb-3,.my-3{margin-bottom:1rem!important}.ml-3,.mx-3{margin-left:1rem!important}.m-4{margin:1.5rem!important}.mt-4,.my-4{margin-top:1.5rem!important}.mr-4,.mx-4{margin-right:1.5rem!important}.mb-4,.my-4{margin-bottom:1.5rem!important}.ml-4,.mx-4{margin-left:1.5rem!important}.m-5{margin:3rem!important}.mt-5,.my-5{margin-top:3rem!important}.mr-5,.mx-5{margin-right:3rem!important}.mb-5,.my-5{margin-bottom:3rem!important}.ml-5,.mx-5{margin-left:3rem!important}.p-0{padding:0!important}.pt-0,.py-0{padding-top:0!important}.pr-0,.px-0{padding-right:0!important}.pb-0,.py-0{padding-bottom:0!important}.pl-0,.px-0{padding-left:0!important}.p-1{padding:.25rem!important}.pt-1,.py-1{padding-top:.25rem!important}.pr-1,.px-1{padding-right:.25rem!important}.pb-1,.py-1{padding-bottom:.25rem!important}.pl-1,.px-1{padding-left:.25rem!important}.p-2{padding:.5rem!important}.pt-2,.py-2{padding-top:.5rem!important}.pr-2,.px-2{padding-right:.5rem!important}.pb-2,.py-2{padding-bottom:.5rem!important}.pl-2,.px-2{padding-left:.5rem!important}.p-3{padding:1rem!important}.pt-3,.py-3{padding-top:1rem!important}.pr-3,.px-3{padding-right:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.pl-3,.px-3{padding-left:1rem!important}.p-4{padding:1.5rem!important}.pt-4,.py-4{padding-top:1.5rem!important}.pr-4,.px-4{padding-right:1.5rem!important}.pb-4,.py-4{padding-bottom:1.5rem!important}.pl-4,.px-4{padding-left:1.5rem!important}.p-5{padding:3rem!important}.pt-5,.py-5{padding-top:3rem!important}.pr-5,.px-5{padding-right:3rem!important}.pb-5,.py-5{padding-bottom:3rem!important}.pl-5,.px-5{padding-left:3rem!important}.m-n1{margin:-.25rem!important}.mt-n1,.my-n1{margin-top:-.25rem!important}.mr-n1,.mx-n1{margin-right:-.25rem!important}.mb-n1,.my-n1{margin-bottom:-.25rem!important}.ml-n1,.mx-n1{margin-left:-.25rem!important}.m-n2{margin:-.5rem!important}.mt-n2,.my-n2{margin-top:-.5rem!important}.mr-n2,.mx-n2{margin-right:-.5rem!important}.mb-n2,.my-n2{margin-bottom:-.5rem!important}.ml-n2,.mx-n2{margin-left:-.5rem!important}.m-n3{margin:-1rem!important}.mt-n3,.my-n3{margin-top:-1rem!important}.mr-n3,.mx-n3{margin-right:-1rem!important}.mb-n3,.my-n3{margin-bottom:-1rem!important}.ml-n3,.mx-n3{margin-left:-1rem!important}.m-n4{margin:-1.5rem!important}.mt-n4,.my-n4{margin-top:-1.5rem!important}.mr-n4,.mx-n4{margin-right:-1.5rem!important}.mb-n4,.my-n4{margin-bottom:-1.5rem!important}.ml-n4,.mx-n4{margin-left:-1.5rem!important}.m-n5{margin:-3rem!important}.mt-n5,.my-n5{margin-top:-3rem!important}.mr-n5,.mx-n5{margin-right:-3rem!important}.mb-n5,.my-n5{margin-bottom:-3rem!important}.ml-n5,.mx-n5{margin-left:-3rem!important}.m-auto{margin:auto!important}.mt-auto,.my-auto{margin-top:auto!important}.mr-auto,.mx-auto{margin-right:auto!important}.mb-auto,.my-auto{margin-bottom:auto!important}.ml-auto,.mx-auto{margin-left:auto!important}.alert{position:fixed;background-color:var(--dark-color);border-radius:10px;padding:16px;left:50%;translate:-50% 0;text-align:center}.alert.pause{bottom:30px;animation:pulse 1s infinite}.alert.score-alert{translate:-50%;font-size:64px;top:calc(50% + 25px);animation:score 1s ease forwards;border:1px solid var(--primary);transform-origin:center}.alert p{font-size:22px}.ball{height:24px;width:24px;border-radius:50%;position:absolute;background:radial-gradient(circle at 8px 8px,var(--light-color),var(--primary),#000)}button{cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;background:none;border:none;font-weight:500;transition:background .25s,color .25s;border-radius:100px;background-color:var(--primary);padding:16px 64px;font-size:32px;color:var(--light-color);width:250px;box-shadow:#0000002b 0 -23px 25px inset,#00000026 0 -36px 30px inset,#0000001a 0 -79px 40px inset,#0000000f 0 2px 1px,#00000017 0 4px 2px,#00000017 0 8px 4px,#00000017 0 16px 8px,#00000017 0 32px 16px}button:not(:disabled):hover{background-color:var(--primary-dark);color:#fff}button:not(:disabled):active{transform:translateY(2px)}.header{background:linear-gradient(180deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;gap:32px;height:50px}.score{display:flex;align-items:center;justify-content:center;gap:8px}.input-container{display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px}.input-container .label{font-size:15px;font-weight:500}.input-container input:focus-visible{outline:none;border-color:var(--primary)}.input-container input:-webkit-autofill{animation-name:auto-fill;animation-duration:.5s}.input-container input{background-color:#fff;font-size:15px;border-radius:16px;border:1px solid var(--element-border);width:100%;padding:11px 15px;box-sizing:border-box}.input-container input:disabled{background-color:var(--background-light);color:#6a7694}.input-container input::placeholder{color:var(--text-secondary)}.input-container input:not(:disabled):hover,.input-container input:not(:disabled):active{border-color:var(--primary)}input[type=range]{appearance:none;border-radius:50px;height:15px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;height:30px;width:30px;border-radius:50%;background-color:var(--primary);transition:background ease .15s}input[type=range]::-webkit-slider-thumb:hover{background-color:var(--primary-dark)}.paddle{position:absolute;background-color:var(--primary);height:150px;width:15px;border-radius:10px}.paddle.p1{box-shadow:inset 6px 0 4px 0 var(--primary-dark);left:20px}.paddle.p2{box-shadow:inset -6px 0 4px 0 var(--primary-dark);right:20px}.dashboard{background:var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100vh;width:100vw;z-index:-1;overflow:hidden}.dashboard .dashboard-ball{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--light-color);opacity:0;border-radius:50%;animation:init .5s .2s cubic-bezier(.55,.055,.675,.19) forwards,moveDown 1s .8s cubic-bezier(.6,-.28,.735,.045) forwards,moveUp 1s 1.8s cubic-bezier(.175,.885,.32,1.275) forwards,materia .5s 2.7s cubic-bezier(.86,0,.07,1) forwards,2s 2.9s ease forwards}.dashboard .splash{position:fixed;top:calc(100% - 30px);left:20%;height:30px;width:300px;transform:translate(-50%,-50%);background:var(--light-color);border-radius:200px;animation:movePaddle 1.8s linear forwards,puff .5s 1.8s cubic-bezier(.55,.055,.675,.19) forwards,borderRadius .2s 2.3s linear forwards}.dashboard .content{display:flex;flex-direction:column;align-items:center;gap:32px;opacity:0;z-index:2;animation:show 2s 3.1s ease forwards}.dashboard .content .button-container{display:flex;align-items:center;gap:16px}.dashboard h1{text-shadow:1px 1px 1px #919191,1px 2px 1px #919191,1px 3px 1px #919191,1px 4px 1px #919191,1px 5px 1px #919191,1px 6px 1px #919191,1px 7px 1px #919191,1px 8px 1px #919191,1px 9px 1px #919191,1px 10px 1px #919191,1px 18px 6px rgba(16,16,16,.4),1px 22px 10px rgba(16,16,16,.2),1px 25px 35px rgba(16,16,16,.2),1px 30px 60px rgba(16,16,16,.4)}.game{display:flex;flex-direction:column;height:100vh}.game .board{padding:0 10px;position:relative;flex:1;display:flex;justify-content:center}.game .board .devider{position:absolute;background-color:var(--light-color);height:100%;width:2px}.game .board .center{top:50%;translate:0 -50%;position:absolute;height:200px;width:200px;border:2px solid var(--light-color);border-radius:50%}.settings{padding:32px;display:flex;flex-direction:column;gap:32px;width:500px}.settings .other{display:flex;align-items:center;gap:8px;justify-content:space-between}.settings .other .counter{background-color:var(--primary);display:flex;align-items:center;justify-content:center;border-radius:50%;height:30px;width:30px;font-size:18px;font-weight:700;margin-left:4px}.settings .other input[type=range]{width:350px}