@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--body-bg-color: #2c2c2c;--color: #e8e8e8;--primary-color: #1e1e1e;--btn-bg-color: #588b8b;--btn-bg-hover: #295757;--btn-opt-bg: #4681f4;--btn-opt-bg-hover: #46c0f4}.dark{--body-bg-color: #ededed;--color: #1d1d1d;--primary-color: #f5fbef;--btn-bg-color: #588b8b;--btn-bg-hover: #295757;--btn-opt-bg: #c2c8cf;--btn-opt-bg-hover: #93c2c4}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,serif;background-color:var(--body-bg-color);color:var(--color);transition:.5s ease-in-out}.app{max-width:40vw;margin:0 auto}.btn{background-color:var(--btn-bg-color);border:none;color:#fff;margin:1rem;padding:1rem;border-radius:.5rem;font-size:1rem;cursor:pointer;transition:.3s}.btn:hover{background-color:var(--btn-bg-hover)}.btn[disabled]:hover{cursor:not-allowed}.btn:disabled{background-color:#1b3d39}.footer{display:flex;align-items:center;width:100%;justify-content:space-between}@media (max-width: 1100px){.app{max-width:65vw}}@media (max-width: 690px){.app{max-width:90vw}}@media (max-width: 450px){.footer{justify-content:space-around}.app{max-width:100vw}}.header{display:flex;padding:1rem;margin:1rem;align-items:center;justify-content:center;gap:1rem}.header img{width:60px}.header h1{font-size:50px}@media (max-width: 500px){.header h1{font-size:30px}.header img{width:50px}.header{padding:.8rem;margin:.8rem;gap:.5rem}}@media (max-width: 300px){.header h1{font-size:25px}.header img{width:45px}.header{padding:.4rem;margin:.4rem;gap:.3rem}}.main{flex-shrink:1;background-color:var(--primary-color);display:flex;border-radius:10px;padding:10px;flex-direction:column;align-items:center;position:relative}.progress{display:grid;grid-template-columns:auto auto;justify-content:space-between;width:400px;gap:8px;margin-top:8px}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:16px;grid-column:1 / -1}::-webkit-progress-bar{border-radius:100px}::-webkit-progress-value{border-radius:100px}@media (max-width: 450px){.progress{width:300px;gap:8px;margin-top:8px;margin-bottom:8px}}.start-screen{margin:1rem;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.start-screen h2,.start-screen h3{text-align:center;margin-bottom:1rem}.start-screen p{text-align:left;font-size:20px;font-weight:500}.start-screen ol li{line-height:1.5;padding:5px}.options{display:flex;flex-direction:column;width:300px}.btn.opt{margin:4px;background-color:var(--btn-opt-bg);color:var(--color);border:1px solid rgb(62,26,78);border-radius:60px}.btn.opt:hover{background-color:var(--btn-opt-bg-hover);transform:translate(.8rem)}.answer{background-color:#ed0800!important;transform:translate(.8rem)}.opt.correct{background-color:#18b218!important}.opt.wrong{background-color:#9e9e9e}.int-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}.int-container label{color:var(--color)}.int-container input{width:320px;height:60px;padding:1em;margin-top:1rem;border:2px solid rgb(17,118,78);border-radius:10px;background-color:var(--body-bg-color);color:var(--color)}.int-container input:disabled{cursor:not-allowed}.int-container .error-message{color:#cc2823}.int-container .btn.submit{background-color:#356c05}.question{display:flex;flex-direction:column;align-items:center;gap:1rem;flex-basis:358px;flex-grow:0;flex-shrink:0;justify-content:space-evenly}.question div{margin:10px;max-width:100%}.question div h2{text-align:center}.timer{background-color:var(--btn-bg-color);padding:1rem;border-radius:1rem;color:#ededed}.history{overflow:auto;height:80px;background-color:var(--body-bg-color);display:flex;flex-direction:column;align-items:center;border-radius:1rem;border:1px solid rgb(17,118,78);padding:1rem;-ms-overflow-style:none}.history ul{display:flex;flex-direction:column;align-items:center;gap:.5rem}.history ul li{list-style:none;display:flex;gap:3rem;justify-content:center;align-items:center}.btn.clear{background-color:#cc2823;margin:1rem;padding:.8rem;border-radius:.5rem;font-size:.9rem}.btn.clear:hover{background-color:#b4120c}.history::-webkit-scrollbar{display:none}@media (max-width: 450px){.history{justify-content:center}}.result{background-color:var(--body-bg-color);padding:2rem;margin:1rem;border-radius:20px}.dark-mode-button{display:flex;cursor:pointer;position:absolute;right:2%}.dark-mode-button img{filter:brightness(.9)!important;width:30px}