:root{--spacing--baseline: 8px;--color--yellow: #fcd720;--color--red: #e30922;--color--blue: #387bf9;--color--blue-2: #225dcb;--color--grey: #888888;--color--white: #ffffff;--color--wrapper: #242424;--color--bg: #1a1a1a;--color--correct: #28b862;--color--incorrect: #c8442d;--color--blue-alpha: #387bf9aa;--color--blue-alpha-2: #387bf930;--color--white-alpha: #ffffff30;--color--twitter: #1DA1F2;--wrapper--width: 646px;color:var(--color--white);background-color:var(--color--bg);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{box-sizing:border-box}body{margin:calc(var(--spacing--baseline) * 4) 0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:24px;font-weight:400}a{font-weight:500;color:var(--color--blue-2);text-decoration:inherit}a:hover,a:focus{color:var(--color--blue)}h1{font-size:clamp(2rem,3.8vw + 1.3rem,2.5rem);line-height:1.1;font-weight:600}.card{padding:2em}#app{max-width:var(--wrapper--width);margin:0 auto;text-align:center}button,.button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;color:var(--color--white);background-color:var(--color--bg);cursor:pointer;transition:border-color .25s,background-color 1s}button:hover,.button:hover{border-color:var(--color--yellow)}button:focus,button:focus-visible,.button:focus,.button:focus-visible{outline:4px auto -webkit-focus-ring-color}button:disabled{color:var(--color--white);pointer-events:none;border:1px solid transparent}button.selected{outline:4px auto var(--color--white)}button.primary{background-color:var(--color--blue-alpha)}button.primary:disabled{color:var(--color--white-alpha);background-color:var(--color--blue-alpha-2)}button.correct{background-color:var(--color--correct)}button.incorrect{background-color:var(--color--incorrect)}.logo{max-width:100%;margin-bottom:calc(var(--spacing--baseline) * 6)}.quiz{width:100%;margin-bottom:calc(var(--spacing--baseline) * 4);padding:calc(var(--spacing--baseline) * 2);background:var(--color--wrapper);text-align:left}.quiz ul{margin:0 0 calc(var(--spacing--baseline) * 4);padding:0}.quiz li{margin-bottom:var(--spacing--baseline);list-style:none}.quiz button{display:block;width:100%}.question-heading{margin:0 0 calc(var(--spacing--baseline) * 4)}.question-no{display:block;margin-bottom:calc(var(--spacing--baseline) * -2);color:var(--color--yellow)}.result{position:absolute;top:0;left:0;width:100%;padding:1rem 0;text-align:center;font-weight:600}.result.correct{background-color:var(--color--correct)}.result.incorrect{background-color:var(--color--incorrect)}.notes{color:var(--color--grey)}.gauge-container{display:inline-block;position:relative;margin:calc(var(--spacing--baseline) * -6) auto calc(var(--spacing--baseline) * 6)}.gauge-container .gauge{position:relative;display:block;width:200px}.gauge-container .gauge .rail{fill:transparent}.gauge-container .rail{stroke:#3e3e3e}.gauge-container .gauge circle{stroke-width:6}.gauge-container .gauge .progress{fill:transparent;stroke-linecap:round}.gauge-container .progress{stroke:var(--color--yellow);height:20px;margin-bottom:20px;overflow:hidden;background-color:var(--color--white);border-radius:4px}.gauge-container .center{display:inline-block;position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}.final-screen{display:flex;flex-direction:column;justify-content:center}.twitter-button{display:block;color:var(--color--white);background-color:var(--color--twitter);text-align:center}.twitter-button:hover,.twitter-button:focus{color:var(--color--white)}@media screen and (min-width: 480px){body{display:flex;align-items:center;min-height:100vh;margin:0}.quiz{padding:calc(var(--spacing--baseline) * 4);border-radius:8px}.question-heading{margin:0 0 calc(var(--spacing--baseline) * 8)}}
