:root{color-scheme:light dark;--font-family:'Open Sans',sans-serif;--text-color:#474747;--text-color-active:#0f874b;--text-color-inactive:#ec0000;--text-shadow:0 2px 5px rgba(0,0,0,0.25);--background-color:#fff}:root[data-theme='dark']{--text-color:#fff;--text-color-active:#14ba67;--text-color-inactive:#ec0000;--text-shadow:0 2px 5px rgba(255,255,255,0.5);--background-color:#000}@media (prefers-color-scheme:dark){:root:not([data-theme='light']){--text-color:#fff;--text-color-active:#14ba67;--text-color-inactive:#ec0000;--text-shadow:0 2px 5px rgba(255,255,255,0.5);--background-color:#000}}*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100vh;font-size:16px;background-color:var(--background-color);-webkit-font-smoothing:antialiased}nav{display:flex;column-gap:0.5em;justify-content:flex-end;align-items:center;position:fixed;width:100%;border-bottom:1px solid var(--text-color);padding:0.3em 0.5em;background-color:var(--background-color)}main{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}h1{margin:0;color:var(--text-color);font-family:var(--font-family);text-align:center}h2{margin:0;font-family:var(--font-family);font-size:4em;color:var(--text-color);text-shadow:var(--text-shadow)}.active{color:var(--text-color-active)}.inactive{color:var(--text-color-inactive)}a{display:inline-block;font-family:var(--font-family);color:var(--text-color);padding:0 0.5em}a:hover{text-decoration:none}button{color:var(--text-color);background-color:transparent;border:0px;cursor:pointer;appearance:none}svg{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill 200ms cubic-bezier(0.4,0,0.2,1) 0ms;font-size:1.5rem}