style.css

/* * Variables */

:root {
    --col-bg: #121212;
    --col-surf: #1a1a1a;
    --col-txt: #f5f5f5;
    --col-txt-mut: #a0a0a0;
    --col-border: #2a2a2a;
    --col-accent: #82caff;

    --bg-glow: rgba(130, 302, 255, 0.08);
}

/* * Global */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(circle at 50% 0%, var(--bg-glow), transparent 40%),
        var(--col-bg);
    color: var(--col-txt);

    background-size: 100% 100%;
    animation: bg-glow 8s ease-in-out infinite alternate;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
    line-height: 1.6;
}

@keyframes bg-glow {
    from {
        background-position: 50% 0%;
    }

    to {
        background-position: 50% 4%;
    }
}

/* * Scrollbar */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--col-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--col-border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--col-txt-mut);
}

/* * Text Selection */

::selection {
    background: var(--col-accent);
    color: var(--col-bg);
}

/* * Typography */

h1,
h2,
h3,
p {
    margin: 0;
}

h1,
h2,
h3 {
    line-height: 1.2;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.25rem;
}

p {
    max-width: 65ch;
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

/* * Links */

a {
    color: var(--col-accent);
    text-decoration: none;

    transition: color 150ms ease;
}

a:hover {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--col-accent);
    outline-offset: 3px;
}

/* * Page Layout */

main {
    width: min(100% - 2rem, 1100px);
    margin-inline: auto;
}

section {
    margin-block: 6rem;
}

/* * Header */

header {
    border-bottom: 1px solid var(--col-border);
}

header nav {
    width: min(100% - 2rem, 1100px);
    margin-inline: auto;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;

    padding-block: 1rem;
}

header nav a:hover {
    text-decoration: none;

    opacity: 0.75;
}

/* * Intro */

#intro {
    padding-block: 8rem;
}

#intro p:first-child {
    margin-bottom: 1rem;

    color: var(--col-txt-mut);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

#intro h1 {
    margin-bottom: 1rem;

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

#intro p:last-child {
    color: var(--col-txt-mut);
    font-size: 1.1rem;
}

/* * About */

#about {
    max-width: 75ch;
}

#about h2 {
    margin-bottom: 1.5rem;
}

#about p + p {
    margin-top: 1rem;
}

/* * Projects */

#projects h2 {
    margin-bottom: 1.5rem;
}

#projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    counter-reset: project;
}

#projects h2 {
    grid-column: 1 / -1;
}

#projects article {
    position: relative;
    padding: 1.5rem;

    background: var(--col-surf);
    border: 1px solid var(--col-border);
    border-radius: 0.75rem;

    counter-increment: project;

    transition:
        transform 150ms ease,
        border-color 150ms ease;
}

#projects article::before {
    content: "#" counter(project);

    position: absolute;
    top: 0.65rem;
    left: 0.75rem;

    font-size: 0.7rem;
    font-weight: 600;
    color: var(--col-txt-mut);
    opacity: 0.7;
}

#projects article:hover {
    transform: translateY(-3px);

    border-color: var(--col-accent);
}

#projects article h3 {
    margin-bottom: 0.75rem;
}

#projects article p {
    color: var(--col-txt-mut);
}

#projects article a {
    display: inline-block;
    margin-top: 1rem;
}

/* * Stack */

#stack h2 {
    margin-bottom: 1rem;
}

#stack > p {
    margin-bottom: 2rem;
    color: var(--col-txt-mut);
}

#stack dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2rem;
    row-gap: 1.5rem;
}

#stack dt {
    font-weight: 700;
}

#stack dd {
    margin: 0;

    color: var(--col-txt-mut);
}

/* * Commissions */

#comms {
    margin-block: 4rem;
}

#comms > h2 {
    margin-bottom: 1.5rem;
}

#comms details {
    border: 1px solid var(--col-border);
    border-radius: 8px;

    background: var(--col-surf);

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#comms details:hover {
    border-color: var(--col-accent);
}

#comms details:open {
    border-color: var(--col-accent);
}

#comms summary {
    padding: 1rem 1.25rem;

    cursor: pointer;

    font-weight: 600;
    color: var(--col-txt);

    user-select: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

#comms summary:hover {
    color: var(--col-accent);
    background: var(--col-surf);
}

#comms summary:focus-visible {
    outline: 2px solid var(--col-accent);
    outline-offset: -2px;
}

#comms details > h3,
#comms details > p,
#comms details > ul {
    margin-inline: 1.5rem;
}

#comms details > h3 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;

    color: var(--col-accent);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

#comms details > p {
    margin-block: 1rem;

    line-height: 1.7;
}

#comms details > ul {
    margin-block: 1rem;

    padding-left: 2rem;

    line-height: 1.7;
}

#comms details > ul > li {
    margin-block: 0.75rem;
}

#comms details > ul > li > strong {
    color: var(--col-txt);
}

#comms li ul {
    margin-top: 0.75rem;

    padding-left: 1.5rem;
}

#comms li ul li {
    margin-block: 0.4rem;
}

#comms li p {
    margin-block: 1rem;

    font-size: 0.9rem;
    color: var(--col-txt-mut);
}

#comms strong {
    color: var(--col-accent);
}

#comms em {
    color: var(--col-txt-mut);
}

#comms details > :last-child {
    margin-bottom: 2rem;
}

/* * Links */

#links h2 {
    margin-bottom: 1rem;
}

#links > p {
    margin-bottom: 1.5rem;

    color: var(--col-txt-mut);
}

#links nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#links nav a {
    padding: 0.6rem 1rem;

    border: 1px solid var(--col-border);
    border-radius: 0.5rem;

    background: var(--col-surf);

    transition:
        transform 150ms ease,
        border-color 150ms ease;
}

#links nav a:hover {
    transform: translateY(-2px);

    border-color: var(--col-accent);

    text-decoration: none;
}

/* * Footer */

footer {
    margin-top: 8rem;
    padding-block: 2rem;

    border-top: 1px solid var(--col-border);

    color: var(--col-txt-mut);
    font-size: 0.9rem;
    text-align: center;
}

/* * Responsive Layout */

@media (max-width: 700px) {
    #projects {
        grid-template-columns: 1fr;
    }

    #stack dl {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
    }

    #stack dd {
        margin-bottom: 1rem;
    }

    #intro {
        padding-block: 6rem;
    }

    #intro h1 {
        font-size: clamp(2.75rem, 15vw, 5rem);
    }

    header nav {
        gap: 1rem;
    }
}

@media (max-width: 450px) {
    main {
        width: min(100% - 1.5rem, 1100px);
    }

    header nav {
        gap: 0.75rem;
    }

    section {
        margin-block: 4rem;
    }

    #intro {
        padding-block: 5rem;
    }
}

@media (max-width: 600px) {
    #comms {
        margin-block: 3rem;
    }

    #comms summary {
        padding: 0.9rem 1rem;
    }

    #comms details > h3,
    #comms details > p,
    #comms details > ul {
        margin-inline: 1rem;
    }

    #comms details > ul {
        padding-left: 1.5rem;
    }

    #comms li ul {
        padding-left: 1.25rem;
    }
}