:root {
    color-scheme: dark;
    --background: #131b24;
    --foreground: #e4eaf0;
    --accent: #9bbbd4;
    --font: "Pixelify Sans", monospace;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-wrap: break-word;
    position: relative;
    min-height: 100svh;
    isolation: isolate;
}


.cell-grid {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}


.dark-filter {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: #000;
    opacity: 0.0;
}


main {
    max-width: 68rem;
    margin: auto;
    padding: 4rem 2rem 2rem;
}


.intro h1 {
    margin: 0;
    padding-bottom: 1.5rem;
}


#name {
    line-height: 0.9;
    margin: 1.3rem 0 .35rem;
    font-size: clamp(2rem, 7vw, 5.5rem);
    font-weight: 400;
    letter-spacing: normal;
}


.intro .lead {
    max-width: 57ch;
    margin-inline: auto;
}

.intro p {
    margin: 0;
    font-size: 1.25rem;
}


.intro .label {
    color: var(--accent);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: .09em;
    text-transform: uppercase;
}


.intro {
    display: grid;
    place-items: center;
    min-height: 64svh;
    padding: 3rem 0 5rem;
    text-align: center;
}


a {
    color: var(--accent);
}


@media (max-width: 44rem) {
    main {
        padding: 2rem 1.25rem;
    }


    .intro {
        padding: 1.5rem 0 3rem;
    }
}