.headline,
.section-grid>h2 {
    font-family: "Lora", Georgia, "Times New Roman", serif
}

.headline {
    font-size: clamp(4rem, 8.6vw, 8.8rem)
}

.headline span {
    font-family: "DM Mono", monospace;
    font-size: .105em
}

.hero-note {
    text-transform: uppercase
}

.language-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: 400 .72rem/1 "DM Mono", monospace;
    letter-spacing: .08em;
    cursor: pointer
}

.language-toggle i {
    font-style: normal;
    opacity: .45
}

.language-toggle span {
    padding: 8px 2px;
    transition: color .2s
}

.language-toggle span.is-active {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px
}

.games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 18px
}

.game-card {
    display: block
}

.game-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
    transition: transform .25s ease
}

.game-card h3 {
    margin: 12px 2px 0;
    font-size: 1.08rem;
    font-weight: 400;
    text-align: center
}

.section-grid>h2 {
    font-size: clamp(2.2rem, 3.6vw, 4rem)
}

.game-card:hover img {
    transform: translateY(-5px)
}

.game-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
    border-radius: 16px
}

.project-card.purple {
    background: #b49cff
}

.project-card.yellow {
    background: #ffe24b
}

.project-card.orange {
    background: #ff9f43
}

.section-kicker,
.project-card>span {
    font-family: "DM Mono", monospace
}

.about-copy p {
    font-family: "Lora", Georgia, serif
}

.nav-actions {
    min-width: max-content
}

.content-section {
    position: relative;
    isolation: isolate;
    overflow: hidden
}

.content-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 48%;
    pointer-events: none;
    background: radial-gradient(circle at 12% 18%, var(--section-glow-a) 0, transparent 15%), radial-gradient(circle at 38% 30%, var(--section-glow-b) 0, transparent 18%), radial-gradient(circle at 18% 51%, var(--section-glow-c) 0, transparent 14%), radial-gradient(circle at 48% 64%, var(--section-glow-a) 0, transparent 17%), radial-gradient(circle at 9% 79%, var(--section-glow-b) 0, transparent 16%), radial-gradient(circle at 34% 91%, var(--section-glow-c) 0, transparent 13%)
}

.content-section>p,
.content-section>.section-grid {
    position: relative;
    z-index: 1
}

#about {
    --section-glow-a: rgba(69, 201, 255, .3);
    --section-glow-b: rgba(199, 255, 69, .2);
    --section-glow-c: rgba(40, 120, 255, .16)
}

#doc {
    --section-glow-a: rgba(180, 156, 255, .3);
    --section-glow-b: rgba(91, 188, 255, .2);
    --section-glow-c: rgba(235, 105, 255, .15)
}

#games {
    --section-glow-a: rgba(255, 114, 87, .29);
    --section-glow-b: rgba(255, 226, 75, .21);
    --section-glow-c: rgba(255, 159, 67, .17)
}

#tools {
    --section-glow-a: rgba(69, 201, 170, .28);
    --section-glow-b: rgba(40, 120, 255, .2);
    --section-glow-c: rgba(199, 255, 69, .15)
}

html[data-theme=dark] #about {
    --section-glow-a: rgba(87, 214, 255, .58);
    --section-glow-b: rgba(215, 255, 82, .38);
    --section-glow-c: rgba(87, 140, 255, .32)
}

html[data-theme=dark] #doc {
    --section-glow-a: rgba(197, 167, 255, .58);
    --section-glow-b: rgba(87, 214, 255, .38);
    --section-glow-c: rgba(220, 110, 255, .3)
}

html[data-theme=dark] #games {
    --section-glow-a: rgba(255, 132, 95, .58);
    --section-glow-b: rgba(255, 209, 92, .4);
    --section-glow-c: rgba(255, 159, 67, .3)
}

html[data-theme=dark] #tools {
    --section-glow-a: rgba(87, 214, 180, .56);
    --section-glow-b: rgba(87, 140, 255, .38);
    --section-glow-c: rgba(215, 255, 82, .28)
}

.content-section::before,
.content-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -10%;
    bottom: -10%;
    left: -10%;
    width: 82%;
    pointer-events: none;
    will-change: transform;
    -webkit-mask-image: radial-gradient(ellipse at 48% 50%, #000 28%, rgba(0, 0, 0, .82) 48%, transparent 78%);
    mask-image: radial-gradient(ellipse at 48% 50%, #000 28%, rgba(0, 0, 0, .82) 48%, transparent 78%)
}

.content-section::before {
    background: radial-gradient(circle at 18% 16%, var(--section-glow-a) 0, transparent 27%), radial-gradient(circle at 84% 24%, var(--section-glow-b) 0, transparent 9%), radial-gradient(circle at 52% 78%, var(--section-glow-c) 0, transparent 18%);
    animation: section-scatter-a 15s ease-in-out infinite alternate
}

.content-section::after {
    background: radial-gradient(circle at 38% 38%, var(--section-glow-b) 0, transparent 11%), radial-gradient(circle at 82% 62%, var(--section-glow-a) 0, transparent 24%), radial-gradient(circle at 24% 91%, var(--section-glow-c) 0, transparent 7%);
    animation: section-scatter-b 19s ease-in-out infinite alternate
}

#doc::before,
#doc::after,
#tools::before,
#tools::after {
    scale: -1 1
}
#doc::before {
    animation-delay: -7s
}

