:root {

    color-scheme: dark;

    --background: #0d1117;
    --text: #e6edf3;
    --muted: #8b949e;
    --gold: #e3b341;

}

* {

    box-sizing: border-box;

}

html,
body {

    margin: 0;
    min-height: 100%;

}

body {

    display: flex;

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

    padding: 48px;

    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        sans-serif;

}

.landing {

    width: min(820px,100%);

}

.hero {

    margin-bottom: 80px;

}

h1 {

    margin: 0;

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

    letter-spacing: -0.05em;

}

.description {

    margin-top: 40px;

    max-width: 620px;

    color: var(--text);

    font-size: 1.35rem;

    line-height: 1.8;

}

footer {

    padding-top: 28px;

    border-top: 1px solid #30363d;

    color: var(--muted);

    font-size: .95rem;

}

footer a {

    color: var(--gold);

    text-decoration: none;

}

footer a:hover {

    text-decoration: underline;

}

@media (max-width:700px) {

    body {

        padding: 24px;

    }

    .hero {

        margin-bottom: 60px;

    }

    .description {

        font-size: 1.15rem;

    }

}