:root {
    --light: rgba(255, 255, 255, 0.87);
    --dark: #242424;
    --background: var(--light);
    --foreground: var(--dark);
    --link: blue;
    --padding: 10pt;
}
@media (prefers-color-scheme: dark) {
    :root {
        --background: var(--dark);
        --foreground: var(--light);
        --link: hsla(240deg, 50%, 60%, 1);
    }
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 2rem;
    padding-bottom: 25vh;
}

main {
    width: auto;
    max-width: 333pt;
    margin: 0 auto;
}

h1 {
    font-weight: 100;
    font-size: calc(var(--padding) * 4);
    margin: calc(var(--padding) * 3) calc(var(--padding) * 1.5);
    line-height: calc(var(--padding) * 6);
}

h2 {
    font-weight: 100;
    font-size: calc(var(--padding) * 2);
    margin: calc(var(--padding) * 3) calc(var(--padding) * 1.5) calc(var(--padding) * 1);
    line-height: calc(var(--padding) * 3);
}

.card {
    border-radius: var(--padding);
    padding: 0 calc(var(--padding) * 1.5);
    box-shadow: 0 calc(var(--padding) / 2) var(--padding) var(--padding) rgba(0, 0, 0, 0.1), 0 calc(var(--padding) / 2 * -1) var(--padding) 0 rgba(255, 255, 255, 0.1);
    margin-top: calc(var(--padding) * 2);
    background: linear-gradient(
            rgba(0,0,0,0.01),
            transparent var(--padding),
            transparent calc(100% - var(--padding)),
            rgba(255,255,255,0.01)
    );
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--link);
}