:root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } a { font-weight: 500; color: #646cff; text-decoration: inherit; } a:hover { color: #535bf2; } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; } h1 { font-size: 3.2em; line-height: 1.1; } #app { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column-reverse; } .card { padding: 2em; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: #646cff; } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } } .fieldset-wrapper, form { display: flex; flex: 1; } form { flex-direction: column; } .fieldset-wrapper { border: 1px solid gainsboro; padding: 5px; border-radius: 4px; box-shadow: 1px 0px 6px 2px gainsboro; } fieldset { text-align: left; flex: 1; font-weight: bold; border: none; min-width: 200px; } label { font-weight: 300; } .timer { width: 24px; height: 24px; border-radius: 24px; padding: 8px; display: flex; justify-content: center; align-items: center; border: 1px solid; } .toast { background-color: lightseagreen; padding: 10px; position: relative; top: 10px; right: 10px; color: white; font-weight: bold; }