:root
{
    /* Colors */
    --offwhite: #e5e5e5;
    --offblack: rgb(10, 10, 10);

    /* Color - Theme */
    --fg-color: var(--offwhite);
    --bg-color: var(--offblack);

    /* Typefaces */
    --font-archivo: "Archivo", "Arial", sans-serif;
    --font-serif: "Crimson Text", "Times New Roman", serif;
    --font-sans: "InterTight", sans-serif;
    --font-monospace: "Jetbrains Mono", "Courier", Courier, monospace;
}

*
{
    margin:0;
    padding:0;
}
html
{
    scroll-behavior: smooth;
    overscroll-behavior: none;
}
body
{
    background-color: var(--bg-color);
    color:var(--fg-color);

    overscroll-behavior: none;
}

/* Classes */
.monospace
{
    font-family:var(--font-monospace);
}

/* Headers */
h1,h2,h3,h4
{
    font-family: var(--font-archivo);
}

h1
{
    font-size: 48px;
    font-weight:800;
}
h2
{
    font-size:24px;
    font-weight:800;
}

/* Paragraphs */
p
{
    font-family:var(--font-crimson);
}

h1.lead
{
    margin-bottom:calc(150px - 2rem);
}

/* Row Menus */
.row .menu a
{
    font-family:var(--font-sans);
    font-weight:400;
}

/* Main */
.main .section
{
}

.main .section.hero
{
    /*
    min-height:60dvh;
    
    padding-block-start: clamp(2rem, 7vw, 3rem);
    padding-block-end: clamp(2rem, 7vw, 3rem);
    */

    margin-bottom:150px;
}
.section.hero p
{
    font-size:16px;
    max-width:80ch;
}

.section.hero .content h1
{
    padding-block-start:0.1em;
    padding-block-end: 0.1em;
}

/* Footer */
.footer
{
    font-family:var(--font-sans);
    font-size:16px;

    background-color:var(--bg-color);
}
.footer .content
{
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding-top:1.2rem;
}
.footer .legal
{
    font-size:14px;
}
.footer .copyright
{
    font-size:14px;
}
.footer .row span a + a
{
    margin-left:1ch;
}

/* Sandbox */
.sandbox
{
    border:1px solid rgba(255, 255, 255, 0.35);
    box-sizing: border-box;

    aspect-ratio: 16/9;
}

h1 + .sandbox
{
    margin-top:1.5rem;
}