:root {    /* Fonts */    --font: sans-serif;    --font-display: serif;}*,*::before,*::after {    box-sizing: border-box;}html {    padding: 0;    margin: 0;}body {    position: relative;    margin: auto;    padding: 1em;    background-color: var(--bg);    max-width: 60%;    font-family: var(--font);    color: var(--text);}@media (max-width: 767px) {    body {        max-width: 100%;    }}@media (max-width: 480px) {}footer {    color: var(--text-subtle);    width: 100%;    text-align: center;}form {    & > * {        margin: 0;    }    &:focus-within {        *:invalid {            border-color: var(--error);        }        *:valid:not([type="submit"]) {            border-color: var(--success);        }    }}input,textarea,button,select {    border-left: 0;    border-right: 0;    border-top: 0;    border-bottom: 1px solid var(--border);    background-color: var(--surface);    color: var(--text);    padding: 12px;    border-radius: 0;    font: var(--font);    &:disabled {        background-color: var(--surface-sunken);        border-color: var(--border);        color: var(--text-muted);    }    &:focus,    &:active {        outline: none;    }}.form-error {    color: var(--error);}.auth-form {    display: flex;    flex-direction: column;    margin-top: 1em;    width: 100%;    gap: 1rem;    & > * {        width: 100%;    }    & > button:hover {        background-color: var(--surface-raised);        cursor: pointer;    }    & > .details-parent {        display: grid;        grid-template-columns: max-content 1fr;        gap: 1rem 0;        label {            padding: 0.4rem 1rem;            border-right: solid 1px var(--border);            font-size: 1.5rem;            color: var(--text-muted);            margin: 0;            background-color: var(--surface-sunken);            border-bottom: 1px solid var(--border);        }    }}.auth-page {    background-color: var(--bg);    width: 100%;    & h2 {        font-weight: 400;        font-family: var(--font);    }    & .alt-callout {        font-size: 1rem;        margin-top: 1.4rem;        & > a {            color: var(--text);            &:active {                color: var(--primary);            }        }    }}.subtle-link {    color: var(--text-subtle);    &:visited {        color: var(--text-muted);    }}