@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap);
.btn--open-modal{cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:Poppins;font-weight:bold;padding:.3rem}.btn--open-modal svg{margin-left:1rem}.btn--close-modal{margin-left:auto;margin-bottom:1rem;cursor:pointer}.btn--control{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;width:50px;height:50px;transition:.2s all ease-in;background-color:var(--arrow-background)}.btn--control[data-code=ArrowUp]{top:0;left:50%;transform:translateX(-50%)}.btn--control[data-code=ArrowUp]:focus,.btn--control[data-code=ArrowUp]:active{transform:translateX(-50%) scale(1.2)}.btn--control[data-code=ArrowRight]{right:0;top:50%;transform:translateY(-50%)}.btn--control[data-code=ArrowRight]:focus,.btn--control[data-code=ArrowRight]:active{transform:translateY(-50%) scale(1.2)}.btn--control[data-code=ArrowDown]{bottom:0;left:50%;transform:translateX(-50%)}.btn--control[data-code=ArrowDown]:focus,.btn--control[data-code=ArrowDown]:active{transform:translateX(-50%) scale(1.2)}.btn--control[data-code=ArrowLeft]{left:0;top:50%;transform:translateY(-50%)}.btn--control[data-code=ArrowLeft]:focus,.btn--control[data-code=ArrowLeft]:active{transform:translateY(-50%) scale(1.2)}.btn--control:focus,.btn--control:active{background-color:gray}.gradient{background-image:linear-gradient(315deg, #d9e4f5 0%, #f5e3e6 74%);background-size:400% 400%;position:relative;z-index:1;-webkit-animation:GradientRotation 20s ease infinite;-moz-animation:GradientRotation 20s ease infinite;animation:GradientRotation 20s ease infinite}.gradient::before{content:"";background-color:#000;background-image:linear-gradient(147deg, #000000 0%, #04619f 74%);background-size:400% 400%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0;transition:opacity .2s ease-in}.dark .gradient::before{opacity:1}@keyframes GradientRotation{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.game-controls-container{display:none}.game-controls-container button{font-weight:bold;padding:.5rem;font-size:1.1rem}#mobile-arrows{display:none;position:relative;height:200px;width:200px;margin:0 auto}@media(max-width: 768px){#mobile-arrows{display:block !important;margin-left:2rem}.game-controls-container{display:flex;justify-content:space-around;width:100%}.move-controls-container{display:flex;position:relative}}.toggle{height:32px;width:65px;border-radius:15px;border:2px solid #474755;position:relative;transition:all .2s ease-in;background:linear-gradient(180deg, #2D2F39 0%, #1F2027 100%);cursor:pointer;appearance:none}.toggle::after{content:"";width:24px;height:24px;position:absolute;top:2px;left:2px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(44,44,44,.2);transition:all .2s cubic-bezier(0.5, 0.1, 0.75, 1.35)}.toggle:checked{border-color:#654fec;background:#fff}.toggle:checked::after{transform:translateX(35px);background:linear-gradient(180deg, #2D2F39 0%, #1F2027 100%)}.options{display:flex;flex-flow:column;position:absolute;top:0;background:var(--options-background);box-shadow:2px 3px 5px 0px rgba(0,0,0,.75);padding:2rem 3rem;border-radius:15px;transform:translateY(-20rem);transition:transform 1s ease-out,color .2s ease-in,background .2s ease-in}.options__group{display:flex;align-items:center;justify-content:space-between;width:21rem;margin-bottom:1.5rem;position:relative}.options__group label{font-size:1.5rem;font-weight:bold}.options__group select{font-family:inherit;font-size:inherit}.options.open{transform:translateY(20rem)}@media(max-width: 576px){.options{padding:2rem}.options__group{width:20rem}}.score-container{font-size:1.2rem;font-weight:500;margin-top:20px;position:absolute;top:0;left:20px}.score-animation{opacity:0;position:absolute;left:80px}.score-animation.animated{animation:addScore .5s ease-in}@keyframes addScore{50%{opacity:1}to{opacity:0;transform:translateY(-2rem)}}@media(max-width: 768px){.score-container{left:2%;top:40%}}:root{--text-color: #000000;--cavnas-border-color: silver;--arrow-background: white;--options-background: #c0b8c8}:root.dark{--text-color: silver;--cavnas-border-color: silver;--arrow-background: #454141;--options-background: #454141}*{box-sizing:border-box}*::after{box-sizing:border-box}*::before{box-sizing:border-box}html{font-size:16px;font-family:Poppins;color:var(--text-color);overflow-x:hidden}body{min-height:100vh;margin:0;overflow-x:hidden;display:flex;flex-flow:row wrap;align-items:center;justify-content:space-around;transition:all .2s ease-in}canvas{background:#fff;border-radius:10px;border:1px solid var(--cavnas-border-color);transition:border-color .2s ease-in}.game-state{height:30px;margin:10px 0}@media(max-width: 768px){.start-label{display:none}.game-state{position:absolute;top:-20%;margin:0}}@media(max-width: 567px){html,body{font-size:14px}}