@view-transition {
    navigation: auto;
}

/* Vars */
:root {
    --sans: ui-sans-serif, sans-serif;
    --serif: ui-serif, serif;
    --mono: ui-monospace, monospace;

    --light: 70%;
    --primary: light-dark(oklch(60% 0.225 256), oklch(70% 0.225 256));
}

/* Root */
:root {
    color-scheme: light dark;
    scroll-behavior: smooth;
    font-family: var(--sans);
}

body {
    width: 88dvw;
    max-width: 48rem;
    margin: auto;
    margin-bottom: 2rem;
}

p {
    line-height: 1.5;
    margin-block: 1lh;
}

/* Header */
header {
    display: flex;
    padding-block: 2dvh;
    justify-content: space-between;
    align-items: center;

    nav {
        display: flex;
        gap: 1rem;
    }

    a {
        color: currentColor;
        text-decoration: none;
        transition: opacity 0.25s;

        &:hover {
            opacity: var(--light);
        }
    }

    h1 {
        font-size: 1.25rem;
        margin: 0;
    }
}

h2 {
    margin-top: 2.5rem;
}

/* Title */
.title {
    h1 {
        font-size: 2.25rem;
        margin: 0;
    }

    p {
        font-size: 1.25rem;
        opacity: var(--light);
    }
}