html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}:root{font-family:Rubik,sans-serif;font-size:16px;color:var(--color-text)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{width:0px;height:0px}::-webkit-scrollbar-thumb{background:var(--color-scrollbar-thumb);border:none}::-webkit-scrollbar-track{background:var(--color-scrollbar-track);border:none}::-webkit-scrollbar-corner{background:var(--color-scrollbar-track)}::selection{color:var(--color-selection-text);background:var(--color-selection)}a{text-decoration:none;color:var(--color-text)}body{background:var(--color-background);background-image:radial-gradient(var(--color-background-accent) 1.5px,transparent 1.5px);background-size:10px 10px;background-color:var(--color-background);display:flex;align-items:center;justify-content:center}body .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100dvh;width:clamp(69px,100%,727px);padding:16px}body .container .pfp{width:150px;height:150px;box-shadow:4px 4px 0 0 var(--color-shadow)}body .container h1{font-size:1.75rem;text-shadow:3px 3px 0 var(--color-shadow);color:var(--color-text);font-weight:800}body .container .subtitle{font-family:Rubik,sans-serif;font-size:.8rem;font-weight:300;color:var(--color-text-secondary)}body .container h2{width:100%;margin-top:6px;margin-bottom:-2px;font-size:1rem;font-weight:400}body .container h3{width:100%;margin:-2px 0;font-size:.8rem;color:var(--color-text-secondary)}body .container p{font-family:Rubik,sans-serif;font-size:.9rem;font-weight:300;color:var(--color-text);text-align:justify}body .container p strong{font-weight:500}body .container p em{font-style:italic}body .container p a{color:var(--color-text-secondary);cursor:pointer}body .container p a:hover:not(.button){text-decoration:underline}body .container hr{width:100%;height:1px;border:none;background:var(--color-hr)}body .container .buttons{display:flex;gap:12px;width:100%}body .container .button,body .container button{display:flex;align-items:center;gap:12px;width:100%;padding:8px;color:var(--color-text);font-family:Rubik,sans-serif;font-size:.9rem;font-weight:300;cursor:pointer;background:var(--color-button);border:1px solid var(--color-button-border);box-shadow:4px 4px 0 0 var(--color-shadow)}body .container .button:is(button),body .container button:is(button){width:auto}body .container .button:is(button[disabled]),body .container button:is(button[disabled]){cursor:not-allowed;color:var(--color-button-disabled);background:var(--color-button);border:1px solid var(--color-button-disabled);box-shadow:4px 4px 0 0 var(--color-shadow)}body .container .button:is(button[disabled]):hover,body .container button:is(button[disabled]):hover{transform:translate(0);box-shadow:4px 4px 0 0 var(--color-shadow)}body .container .button.hidden,body .container button.hidden{display:none}body .container .button:hover,body .container .button.hover,body .container button:hover,body .container button.hover{transform:translate(1px,1px);box-shadow:3px 3px 0 0 var(--color-shadow);background:var(--color-button-hover)}body .container .button:active,body .container .button.active,body .container button:active,body .container button.active{transform:translate(3px,3px);box-shadow:1px 1px 0 0 var(--color-shadow);background:var(--color-button-active)}body .container .button .icon,body .container button .icon{width:32px;height:32px}body .container .button .label,body .container button .label{font-family:Rubik,sans-serif;font-size:1rem;font-weight:300;color:var(--color-text);overflow:hidden}body .container input,body .container textarea,body .container select,body .container .output{width:100%;padding:8px;color:var(--color-text);font-family:Rubik,sans-serif;font-size:.9rem;line-height:1.1rem;font-weight:300;cursor:pointer;background:var(--color-input);border:1px solid var(--color-input-border)}body .container input:is(textarea),body .container input[type=text],body .container input[type=number],body .container textarea:is(textarea),body .container textarea[type=text],body .container textarea[type=number],body .container select:is(textarea),body .container select[type=text],body .container select[type=number],body .container .output:is(textarea),body .container .output[type=text],body .container .output[type=number]{cursor:text}body .container input:is(textarea),body .container textarea:is(textarea),body .container select:is(textarea),body .container .output:is(textarea){resize:vertical}body .container input:is(.auto),body .container textarea:is(.auto),body .container select:is(.auto),body .container .output:is(.auto){width:auto}body .container input[type=range],body .container textarea[type=range],body .container select[type=range],body .container .output[type=range]{border:none;background:none;height:23px;-webkit-appearance:none;margin:10px 0;width:100%}body .container input[type=range]:focus,body .container textarea[type=range]:focus,body .container select[type=range]:focus,body .container .output[type=range]:focus{outline:none}body .container input[type=range]::-webkit-slider-runnable-track,body .container textarea[type=range]::-webkit-slider-runnable-track,body .container select[type=range]::-webkit-slider-runnable-track,body .container .output[type=range]::-webkit-slider-runnable-track{width:100%;height:8px;cursor:pointer;background:var(--color-range-background);border:1px solid var(--color-range-border)}body .container input[type=range]::-webkit-slider-thumb,body .container textarea[type=range]::-webkit-slider-thumb,body .container select[type=range]::-webkit-slider-thumb,body .container .output[type=range]::-webkit-slider-thumb{border:1px solid var(--color-range-border);height:16px;width:16px;background:var(--color-range);cursor:pointer;-webkit-appearance:none;margin-top:-5px}body .container input[type=range]:focus::-webkit-slider-runnable-track,body .container textarea[type=range]:focus::-webkit-slider-runnable-track,body .container select[type=range]:focus::-webkit-slider-runnable-track,body .container .output[type=range]:focus::-webkit-slider-runnable-track{background:var(--color-range-background)}body .container input[type=range]::-moz-range-track,body .container textarea[type=range]::-moz-range-track,body .container select[type=range]::-moz-range-track,body .container .output[type=range]::-moz-range-track{width:100%;height:8px;cursor:pointer;background:var(--color-range-background);border:1px solid var(--color-range-border)}body .container input[type=range]::-moz-range-thumb,body .container textarea[type=range]::-moz-range-thumb,body .container select[type=range]::-moz-range-thumb,body .container .output[type=range]::-moz-range-thumb{border:1px solid var(--color-range-border);height:16px;width:16px;background:var(--color-range);cursor:pointer}body .container input[type=range]::-ms-track,body .container textarea[type=range]::-ms-track,body .container select[type=range]::-ms-track,body .container .output[type=range]::-ms-track{width:100%;height:8px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}body .container input[type=range]::-ms-fill-lower,body .container textarea[type=range]::-ms-fill-lower,body .container select[type=range]::-ms-fill-lower,body .container .output[type=range]::-ms-fill-lower{background:var(--color-range-background);border:1px solid var(--color-range-border)}body .container input[type=range]::-ms-fill-upper,body .container textarea[type=range]::-ms-fill-upper,body .container select[type=range]::-ms-fill-upper,body .container .output[type=range]::-ms-fill-upper{background:var(--color-range-background);border:1px solid var(--color-range-border)}body .container input[type=range]::-ms-thumb,body .container textarea[type=range]::-ms-thumb,body .container select[type=range]::-ms-thumb,body .container .output[type=range]::-ms-thumb{border:1px solid var(--color-range-border);height:16px;width:16px;background:var(--color-range);cursor:pointer;margin-top:0}body .container input[type=range]:focus::-ms-fill-lower,body .container textarea[type=range]:focus::-ms-fill-lower,body .container select[type=range]:focus::-ms-fill-lower,body .container .output[type=range]:focus::-ms-fill-lower{background:var(--color-range-background)}body .container input[type=range]:focus::-ms-fill-upper,body .container textarea[type=range]:focus::-ms-fill-upper,body .container select[type=range]:focus::-ms-fill-upper,body .container .output[type=range]:focus::-ms-fill-upper{background:var(--color-range-background)}body .container #title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:50px}body .container #game{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;height:100%;padding-top:8px;overflow-x:hidden;overflow-y:scroll}body .container #game .guess-word{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}body .container #game .guess-word.shake{animation:shake .2s ease-in-out}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(5px)}40%{transform:translate(-5px)}60%{transform:translate(5px)}80%{transform:translate(-5px)}to{transform:translate(0)}}body .container #game .guess-word .guess-letter{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid var(--color-button-border);background:var(--color-background-accent);font-size:2rem;font-weight:800}body .container #game .guess-word .guess-letter.green{background:var(--color-key-green)}body .container #game .guess-word .guess-letter.yellow{background:var(--color-key-yellow)}body .container #game .guess-word .guess-letter.black{background:var(--color-key-black)}body .container #keyboard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}body .container #keyboard .keyboard-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}body .container #keyboard .keyboard-row .keyboard-key{display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:400;color:var(--color-text);border-color:var(--color-button-border)}body .container #keyboard .keyboard-row .keyboard-key#key-backspace,body .container #keyboard .keyboard-row .keyboard-key#key-enter{width:76px}body .container #keyboard .keyboard-row .keyboard-key.green{background:var(--color-key-green)}body .container #keyboard .keyboard-row .keyboard-key.yellow{background:var(--color-key-yellow)}body .container #keyboard .keyboard-row .keyboard-key.black{background:var(--color-key-black);color:var(--color-key-black-text);border-color:var(--color-key-black-text)}body .container #popup{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;width:100dvw;height:100dvh;pointer-events:none}body .container #popup.hidden{display:none}body .container #popup #popup-container{display:flex;align-items:center;justify-content:center;width:100%;height:50px;background:rgba(0,0,0,.7333333333)}body .container #popup #popup-container #popup-message{font-size:1.25rem;font-weight:500;text-align:center;transform:translateY(-4px);color:#eee}body .container footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--color-text-secondary);height:32px}body .container footer p{font-family:Rubik,sans-serif;font-size:.7rem;font-weight:300}body .container footer p a{color:var(--color-text-secondary);cursor:pointer}body .container footer p a:hover{text-decoration:underline}@media only screen and (max-width: 600px){body .container #keyboard .keyboard-row .keyboard-key{width:40px;height:40px;font-size:.8rem}body .container #keyboard .keyboard-row .keyboard-key#key-backspace,body .container #keyboard .keyboard-row .keyboard-key#key-enter{width:64px}}@media only screen and (max-width: 505px){body .container #keyboard .keyboard-row .keyboard-key{width:32px;height:32px;font-size:.75rem}body .container #keyboard .keyboard-row .keyboard-key#key-backspace,body .container #keyboard .keyboard-row .keyboard-key#key-enter{width:52px}}@media only screen and (max-width: 430px){body .container #keyboard .keyboard-row .keyboard-key{width:28px;height:28px;font-size:.65rem}body .container #keyboard .keyboard-row .keyboard-key#key-backspace,body .container #keyboard .keyboard-row .keyboard-key#key-enter{width:46px}}@media only screen and (max-width: 390px){body .container #game .guess-word .guess-letter{width:54px;height:54px}body .container #keyboard .keyboard-row .keyboard-key{width:24px;height:24px;font-size:.55rem}body .container #keyboard .keyboard-row .keyboard-key#key-backspace,body .container #keyboard .keyboard-row .keyboard-key#key-enter{width:40px}}@media only screen and (max-width: 350px){body .container #game .guess-word .guess-letter{width:48px;height:48px}body .container #keyboard .keyboard-row .keyboard-key{width:20px;height:20px;font-size:.45rem}body .container #keyboard .keyboard-row .keyboard-key#key-backspace,body .container #keyboard .keyboard-row .keyboard-key#key-enter{width:34px}}@media only screen and (max-width: 310px){body .container #game .guess-word .guess-letter{width:40px;height:40px}body .container #keyboard .keyboard-row .keyboard-key{width:18px;height:18px;font-size:.3rem}body .container #keyboard .keyboard-row .keyboard-key#key-backspace,body .container #keyboard .keyboard-row .keyboard-key#key-enter{width:30px}}@media only screen and (max-width: 270px){body .container #game .guess-word .guess-letter{width:32px;height:32px}body .container #keyboard .keyboard-row .keyboard-key{width:6px;height:6px;font-size:.25rem;padding:6px}body .container #keyboard .keyboard-row .keyboard-key#key-backspace,body .container #keyboard .keyboard-row .keyboard-key#key-enter{width:24px;padding:6px}}