@font-face {
    font-family: Inter;
    src: url(/fonts/Inter-Variable.ttf);
    src: url(/fonts/InterVariable.woff2);
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

* {
    margin: initial;
    padding: initial;
    box-sizing: border-box;
    transition: all 100ms;
    text-justify: unset;
    overflow-wrap: anywhere;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

:root {
    --bg: #212529;
    --altbg: #1d1f20;
    --acc: #343a40;
    --text: #f1f3f5;
    --sec: #ced4da;
    --link: #30b8e6;
    --link-hover: #4dc4eb;
}

@media screen and (prefers-color-scheme: light) {
    :root {
        --bg: #ffffff;
        --altbg: #f8f9fa;
        --acc: #e9ecef;
        --text: #212529;
        --sec: #495057;
        --link: #6a6d73;
        --link-hover: #83868b;
    }
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--altbg);
    color: var(--text);
    width: 100%;
    height: 100%;
    font-size: 1.125rem;
    padding: 25px;
}

main {
    margin-top: 25px;
}

main > * {
    margin-block: 6px;
}

.error {
    background-color: color-mix(in srgb, var(--acc) 60%, light-dark(#faa, #f00) 40%);
    width: fit-content;
    padding: 6px;
    border-radius: 6px;
}

.success {
    background-color: color-mix(in srgb, var(--acc) 60%, light-dark(#0f0, #0a0) 40%);
    width: fit-content;
    padding: 6px;
    border-radius: 6px;
}

input,
button,
select,
textarea {
    background: var(--acc);
    color: var(--text);
    font-family: var(--font);
    font-size: 1.125rem;
    border: none;
    padding: 6px;
    border-radius: 6px;
}

a,
.a {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:active,
.a:hover,
.a:active,
body:has(#nav-visible:checked) .a {
    color: var(--link-hover);
    text-decoration: underline;
}

h2.sec {
    margin-top: 24px;
}