#root{width:100vw;height:100svh;display:flex;justify-content:center}.App{width:100%;max-width:616px;display:flex;flex-direction:column;gap:1rem;padding:1rem .5rem}.header{display:flex;justify-content:space-between;font-size:var(--title);gap:.5rem;position:relative}.header__title{font-size:inherit;display:flex;gap:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.header__title span{border-bottom:2px solid rgba(var(--shadow),.5)}.header__button{background-color:var(--bg-shade);border-radius:5000px;display:flex;justify-content:center;align-items:center;height:32px;width:32px;cursor:pointer}.icon{color:#ee0;stroke:var(--text);stroke-width:50px}.header__button:hover{filter:saturate(.6)}.stats{position:fixed;top:1rem;left:50%;transform:translate(-50%);height:calc(100% - 2rem);width:calc(100% - 1rem);max-width:616px;animation:fade-in .3s ease-out;background-color:var(--bg);box-shadow:0 0 32px rgba(var(--shadow),.1);display:flex;flex-direction:column;align-items:center;border-radius:5px;padding:.5rem}.stats__container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:2.5rem;font-size:var(--medium);font-weight:500}.stats__close{position:absolute;display:grid;place-items:center;right:.5rem;top:.5rem;height:30px;width:30px;cursor:pointer;font-size:var(--big);border-radius:50%;transition:background-color .2s ease-out}.stats__close:hover{background-color:var(--bg-shade)}.help{position:fixed;top:1rem;left:50%;transform:translate(-50%);height:calc(100% - 2rem);width:calc(100% - 1rem);max-width:616px;animation:fade-in .3s ease-out;background-color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;border-radius:5px;font-size:var(--medium);box-shadow:0 0 32px rgba(var(--shadow),.1);font-weight:500}.help__howTo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;height:100%;text-align:center}.help__close{position:absolute;display:grid;place-items:center;right:.5rem;top:.5rem;height:30px;width:30px;cursor:pointer;font-size:var(--big);border-radius:50%;transition:background-color .2s ease-out}.help__close:hover{background-color:var(--bg-shade)}.over{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2.5rem;padding-top:6rem}.over__winner{display:flex;transform:scale(1.3);gap:.3rem}.wonModal{background-color:var(--white);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:1.5rem 2rem;border-radius:5px;display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:max-content;font-size:var(--title);font-weight:500}.wonModal__word{font-size:var(--medium);display:flex;gap:.3rem}.start{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;max-width:500px;height:100%;gap:2.5rem}.start__text{display:grid;gap:2rem}.imageModal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:95%;max-width:516px}.imageModal__button{position:absolute;display:grid;place-content:center;top:.5rem;right:.5rem;background-color:var(--bg);border-radius:50%;height:25px;width:25px;cursor:pointer}.imageModal__img{max-height:400px;width:100%;object-fit:cover}@keyframes modal{0%{opacity:0}to{opacity:1}}.images{display:flex;flex-direction:column;gap:.5rem;align-items:center;width:100%}.images__container{width:100%;position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.images__img{border-radius:5px;object-fit:cover;object-position:center;width:100%;height:150px;box-shadow:0 2px 3px 0 rgba(var(--shadow),.2);transition:transform .2s ease-out;cursor:pointer;background-color:#bbb}@media (max-width: 440px){.images__img{height:100px}}.images__site{font-size:var(--small);display:flex;align-items:center;gap:.5rem;opacity:.6}.images__site--img{max-height:var(--small)}.input__container{display:flex;flex-direction:column;align-items:center;gap:1rem}.input{display:flex;gap:.5rem}.input__field{width:45px;height:45px;background-color:var(--white);border-color:var(--primary-dark);border-style:solid;border-width:1px 1px 4px 1px;display:flex;justify-content:center;align-items:center;font-size:var(--big);font-weight:700;text-transform:uppercase;border-radius:3px;transition:border-color .1s ease-out}.input__field.focus{border-color:var(--accent-blue)}.input.incorrect{animation:shake .3s}.input.incorrect .input__field{border-color:var(--warning)}@keyframes shake{0%{transform:translate(0)}33%{transform:translate(10px)}66%{transform:translate(-10px)}to{transform:translate(0)}}.input__value.hasValue{animation-name:text-animation;animation-duration:.15s;animation-timing-function:ease-out;line-height:0}@keyframes text-animation{0%{transform:scale(0);opacity:0}80%{transform:scale(1.05);opacity:1}to{transform:scale(1)}}@media (max-width: 440px){.input__field{width:30px;height:30px}}@media (max-width: 440px){.input{gap:.2rem}}.keyboard{display:flex;flex-direction:column;gap:.2rem;width:100%;height:100%}@media (max-width: 425px){.keyboard{justify-content:flex-end}}.keyboard__row{display:flex;gap:.2rem}.key{height:50px;padding:0 .4rem;border-radius:3px;background-color:#8c8c97;color:var(--white);font-weight:700;flex:1;cursor:pointer;line-height:0}.key--enter{border:none;background-color:var(--accent-green);padding:0 .8rem}.key--delete{border:none;padding:0 .8rem}.key:hover{filter:brightness(1.1)}@media (max-width: 440px){.key{height:40px}}*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #F7F7DC;--white: #fff;--primary-dark: #ADAD9A;--bg-shade: #e1e1bd;--accent-blue: #9496D1;--accent-green: #74B559;--text: #383832;--warning: #ff4848;--shadow: 0, 0, 0;--small: 16px;--title: 18px;--medium: 20px;--big: 22px;--header: 26px}body{height:100vh;width:100vw;background-color:var(--bg);font-family:Ubuntu,sans-serif;color:var(--text);overflow:hidden}a{text-decoration:none;color:inherit}button{border:none;background-color:unset;font-size:var(--small);color:var(--text);font-family:inherit;letter-spacing:1px}li{list-style:none}.title{font-size:var(--big);font-weight:500}.paragraph{font-size:var(--title);font-weight:400;line-height:1.4;opacity:.8;max-width:500px}.button{font-weight:500;color:var(--white);background-color:var(--accent-green);padding:.6rem 1.2rem;border-radius:3px;box-shadow:0 2px 3px rgba(var(--shadow),.1);cursor:pointer;transition:filter .2s ease-out}.button:hover{filter:brightness(1.1)}.modal__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;animation:modal .2s ease-out}.main{display:flex;flex-direction:column;align-items:center;gap:1rem;height:100%}.letter{transform:scale(0);opacity:0;line-height:0;transform-origin:center;border:2px solid var(--accent-blue);border-radius:3px;width:30px;height:30px;display:grid;place-items:center;animation:reveal-letter .3s ease-out forwards;font-weight:500}.letter-0{animation-delay:0s}.letter-1{animation-delay:.3s}.letter-2{animation-delay:.6s}.letter-3{animation-delay:.9s}.letter-4{animation-delay:1.2s}.letter-5{animation-delay:1.5s}.letter-6{animation-delay:1.8s}.letter-7{animation-delay:2.1s}@keyframes reveal-letter{0%{transform:scale(0);opacity:0}80%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}.list__container{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.list{width:100%;max-width:500px;max-height:500px;font-size:var(--small);border-radius:5px;overflow:hidden auto;display:grid;grid-template-columns:1fr 1fr;gap:0 2px}@keyframes fade-in{0%{opacity:0;transform:translate(-50%,10%)}to{opacity:1}}.list__item__word{display:flex;justify-content:center;width:100%;padding:.5rem 0;background-color:var(--bg-shade);border-bottom:2px solid var(--bg)}.full-width{grid-column:1/-1}.list__title{grid-column:1/3;display:flex;justify-content:center;color:var(--white);background-color:var(--primary-dark);border-bottom:none;font-weight:500;padding:.5rem 0}.iconLink:hover{color:var(--accent-blue)}.footer{bottom:0;padding:1rem 0;font-size:var(--small);font-weight:400;width:100%;max-width:500px;text-align:center;border-top:1px solid rgba(var(--shadow),.4);display:flex;flex-direction:column;align-items:center;gap:.7rem}.footer__link{color:var(--accent-blue);filter:brightness(.7);transition:filter .2s ease-out;cursor:pointer}.footer__link:hover{filter:brightness(1);text-decoration:underline}