:root {
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.75rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;


    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;


    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;


    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --radius-xs-mobile: 3px;
    --radius-sm-mobile: 6px;
    --radius-md-mobile: 12px;
    --radius-lg-mobile: 16px;
    --radius-xl-mobile: 20px;
    --radius-full-mobile: 9999px;


    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-3: 0 10px 15px rgba(0, 0, 0, 0.12);
    --shadow-4: 0 20px 25px rgba(0, 0, 0, 0.15);


    --blur-xs: 2px;
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 12px;
    --blur-xl: 16px;
    --blur-2xl: 24px;
    --blur-3xl: 32px;


    --duration-instant: 100ms;
    --duration-quick: 150ms;
    --duration-standard: 300ms;
    --duration-slow: 500ms;

    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);


    --base-size: 1920px;
}

:root[data-theme='light'] {
    --text: hsl(240, 14%, 3%);
    --text-secondary: hsl(240, 10%, 28%);
    --text-muted: hsl(240, 8%, 48%);

    --background: hsl(60, 14%, 97%);
    --surface-1: hsl(240, 16%, 94%);
    --surface-2: hsl(240, 14%, 90%);
    --surface-3: hsl(240, 12%, 86%);

    --primary: hsl(250, 95%, 66%);
    --primary-border: hsl(250, 95%, 74%);

    --border-subtle: hsl(240, 10%, 88%);
    --border-default: hsl(240, 10%, 80%);
    --border-strong: hsl(240, 12%, 68%);
}


@font-face {
    font-family: "Roboto Serif";
    src: url("/static/fonts/RobotoSerif-VariableFont_GRAD\,opsz\,wdth\,wght.ttf") format("truetype");
    font-style: normal;
}
@font-face {
    font-family: "Roboto Serif";
    src: url("/static/fonts/RobotoSerif-Italic-VariableFont_GRAD\,opsz\,wdth\,wght.ttf") format("truetype");
    font-style: italic;
}


html, body {
    margin: 0;
    width: 100dvw;
    min-height: 100dvh;
    color: var(--text);
    font-family: "Roboto Serif", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-variant: no-contextual;
    background-color: var(--background);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    scroll-behavior: smooth;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
}

main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% - (var(--space-4) * 2));
    max-width: calc(var(--base-size) / 1.33);
    flex: 1 0 auto;
    min-height: 0;
}

.round-spacer {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--text);
    opacity: 66%;
}

a {
    text-decoration: underline;
    text-decoration-style: dashed;
    color: var(--primary);
    transition: color var(--duration-instant) var(--ease-in-out);
}
a:hover, a:visited:hover {
    color: var(--primary-border);
}
a:visited {
    color: var(--text-muted);
}


b {
    font-weight: var(--font-weight-semibold);
}


/*
*
*
* Header / Footer
*
*
*/
.header {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - (var(--space-4) * 2));
    max-width: calc(var(--base-size) / 1.33);
    padding: var(--space-4);
    gap: var(--space-2);
}


.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--space-4) 0;
}