:root {

    --background: #080808;

    --surface: #0d0d0d;

    --foreground: #e5e5e5;

    --muted: #777;

    --border: #303030;

    --border-bright: #666;

    --accent: #ffffff;

    --max-width: 1100px;

}


* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--background);

    color: var(--foreground);

    font-family:
        "JetBrains Mono",
        "Fira Code",
        "Cascadia Code",
        Consolas,
        monospace;

    line-height: 1.6;

}


/* =========================================
   CRT SCANLINES
========================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 9999;

    background:

        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.015) 4px
        );

}


/* =========================================
   HEADER
========================================= */

.site-header {

    width: 100%;

    padding: 1rem 4%;

    border-bottom: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.8rem;

}


.brand {

    display: flex;

    gap: 0.7rem;

    align-items: center;

    font-weight: bold;

}


.brand-symbol {

    font-size: 0.65rem;

}


.status {

    color: var(--muted);

}


.status-dot {

    display: inline-block;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--foreground);

    margin-right: 0.5rem;

}


/* =========================================
   MAIN
========================================= */

main {

    width: min(
        var(--max-width),
        92%
    );

    margin: auto;

}


section {

    padding: 6rem 0;

}


/* =========================================
   HERO
========================================= */

.hero {

    min-height: 80vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.terminal-prompt {

    color: var(--muted);

    margin-bottom: 1rem;

}


.prompt-symbol {

    color: var(--foreground);

    margin-right: 0.5rem;

}


.hero h1 {

    margin: 0;

    font-size:

        clamp(
            3rem,
            9vw,
            7rem
        );

    line-height: 1;

    letter-spacing: -0.08em;

}


.cursor {

    animation: blink 1s infinite;

}


@keyframes blink {

    0%,
    45% {

        opacity: 1;

    }

    46%,
    100% {

        opacity: 0;

    }

}


.roles {

    margin-top: 2rem;

    max-width: 900px;

}


.roles span {

    color: var(--muted);

}


.intro {

    color: var(--muted);

    max-width: 700px;

}


.navigation {

    display: flex;

    flex-wrap: wrap;

    gap: 0.7rem;

    margin-top: 2rem;

}


.navigation a {

    color: var(--foreground);

    text-decoration: none;

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

    padding: 0.6rem 0.9rem;

    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;

}


.navigation a:hover {

    background: var(--foreground);

    color: var(--background);

    border-color: var(--foreground);

}


/* =========================================
   SECTION HEADINGS
========================================= */

.section-heading {

    border-bottom: 1px solid var(--border);

    padding-bottom: 1rem;

    margin-bottom: 2rem;

    color: var(--muted);

}


.section-heading span {

    color: var(--foreground);

    margin-right: 0.5rem;

}


/* =========================================
   FILTERS
========================================= */

.filters {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-bottom: 2rem;

}


.filter {

    background: transparent;

    color: var(--muted);

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

    padding: 0.5rem 0.8rem;

    font-family: inherit;

    cursor: pointer;

}


.filter:hover,
.filter.active {

    color: var(--foreground);

    border-color: var(--foreground);

}


/* =========================================
   REPOSITORIES
========================================= */

.repository-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 1rem;

}


.repo-card {

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

    background: var(--surface);

    padding: 1.5rem;

    transition:
        transform 0.2s,
        border-color 0.2s;

}


.repo-card:hover {

    transform: translateY(-4px);

    border-color: var(--border-bright);

}


.repo-card h3 {

    margin-top: 0;

    margin-bottom: 0.8rem;

    word-break: break-word;

}


.repo-description {

    color: var(--muted);

    min-height: 4.8rem;

}


.repo-meta {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    margin-top: 1rem;

    color: var(--muted);

    font-size: 0.75rem;

}


.repo-link {

    display: inline-block;

    margin-top: 1rem;

    color: var(--foreground);

    text-decoration: none;

}


.repo-link:hover {

    text-decoration: underline;

}


.loading {

    color: var(--muted);

}


/* =========================================
   ABOUT
========================================= */

.terminal-box {

    max-width: 850px;

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

    background: var(--surface);

    padding: 2rem;

}


.terminal-box p {

    margin-top: 0;

}


.terminal-box p:last-child {

    margin-bottom: 0;

}


/* =========================================
   CONTACT
========================================= */

.contact-links {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

}


.contact-links a {

    color: var(--foreground);

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

    padding: 0.8rem 1.2rem;

    text-decoration: none;

}


.contact-links a:hover {

    background: var(--foreground);

    color: var(--background);

}


/* =========================================
   TERMINAL
========================================= */

.terminal-window {

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

    background: #050505;

}


.terminal-bar {

    border-bottom: 1px solid var(--border);

    padding: 0.7rem 1rem;

    display: flex;

    justify-content: space-between;

    color: var(--muted);

    font-size: 0.75rem;

}


.terminal-output {

    min-height: 180px;

    padding: 1rem;

    color: var(--muted);

}


.terminal-output strong {

    color: var(--foreground);

}


.terminal-input-line {

    display: flex;

    align-items: center;

    padding: 1rem;

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

}


.terminal-input-line span {

    white-space: nowrap;

}


#terminal-input {

    flex: 1;

    min-width: 0;

    margin-left: 0.5rem;

    background: transparent;

    border: none;

    outline: none;

    color: var(--foreground);

    font-family: inherit;

    font-size: inherit;

}


/* =========================================
   FOOTER
========================================= */

footer {

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

    padding: 2rem 4%;

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    color: var(--muted);

    font-size: 0.7rem;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .site-header {

        align-items: flex-start;

        gap: 1rem;

        flex-direction: column;

    }


    .hero h1 {

        font-size: 3.3rem;

    }


    .roles {

        line-height: 2;

    }


    footer {

        flex-direction: column;

    }


    .terminal-input-line {

        align-items: flex-start;

        flex-direction: column;

    }


    #terminal-input {

        width: 100%;

        margin-left: 0;

        margin-top: 0.5rem;

    }

}