html,body{margin:0;padding:0%;font-family:Patrick Hand,cursive}main{background:#f4f1de;box-sizing:border-box;width:100vw;height:100vh;display:grid;grid-template-rows:4rem 1fr 3rem;-webkit-user-select:none;user-select:none}main header{display:flex;align-items:center;justify-content:center;letter-spacing:.5rem;font-size:3rem;font-weight:700;box-shadow:0 5px #000;color:#1ca61c}main header .a-span{color:#d44f40}main header .rating-container{display:flex;flex-direction:column;gap:0;text-align:center}main header .rating-container .rating-span{border-radius:.5rem .5rem 0 0;background:orange;color:#fff;font-size:1.5rem;padding-bottom:7px;height:1.5rem;letter-spacing:1px}main header .rating-container .label-span{color:#fff;padding:0 .04rem;background-color:#000;font-size:.47rem;font-weight:lighter;letter-spacing:.5px}main section{display:grid;grid-template-columns:2fr 1fr;background-color:#add8e62c}main section .game-container{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}main section .game-container .word-container{display:flex;gap:1rem;justify-content:center;align-items:center;padding:10px;border:3px solid black;border-radius:6px;background:#f4f1de;box-shadow:4px 4px #000}main section .game-container .char-box{padding:.5rem;border-bottom:5px solid black;min-width:40px;text-align:center;font-size:2rem;position:relative;box-shadow:2px 2px #000;border-radius:6px;background:#fff;animation:shaky .3s ease-in-out}main section .game-container .char-box:before{content:"";position:absolute;width:100%;height:100%;top:0;left:0;background:#ffffffe6;border-radius:2px;z-index:-1}main section .game-container .char-span{text-transform:uppercase;font-size:2rem;font-weight:700;text-shadow:1px 1px 0px black;visibility:hidden}main section .game-container .char-span.correct-guess{visibility:visible;color:green}main section .game-container .char-span.not-guessed{visibility:visible;color:red}main section .game-container .hint-container{padding:10px 15px;font-size:1.5rem;color:#2c3e50;background:#f4f1de;border:3px solid black;border-radius:8px;box-shadow:3px 3px #000;max-width:80%;text-align:center}main section .game-container .hint-container.hint-revealed{animation:shaky .2s ease-in}main section .game-container .actions-menu{display:flex;justify-content:center;align-items:center;gap:20px;padding:10px;font-size:1.5rem;width:fit-content}main section .game-container .attempts-box{padding:10px;background:#fff;border:3px solid black;border-radius:6px;box-shadow:2px 2px #000;text-align:center}main section .game-container .hint-box{display:flex;align-items:center;gap:10px;padding:10px;background:#fff;border:3px solid black;border-radius:6px;box-shadow:2px 2px #000}main section .game-container .switch{position:relative;display:inline-block;width:50px;height:26px;border:2px solid black;border-radius:15px;background:#ddd;cursor:pointer;box-shadow:2px 2px #000;-webkit-tap-highlight-color:transparent}main section .game-container .switch input{opacity:0;width:0;height:0}main section .game-container .slider{position:absolute;top:2px;left:2px;width:22px;height:22px;background-color:#fff;border-radius:50%;border:2px solid black;transition:transform .3s ease-in-out}main section .game-container input:checked+.slider{background-color:#3498db;transform:translate(24px)}main section .game-container input:not(:checked)+.slider{transform:translate(0)}main section .game-container .slider.round{border-radius:34px}main section .game-container .slider.round:before{border-radius:50%}main section .drawing-container{display:flex;flex-direction:column;justify-content:center;align-items:center;border-left:5px solid #444444de}main section .drawing-container .hangman{width:95%;height:95%}main footer{display:flex;align-items:center;justify-content:center;box-shadow:0 -5px #000}main footer a{text-decoration:none}@keyframes shaky{0%{transform:translate(2px,2px) rotate(0)}10%{transform:translate(-2px,-2px) rotate(-2deg)}20%{transform:translate(2px,-2px) rotate(2deg)}30%{transform:translate(-2px,2px) rotate(0)}40%{transform:translate(2px,2px) rotate(-2deg)}50%{transform:translate(-2px,-2px) rotate(2deg)}60%{transform:translate(2px,-2px) rotate(0)}70%{transform:translate(-2px,2px) rotate(-2deg)}80%{transform:translate(2px,2px) rotate(2deg)}90%{transform:translate(-2px,-2px) rotate(0)}to{transform:translate(0) rotate(0)}}@media (max-width: 480px){main{grid-template-rows:3rem 1fr 2rem}main header{font-size:2rem;letter-spacing:.3rem}main section{grid-template-columns:1fr}main section .game-container .hint-container{font-size:1rem;max-width:90%;margin:.5rem}main section .game-container .word-container{flex-wrap:wrap;gap:.5rem;margin:.5rem;padding:.5rem}main section .game-container .char-box{padding:.1rem}main section .game-container .actions-menu{flex-direction:column;gap:10px}main section .drawing-container{display:none}main footer{font-size:.8rem}}:root{--primary-color: #3498db;--primary-hover: #2980b9;--success-color: #2ecc71;--success-hover: #27ae60;--error-color: #e74c3c;--error-hover: #c0392b;--disabled-color: #bdc3c7;--white: white;--black: black;--shadow: 2px 2px 0px var(--black);--shadow-hover: 3px 3px 0px var(--black);--border-radius: 6px;--transition: all .2s ease-in-out;--font-family: "Shadows Into Light", cursive}.keyboard{display:flex;flex-direction:column;align-items:center;gap:10px}.keyboard .row{display:flex;gap:.4rem}.char-btn,.spacebar-btn{background-color:var(--primary-color);color:var(--white);border:2px solid var(--black);padding:12px 16px;font-size:1rem;border-radius:var(--border-radius);text-transform:uppercase;cursor:pointer;transition:var(--transition);font-family:var(--font-family);box-shadow:var(--shadow)}.char-btn:hover,.spacebar-btn:hover{background-color:var(--primary-hover);transform:translate(-1px,-1px);box-shadow:var(--shadow-hover)}.char-btn:disabled{background-color:var(--disabled-color);cursor:not-allowed;box-shadow:none;transform:none}.char-btn.correct-key:disabled{background-color:var(--success-color);border-color:#27ae60;box-shadow:2px 2px #1e8449}.char-btn.incorrect-key:disabled{background-color:var(--error-color);border-color:#c0392b;box-shadow:2px 2px #922b21;animation:shaky .2s ease-in-out}.spacebar-btn{width:50%;padding:12px 20px;font-size:1rem;letter-spacing:.1rem;background-color:var(--primary-color)}.spacebar-btn:hover{background-color:var(--primary-hover)}.spacebar-btn.next-btn{background-color:var(--success-color)}.spacebar-btn.next-btn:hover{background-color:var(--success-hover)}@media (max-width: 480px){.char-btn,.spacebar-btn{padding:.5rem .75rem;font-size:.9rem;font-family:Patrick Hand,cursive;-webkit-tap-highlight-color:transparent}.keyboard{gap:.5rem}.keyboard .row{gap:.25rem}}.install-banner{box-sizing:border-box;position:fixed;top:0;right:0;width:35%;background:#ffffffbe;color:#2d2d2d;border-radius:10px;display:flex;align-items:center;justify-content:space-between;font-size:1.2rem;padding:0 1rem;font-weight:700;letter-spacing:.25px;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-tap-highlight-color:transparent;transform:translateY(-100%);animation:slideDown .5s ease-in-out forwards}.install-banner.hide{animation:slideUp .5s ease-in-out forwards}.install-banner button{background:#2d2d2d;color:#fff;padding:.5rem .75rem;margin-right:1rem;border:none;border-radius:6px;cursor:pointer;font-weight:700}.close-btn{cursor:pointer;font-size:1rem}@media (max-width: 480px){.install-banner{background:#ffffffce;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);height:3rem;width:100%}}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(0)}to{transform:translateY(-100%)}}