@import url(https://fonts.googleapis.com/css2?family=Audiowide&display=swap);:root{--color-darkest:#343a40;--color-dark:#495057;--color-medium:#ced4da;--color-light:#f1f3f5;--color-theme:#1098ad;--color-accent:#ffa94d}*{box-sizing:border-box;margin:0;padding:0}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{background-color:#343a40;background-color:var(--color-darkest);color:#f1f3f5;color:var(--color-light)}.container{margin-left:auto;margin-right:auto;padding:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.app{flex-direction:column;min-height:100vh}.app,.app-header{align-items:center;display:flex;justify-content:center}.app-header{gap:5px;margin-bottom:1rem;width:100%}.app-header h1{font-family:Audiowide,sans-serif;font-size:3rem}@media (max-width:500px){.app-header h1{font-size:1.3rem}}.app-header img{height:200px;width:200px}@media (max-width:500px){.app-header img{height:50px;width:50px}}.start{align-items:center;display:flex;flex-direction:column;text-align:center}.start h2{color:#ffa94d;color:var(--color-accent);font-size:2.5rem;margin-bottom:1rem}@media (max-width:500px){.start h2{font-size:1rem}}.start h3{font-size:2rem;font-weight:600;margin-bottom:2rem}@media (max-width:500px){.start h3{font-size:.8rem}}.progress{color:#ced4da;color:var(--color-medium);font-size:1.5rem;margin:0 auto 2rem;width:100%}@media (min-width:768px){.progress{max-width:600px}}@media (max-width:500px){.progress{font-size:1rem}}progress{-webkit-appearance:none;grid-column:1/-1;height:12px;width:100%}::-webkit-progress-bar{background-color:#ced4da;background-color:var(--color-medium);border-radius:100px}::-webkit-progress-value{background-color:#1098ad;background-color:var(--color-theme);border-radius:100px}.progress .questions{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:15px;padding:0 10px;width:100%}.btn{background-color:#495057;background-color:var(--color-dark);border:2px solid #495057;border:2px solid var(--color-dark);border-radius:100px;color:inherit;cursor:pointer;display:block;font-size:1.5rem;padding:15px 25px;transition:all .3s}@media (max-width:500px){.btn{font-size:.8rem;padding:10px 20px}}.btn:not([disabled]):hover{background-color:#343a40;background-color:var(--color-darkest)}.btn-option:not([disabled]):hover{-webkit-transform:translateX(.5rem);transform:translateX(.5rem)}.btn[disabled]:hover{cursor:not-allowed}h4{font-size:1.5rem;font-weight:600;margin-bottom:.8rem;text-align:center}@media (max-width:500px){h4{font-size:.8rem;margin-bottom:.5rem}}.options{align-items:center;display:flex;flex-direction:column;gap:10px;justify-content:center;margin-bottom:1rem}.btn-option{text-align:left;width:100%}@media (min-width:768px){.btn-option{max-width:500px}}.btn-option.correct{background-color:#1098ad;background-color:var(--color-theme);border:2px solid #1098ad;border:2px solid var(--color-theme);color:#f1f3f5;color:var(--color-light)}.btn-option.wrong{background-color:#ffa94d;background-color:var(--color-accent);border:2px solid #ffa94d;border:2px solid var(--color-accent);color:#343a40;color:var(--color-darkest)}.answer{-webkit-transform:translateX(.5rem);transform:translateX(.5rem)}footer{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.timer{border:2px solid #495057;border:2px solid var(--color-dark);border-radius:100px;color:#ced4da;color:var(--color-medium);font-size:1.5rem;padding:15px 25px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:500px){.timer{font-size:.8rem;padding:10px 20px}}.result{align-items:center;background-color:#1098ad;background-color:var(--color-theme);border-radius:100px;color:#f1f3f5;color:var(--color-light);display:flex;font-size:2rem;font-weight:500;gap:5px;justify-content:center;margin-bottom:1.6rem;padding:15px 25px;text-align:center}@media (max-width:500px){.result{font-size:.8rem;padding:10px 20px}}.result span{font-size:2.5rem}@media (max-width:500px){.result span{font-size:1rem}}.highScore{font-size:2rem;margin-bottom:3rem;text-align:center}@media (max-width:500px){.highScore{font-size:1rem}}
/*# sourceMappingURL=main.596283a1.css.map*/