@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #fafafa;
    --fg: #1a1a1a;
    --muted: #666;
    --rule: #e2e2e2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161616;
        --fg: #e6e6e6;
        --muted: #888;
        --rule: #2a2a2a;
    }
}

* {
    box-sizing: border-box;
}

html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    max-width: 38em;
    margin: 5em auto 6em;
    padding: 0 1.5em;
    color: var(--fg);
    background: var(--bg);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
}

h1 {
    font-weight: 300;
    font-size: 2.4em;
    letter-spacing: -0.02em;
    margin: 0 0 0.4em;
}

h2 {
    font-weight: 500;
    font-size: 1.05em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 3em 0 1em;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--muted);
}

a:hover {
    text-decoration-color: var(--fg);
}

ul.projects {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.projects li {
    padding: 1em 0;
    border-top: 1px solid var(--rule);
}

ul.projects li:last-child {
    border-bottom: 1px solid var(--rule);
}

ul.projects .name {
    font-weight: 500;
}

ul.projects .desc {
    color: var(--muted);
}

ul.projects .links {
    margin-top: 0.3em;
    font-size: 0.92em;
    color: var(--muted);
}

ul.projects .links a + a {
    margin-left: 1em;
}

footer {
    margin-top: 4em;
    color: var(--muted);
    font-size: 0.92em;
}