@import"https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap";.navbar{width:100%;padding:1rem;margin-bottom:1.8rem;position:relative;background-color:var(--navbar);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.navbar-logo{display:flex;align-items:center;gap:.4rem;background-color:#0a0a0a;outline:2px solid black;padding:.25rem .5rem;border-radius:var(--radius)}.navbar-logo :is(span,svg){color:#9f9fdf}.navbar-logo svg{width:1.3rem}.navbar-logo span{font-size:1.5rem;font-weight:500}.leave{background-color:var(--destructive)}.leave:hover{background-color:var(--destructive-hover)}@media screen and (max-width: 550px){.navbar{padding:1rem}.navbar-logo{outline:1px solid black}.navbar-logo svg{width:1.1rem}.navbar-logo span{font-size:1.25rem}}.form{width:min(90%,24rem);display:grid;gap:1.5rem}.form-label{color:var(--foreground);display:block;font-weight:500;margin-bottom:.5rem}.form-control{color:var(--foreground);border:none;font-size:inherit;font-weight:500;padding:.5rem}.form-control:focus-visible{outline:2px solid var(--active)}.form-control::-webkit-scrollbar{width:.4rem;background-color:var(--secondary)}.form-control::-webkit-scrollbar-thumb{background-color:var(--foreground);border-radius:.2rem}.form-control::-webkit-scrollbar-track-piece:end{margin-bottom:1rem}.form-control::-webkit-scrollbar-track-piece:start{margin-top:1rem}.form-control[type=submit]{transition:.15s ease-in-out;background-color:var(--destructive)}input[type=submit]:hover{background-color:var(--destructive-hover);cursor:pointer}.option-group{display:flex;gap:1rem}:is(.form-control,.option-group button){background-color:var(--input);box-shadow:0 0 .5rem .1rem var(--input-outline);border-radius:var(--radius);width:100%;-webkit-user-select:none;user-select:none}.option-group button{padding:.5rem 1rem;background-repeat:no-repeat;background-size:100% 0;background-image:linear-gradient(to bottom,var(--active) 100%,transparent 0%);text-align:center;transition:.15s ease-in-out}@media screen and (max-width: 550px){.option-group button{padding:.5rem}}.option-group .active{animation:active .2s ease-in forwards}@keyframes active{to{background-size:100% 100%}}.option-group .inactive{background-size:100% 100%;animation:inactive .2s ease-out forwards}@keyframes inactive{to{background-size:100% 0%}}.option-group button:hover{background-color:var(--input-hover);cursor:pointer}:is(.question,.options){display:flex;flex-direction:column;align-items:center}.options{min-height:50vh;width:60%;gap:1rem;justify-content:space-evenly}.question-title{min-height:2.5lh;color:var(--question-foreground);background-color:var(--navbar);font-size:1.25rem;font-weight:500;display:flex;align-items:center;padding:1rem 2rem}.loader-bars{display:flex;height:50vh;width:60%;justify-content:center;align-items:center;gap:.5rem}.loader-bar{height:3rem;width:1rem;background-image:linear-gradient(to top,var(--foreground) 0%,var(--foreground) 100%);background-repeat:no-repeat;background-size:100% 0%;background-position:bottom;animation:loader-bar .8s ease-in-out infinite alternate}@keyframes loader-bar{to{background-size:100% 100%}}.option{opacity:0;padding:.8rem 1.6rem;width:100%;animation:option-show .2s linear forwards}.option:nth-child(2){animation-delay:.2s}.option:nth-child(3){animation-delay:.4s}.option:nth-child(4){animation-delay:.6s}.option:is(.incorrect,.correct){transition:.3s background-color ease-in-out;opacity:1}.option.correct{background-color:var(--correct);animation:correct .6s ease-in-out}.option.incorrect{background-color:var(--incorrect);animation:incorrect-shake .6s .6s ease-in-out}@keyframes option-show{0%{opacity:0;transform:rotateX(90deg)}to{opacity:1;transform:rotateX(0)}}@keyframes correct{50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes incorrect-shake{0%,to{transform:translate(0)}30%,50%,70%{transform:translate(-1rem)}20%,40%,60%,80%{transform:translate(1rem)}}@media screen and (max-width: 550px){.question-title{padding:1rem}.options{width:90%}}:is(.footer,.timer){display:flex;align-items:center;gap:1rem}.footer{padding:1rem 2rem;background-color:#000}.timer,.question-display{font-weight:500;background-color:var(--navbar);font-size:1.1rem;border-radius:var(--radius);color:var(--foreground)}.question-display{padding:.5rem .75rem}.timer{width:8ch;padding:.5rem .5rem .5rem .75rem}.timer.quiz-end{width:-moz-fit-content;width:fit-content;color:#f66}.timer.quiz-submit{color:#59bc52}.progress-bar{background-color:var(--secondary);border-radius:6rem;height:1.2rem;overflow:hidden;flex:1}.bar{background-color:var(--picked);height:100%;transition:.18s width ease-in-out;width:0}@media screen and (max-width: 550px){.footer{padding:1rem}.timer{width:7ch}.timer svg{width:1.1rem;height:1.1rem}}.modal{width:min(90%,25rem);margin:auto;padding:1.25rem;background-color:var(--secondary);color:var(--foreground);border:none;border-radius:var(--radius);box-shadow:0 0 0 var(--outline),0 0 0 100vw #0009}.modal p{margin-bottom:1.5rem}.modal-title{margin-bottom:.5rem}.modal[open]{animation:modal-in .15s ease-in-out}.modal[closing]{animation:modal-out .15s ease-in-out}.modal-footer{display:flex;justify-content:flex-end;gap:1rem}.cancel{background-color:var(--destructive)}.cancel:hover{background-color:var(--destructive-hover)}@keyframes modal-in{0%{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}@keyframes modal-out{0%{opacity:1}to{transform:scale(.75);opacity:0}}@media screen and (max-width: 550px){.modal{padding:1rem}}.quiz{width:min(90%,50rem);overflow:clip;padding:0!important;animation:slide-left .4s ease-in-out forwards;opacity:0}@keyframes slide-left{0%{transform:translate(-100%) skewY(-4deg)}to{transform:translateY(0) skewY(0);opacity:1}}.results{display:flex;flex-direction:column;gap:1rem;width:min(90%,50rem);animation:slide-up .4s ease-in-out forwards}@keyframes slide-up{0%{transform:translateY(4rem)}to{transform:translateY(0);opacity:1}}.results-anchor{color:var(--foreground);text-decoration:none;display:flex;background-color:#000c;padding:.6rem;border-radius:var(--radius);transition:.15s ease-in-out;position:fixed;bottom:1rem;right:1rem}.results-anchor:hover{background-color:#0d0d0dcc;cursor:pointer}.results-anchor.hidden{opacity:0}.flawless{color:#62d926}.excellent{color:#52e099}.fail{color:#d96226}.question-stats{display:flex;align-items:center;gap:1rem}.question-stats svg{width:1.5rem;display:block}.question-stats p{padding:.4rem .8rem;background-color:var(--picked);border-radius:var(--radius);font-weight:500;display:flex;align-items:center;gap:.5rem}.question-stats p:first-child{background-color:var(--correct)}.question-stats p:nth-child(2){background-color:var(--incorrect)}table{border-collapse:collapse;border-radius:var(--radius);border-style:hidden;overflow:clip;box-shadow:0 0 1px 1px var(--border)}th,td{font-weight:400;border:1px solid var(--border);padding:.5rem 1rem;text-align:left;vertical-align:text-top}th{color:var(--foreground);font-weight:500}tr:nth-child(2n){background-color:var(--background)}tr:last-child{background-color:var(--table)}@media screen and (max-width: 550px){.question-stats p{padding:.3rem .6rem}.question-stats svg{width:1.5rem}}@media screen and (max-width: 668px){:is(table,thead,tbody,th,td,tr){display:block}thead tr{position:absolute;visibility:hidden}tr td:first-child{background-color:var(--table)}td{border:none;border-bottom:1px solid var(--border);position:relative;padding-left:50%}td:before{position:absolute;top:10px;left:10px;white-space:nowrap}td:first-child:before{content:"No."}td:nth-of-type(2):before{content:"Question"}td:nth-of-type(3):before{content:"Your Answer"}td:nth-of-type(4):before{content:"Correct Answer"}td:nth-of-type(5):before{content:"Points"}tr:last-child td:first-child{display:none}tr:last-child td:last-child{border-bottom:0}tr:last-child td:last-child:before{content:"Total Score"}}.page-container{margin-bottom:2rem;display:grid;place-items:center;width:100%;flex:1}.page{padding:1.25rem;border-radius:var(--radius);background-color:var(--secondary);box-shadow:0 .3rem .5rem .2rem var(--outline);color:var(--foreground)}.error-page{display:grid;width:min(90%,25rem)}.error-page h1{margin-bottom:.5rem}*,*:after,*:before{box-sizing:border-box;padding:0;margin:0;font-family:Rubik,sans-serif}:root{font-size:16px;font-weight:400;line-height:1.5;color-scheme:dark light;--background: hsl(240, 19%, 15%);--secondary: hsl(240, 20%, 18%);--navbar: hsl(240, 20%, 8%);--table: hsl(240, 20%, 12%);--button: hsl(240, 50%, 35%);--button-hover: hsl(240, 50%, 40%);--input: hsl(240, 20%, 30%);--input-hover: hsl(240, 20%, 35%);--destructive: hsl(10, 40%, 35%);--destructive-hover: hsl(10, 40%, 40%);--active: hsl(240, 40%, 35%);--picked: hsl(240, 50%, 50%);--correct: hsl(100, 50%, 30%);--incorrect: hsl(0, 50%, 30%);--foreground: hsl(240, 15%, 87.5%);--question-foreground: hsl(100, 50%, 50%);--border: hsl(240, 7%, 35%);--outline: hsl(240, 5%, 10%);--input-outline: hsl(240, 5%, 15%);--radius: .5rem}body{background-color:var(--background);background-image:url(/stacked-waves-haikei.svg);background-size:cover;background-attachment:fixed}#root{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}h1{font-size:1.5rem;font-weight:600}button{background-color:var(--button);border-radius:var(--radius);border:none;color:var(--foreground);padding:.5rem 1rem;font-size:1.1rem;font-weight:500;display:inline-flex;align-items:center;justify-content:center;transition:.15s ease-in-out;-webkit-user-select:none;user-select:none}button:hover{background-color:var(--button-hover);cursor:pointer}button:focus-visible{outline:none}