*,*:before,*:after{box-sizing:border-box}:root{--text-color: #FAFAFA;--background-color: #171717;--blue-950: #162456;--blue-800: #193CB8;--blue-600: #155DFC;--blue-500: #2B7FFF;--blue-400: #50A2FF;--red-900: #82181A;--red-800: #9F0712;--red-700: #C10007;--red-500: #FB2C36;--neutral-900: #171717;--neutral-700: #404040;--neutral-600: #525252;--neutral-500: #737373;--neutral-300: #D4D4D4;--neutral-50: #FAFAFA;--yellow-400: #FDC700;--green-500: #00C950;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}body{margin:0;width:100%;min-height:100vh;font-family:Inter,sans-serif;color:var(--text-color);background-color:var(--background-color);padding-top:16;display:flex}#root{width:100%;min-height:100%}@media (min-width: 48rem){body{padding-top:28px}}@media (min-width: 64rem){body{padding-top:40px}}@media (min-width: 80rem){body{padding-top:56px}}h1,h2,h3,h4{font-family:Karla,sans-serif;font-weight:700;margin:0;transition:font-size .3s}p,.xs,.sm,.lg,.xl{margin:0;transition:font-size .3s}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:.875rem}h4{font-size:.75rem}p{font-size:.875rem}.xs,.sm{font-size:.75rem}.lg{font-size:1rem}.xl{font-size:1.125rem}.base{font-size:.875rem}.rounded{border-radius:4px}.bold{font-weight:700}.up{display:flex;flex-direction:column;justify-content:flex-start;align-items:start}main{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:16px;height:100%;padding:0 12px}footer{display:flex;justify-content:space-between;padding:20px}footer a{color:var(--blue-500)}footer a:hover{color:var(--blue-600)}button{margin-top:20px;padding:6px 10px;font-size:.875rem;font-family:Inter,sans-serif;color:var(--text-color);border:1px solid transparent;cursor:pointer;transition:background-color .3s,border-color .3s}.btn-primary{background-color:var(--blue-500)}.btn-primary:hover,.btn-primary:focus{background-color:var(--blue-600)}.btn-primary:active{background-color:var(--blue-800)}.btn-secondary{background:none;border-color:var(--neutral-500)}.btn-secondary:hover,.btn-secondary:focus{border-color:var(--neutral-600)}.btn-secondary:active{border-color:var(--neutral-700);color:var(--neutral-300)}.btn-danger{background-color:var(--red-500);color:var(--neutral-100)}.btn-danger:hover,.btn-danger:focus{background-color:var(--red-700)}.btn-danger:active{background-color:var(--red-800)}.btn-primary:disabled{color:var(--neutral-500);background-color:var(--blue-950);cursor:not-allowed}.btn-secondary:disabled{color:var(--neutral-700);border-color:var(--neutral-700);cursor:not-allowed}.btn-danger:disabled{color:var(--neutral-500);background-color:var(--red-900);cursor:not-allowed}.tag{padding:6px 10px;background-color:var(--blue-500)}.tag-medium{background-color:var(--yellow-400)}.tag-hard{background-color:var(--red-500)}.tag-easy{background-color:var(--green-500)}.answer{padding:12px 20px;border:1px solid var(--neutral-700);text-align:left;transition:all .3s;background:none}.answer span{color:var(--blue-400)}.answer:hover{color:var(--neutral-50);background-color:var(--blue-400)}.answer:hover span{color:var(--neutral-50)}.answeractive,.answer:active{background-color:var(--blue-600);color:var(--neutral-50)}form{width:100%;max-width:400px;display:flex;gap:14px;flex-direction:column;align-items:flex-start;padding:20px;border:1px solid var(--neutral-700)}form button{margin:auto}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--neutral-900);color:var(--neutral-50);border:1px solid var(--neutral-700);padding:8px 16px;cursor:pointer;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23404040' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 1rem center;background-repeat:no-repeat;background-size:1.2em 1.2em}.select-easy{color:var(--green-500)}.select-medium{color:var(--yellow-400)}.select-hard{color:var(--red-500)}select:focus{outline:none;border-color:var(--neutral-500)}#difficulty option[value=random]{color:var(--neutral-50)}#difficulty option[value=easy]{color:var(--yellow-400)}#difficulty option[value=medium]{color:var(--green-500)}#difficulty option[value=hard]{color:var(--red-500)}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;background-color:transparent;color:var(--neutral-50);border:none;border-bottom:1px solid var(--neutral-700);text-align:center;padding:8px 16px}input[type=number]:focus{outline:none;border-color:var(--neutral-500)}.question-header{width:100%;display:flex;justify-content:space-between;align-items:center}.question-container{width:100%;display:flex;flex-direction:column;gap:10px}.question-container div{display:flex;gap:10px}.question-container h1{text-align:left}.question-answers{width:100%;display:flex;flex-direction:column;gap:12px}.question-buttons{width:100%;display:flex;justify-content:space-between;align-items:center}.question-buttons div{display:flex;gap:8px}.question-section{display:flex;flex-direction:column;gap:12px}#rectangule{-webkit-appearance:none;appearance:none;width:100%;height:10px;overflow:hidden}progress::-webkit-progress-bar{background-color:var(--neutral-700)}progress::-webkit-progress-value{background-color:var(--blue-400);transition:width .4s ease}.stats{display:flex;flex-direction:column;align-items:start;text-align:left;gap:28px;width:100%}.stats div{flex-direction:column;border-bottom:1px dashed var(--neutral-700)}@media (min-width: 48rem){.rounded{border-radius:6px}.question-answers{gap:20px}main{padding:0 56px;gap:24px}.stats div{display:flex;flex-direction:row;justify-content:space-between;width:100%}}@media (min-width: 64rem){h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}p{font-size:1.125rem}.sm{font-size:.875rem}.lg{font-size:1.25rem}.xl{font-size:1.5rem}.rounded{border-radius:8px}.base{font-size:1.125rem}.question-answers{gap:28px}main{padding:0 40px;gap:28px}}@media (min-width: 80rem){h1{font-size:3.75rem}h2{font-size:2.25rem}h3{font-size:1.875rem}h4{font-size:1rem}p{font-size:1.5rem}.xs{font-size:.875rem}.sm{font-size:1.25rem}.lg{font-size:1.875rem}.xl{font-size:2.25rem}.base{font-size:1.5rem}form{max-width:600px}.question-answers{gap:32px}main{padding:0 56px}}
