:root{--color-darkest: #343a40;--color-dark: #495057;--color-medium: #ced4da;--color-light: #f1f3f5;--color-theme: #1098ad;--color-accent: #ffa94d}*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{min-height:100vh;color:var(--color-light);background-color:var(--color-darkest);padding:3.2rem}.app{display:flex;flex-direction:column;align-items:center;justify-content:center}.main{width:50rem}.app-header{width:66rem;margin-bottom:4rem;display:flex;align-items:center;justify-content:space-between}.error{text-align:center;font-size:1.6rem;font-weight:500;padding:2rem;background-color:#495057;border-radius:100px}img{width:14rem}h1{font-family:Codystar,cursive,sans-serif;font-size:5.6rem}h2{font-size:3.6rem;margin-bottom:2rem}h3{font-size:2.4rem;font-weight:600;margin-bottom:4rem}h4{font-size:2.2rem;font-weight:600;margin-bottom:2.4rem}.start{display:flex;flex-direction:column;align-items:center}.progress{margin-bottom:4rem;display:grid;justify-content:space-between;gap:1.2rem;grid-template-columns:auto auto;font-size:1.8rem;color:var(--color-medium)}progress{-webkit-appearance:none;width:100%;height:12px;grid-column:1 / -1}::-webkit-progress-bar{background-color:var(--color-medium);border-radius:100px}::-webkit-progress-value{background-color:var(--color-theme);border-radius:100px}.btn{display:block;font-family:inherit;color:inherit;font-size:2rem;border:2px solid var(--color-dark);background-color:var(--color-dark);padding:1.2rem 2.4rem;cursor:pointer;border-radius:100px;transition:.3s}.btn:not([disabled]):hover{background-color:var(--color-darkest)}.btn-option:not([disabled]):hover{transform:translate(1.2rem)}.btn[disabled]:hover{cursor:not-allowed}.btn-ui{float:right}.options{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:3.2rem}.btn-option{width:100%;text-align:left}.btn-option.correct{background-color:var(--color-theme);border:2px solid var(--color-theme);color:var(--color-light)}.btn-option.wrong{background-color:var(--color-accent);border:2px solid var(--color-accent);color:var(--color-darkest)}.answer{transform:translate(2rem)}.result{background-color:var(--color-theme);color:var(--color-light);border-radius:100px;text-align:center;padding:2rem 0;font-size:2rem;font-weight:500;margin-bottom:1.6rem}.result span{font-size:2.2rem;margin-right:4px}.highscore{font-size:1.8rem;text-align:center;margin-bottom:4.8rem}.loader-container{display:flex;flex-direction:column;align-items:center;margin-top:4rem;gap:1.6rem;color:var(--color-medium);font-size:1.4rem}.timer{float:left;font-size:1.8rem;color:var(--color-medium);border:2px solid var(--color-dark);padding:1.35rem 2.8rem;border-radius:100px}.loader{width:50px;height:24px;background:radial-gradient(circle closest-side,currentColor 90%,#0000) 0% 50%,radial-gradient(circle closest-side,currentColor 90%,#0000) 50% 50%,radial-gradient(circle closest-side,currentColor 90%,#0000) 100% 50%;background-size:calc(100% / 3) 12px;background-repeat:no-repeat;animation:loader 1s infinite linear}@keyframes loader{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}.counter{display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:2rem;font-weight:700;margin:6rem}.counter *{font-size:inherit;padding:.8rem}.app-loader-fonts{height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;--bg-color: #111;background-color:var(--bg-color)}.card{--bg-color: #111;background-color:var(--bg-color);padding:1rem 2rem;border-radius:1.25rem}.loader_fonts{color:#7c7c7c;font-family:Poppins,sans-serif;font-weight:500;font-size:25px;-webkit-box-sizing:content-box;box-sizing:content-box;height:40px;padding:10px;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px}.words{overflow:hidden;position:relative}.words:after{content:"";position:absolute;inset:0;background:linear-gradient(var(--bg-color) 10%,transparent 30%,transparent 70%,var(--bg-color) 90%);z-index:20}.word{display:block;height:100%;padding-left:6px;color:#956afa;animation:spin_4991 4s infinite}@keyframes spin_4991{10%{-webkit-transform:translateY(-102%);transform:translateY(-102%)}25%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}35%{-webkit-transform:translateY(-202%);transform:translateY(-202%)}50%{-webkit-transform:translateY(-200%);transform:translateY(-200%)}60%{-webkit-transform:translateY(-302%);transform:translateY(-302%)}75%{-webkit-transform:translateY(-300%);transform:translateY(-300%)}85%{-webkit-transform:translateY(-402%);transform:translateY(-402%)}to{-webkit-transform:translateY(-400%);transform:translateY(-400%)}}.restore-progress{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.restore-progress-content{background-color:var(--color-dark);padding:3rem;border-radius:1.5rem;max-width:50rem;text-align:center;box-shadow:0 1rem 3rem #00000080;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}.restore-progress-content h3{color:var(--color-accent);margin-bottom:1.5rem;font-size:2.4rem}.restore-progress-content p{font-size:1.6rem;color:var(--color-medium);margin-bottom:2.5rem;line-height:1.6}.restore-progress-buttons{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}.restore-progress-buttons .btn{min-width:18rem}.restore-progress-buttons .btn-primary{background-color:var(--color-theme);border-color:var(--color-theme)}.restore-progress-buttons .btn-primary:hover{background-color:#0d7c8d;transform:translateY(-.2rem)}.restore-progress-buttons .btn-secondary{background-color:transparent;border-color:var(--color-medium);color:var(--color-medium)}.restore-progress-buttons .btn-secondary:hover{background-color:var(--color-medium);color:var(--color-darkest);transform:translateY(-.2rem)}