/* ===========================
   Reset
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ===========================
   Theme
=========================== */

:root{

    --bg:#fafafa;

    --text:#181818;

    --subtitle:#666;

    --muted:#9a9a9a;

    --button-bg:#111;

    --button-text:#fff;

}

html.dark{

    --bg:#111;

    --text:#f5f5f5;

    --subtitle:#bdbdbd;

    --muted:#7f7f7f;

    --button-bg:#fff;

    --button-text:#111;

}

html{
    scroll-behavior:smooth;
}

body{

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--bg);

    color:var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    transition:
        background .25s ease,
        color .25s ease;

}

/* ===========================
   Layout
=========================== */

.container{

    width:100%;

    max-width:960px;

    margin:auto;

    padding:48px 24px;

}

/* ===========================
   Hero
=========================== */

.hero{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:1rem;

}

.hero h1{

    font-size:clamp(3rem,7vw,5rem);

    font-weight:700;

    letter-spacing:.05em;

    text-transform:lowercase;

}

.subtitle{

    color:var(--subtitle);

    font-size:1rem;

}

.motto{

    margin-top:1rem;

    color:var(--muted);

    font-size:.9rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/* ===========================
   Actions
=========================== */

.actions{

    position:fixed;

    top:24px;

    left:24px;

}

.action-button{

    height:36px;

    padding:0 16px;

    border:none;

    background:var(--button-bg);

    color:var(--button-text);

    font-size:.8rem;

    cursor:pointer;

    transition:
        transform .15s ease,
        background .2s ease,
        color .2s ease;

}

.action-button:hover{

    transform:translateY(-1px);

}

.action-button:active{

    transform:translateY(0);

}