#doc::after {
    animation-delay: -11s
}

#games::before,
#tools::before {
    animation-delay: -4s
}

#games::after,
#tools::after {
    animation-delay: -15s
}

@keyframes section-scatter-a {
    0% {
        transform: translate3d(-2%, 1%, 0) scale(.94)
    }

    38% {
        transform: translate3d(7%, -3%, 0) scale(1.08)
    }

    72% {
        transform: translate3d(2%, 4%, 0) scale(.98)
    }

    100% {
        transform: translate3d(11%, 1%, 0) scale(1.13)
    }
}

@keyframes section-scatter-b {
    0% {
        transform: translate3d(6%, -2%, 0) scale(1.08)
    }

    34% {
        transform: translate3d(-2%, 5%, 0) scale(.9)
    }

    70% {
        transform: translate3d(10%, 2%, 0) scale(1.15)
    }

    100% {
        transform: translate3d(2%, -5%, 0) scale(.96)
    }
}

html:not([data-theme=dark]) .content-section::before {
    opacity: .82;
    mix-blend-mode: multiply;
    background: radial-gradient(ellipse at 18% 22%, var(--section-glow-a) 0 13%, transparent 13.5%), radial-gradient(circle at 72% 24%, var(--section-glow-b) 0 6%, transparent 6.5%), radial-gradient(ellipse at 48% 76%, var(--section-glow-c) 0 19%, transparent 19.5%), linear-gradient(112deg, transparent 0 42%, var(--section-glow-b) 42.5% 47%, transparent 47.5%)
}

html:not([data-theme=dark]) .content-section::after {
    opacity: .72;
    mix-blend-mode: multiply;
    background: radial-gradient(circle, var(--section-glow-c) 0 1.7px, transparent 1.9px) 0 0/12px 12px, radial-gradient(circle at 30% 58%, var(--section-glow-b) 0 8%, transparent 8.5%), radial-gradient(ellipse at 78% 68%, var(--section-glow-a) 0 14%, transparent 14.5%);
    clip-path: polygon(4% 8%, 92% 3%, 100% 88%, 14% 98%)
}

html[data-theme=dark] .content-section::before {
    opacity: .3;
    mix-blend-mode: screen;
    background: radial-gradient(ellipse at 18% 22%, var(--section-glow-a) 0 13%, transparent 13.5%), radial-gradient(circle at 72% 24%, var(--section-glow-b) 0 6%, transparent 6.5%), radial-gradient(ellipse at 48% 76%, var(--section-glow-c) 0 19%, transparent 19.5%), linear-gradient(112deg, transparent 0 42%, var(--section-glow-b) 42.5% 47%, transparent 47.5%)
}

html[data-theme=dark] .content-section::after {
    opacity: .18;
    mix-blend-mode: screen;
    background: radial-gradient(circle, var(--section-glow-c) 0 1.7px, transparent 1.9px) 0 0/12px 12px, radial-gradient(circle at 30% 58%, var(--section-glow-b) 0 8%, transparent 8.5%), radial-gradient(ellipse at 78% 68%, var(--section-glow-a) 0 14%, transparent 14.5%);
    clip-path: polygon(4% 8%, 92% 3%, 100% 88%, 14% 98%)
}

@media(prefers-reduced-motion:reduce) {

    .content-section::before,
    .content-section::after {
        animation-duration: 26s;
        animation-timing-function: ease-in-out
    }
}

@media(max-width:960px) {

    .content-section::before,
    .content-section::after {
        left: -12%;
        width: 128%;
        height: 58%;
        right: auto;
        bottom: auto;
        -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 28%, rgba(0, 0, 0, .82) 50%, transparent 80%);
        mask-image: radial-gradient(ellipse at 50% 48%, #000 28%, rgba(0, 0, 0, .82) 50%, transparent 80%)
    }

    .content-section::before {
        background: radial-gradient(circle at 10% 18%, var(--section-glow-a) 0, transparent 18%), radial-gradient(circle at 66% 24%, var(--section-glow-b) 0, transparent 20%), radial-gradient(circle at 30% 58%, var(--section-glow-c) 0, transparent 17%), radial-gradient(circle at 82% 78%, var(--section-glow-a) 0, transparent 18%), radial-gradient(circle at 12% 92%, var(--section-glow-b) 0, transparent 16%)
    }

    .language-toggle {
        font-size: .68rem
    }

    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* Align hash navigation with the section content instead of its padded edge. */
html {
    scroll-padding-top: 0
}

.content-section {
    --anchor-section-padding: clamp(84px, 10vw, 150px);
    scroll-margin-top: calc(40px - var(--anchor-section-padding))
}

@media(max-width:960px) {
    .content-section {
        --anchor-section-padding: 78px;
        scroll-margin-top: calc(24px - var(--anchor-section-padding))
    }
}

@media(max-width:620px) {
    .headline {
        font-size: clamp(3rem, 15vw, 5rem)
    }

    .games-grid {
        grid-template-columns: 1fr
    }

    .language-toggle {
        gap: 3px;
        padding: 0
    }

    .theme-toggle,
    .menu-toggle {
        width: 40px;
        height: 40px
    }
}