/* ========================================
   PERSONAL PORTFOLIO
   NEO-BRUTALISM — VIOLET
   Version 4.0
======================================== */


/* ========================================
   THEME
======================================== */

:root {

    --cream: #f6f0e5;
    --paper: #fffdf8;

    --black: #111111;
    --gray: #55515b;

    --violet: #8b5cf6;
    --violet-light: #c4b5fd;
    --violet-dark: #6d28d9;

    --yellow: #ffe66d;
    --pink: #ff9ecf;
    --green: #b7ef72;
    --cyan: #8de8e8;

    --border: 3px solid var(--black);

    --shadow: 7px 7px 0 var(--black);

    --shadow-small: 4px 4px 0 var(--black);

}


/* ========================================
   RESET
======================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background-color: var(--violet-light);

    background-image:
        linear-gradient(
            rgba(17, 17, 17, .10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17, 17, 17, .10) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    color: var(--black);

    font-family:
        "Space Grotesk",
        sans-serif;

    padding: 28px;

    line-height: 1.6;

}


a {

    color: inherit;

}


button {

    font-family: inherit;

}


/* ========================================
   CUSTOM CURSOR
======================================== */

@media (min-width: 701px) {

    * {

        cursor: none !important;

    }


    .custom-cursor {

        position: fixed;

        width: 14px;
        height: 14px;

        background: var(--violet);

        border: 2px solid var(--black);

        pointer-events: none;

        z-index: 99999;

        transform:
            translate(
                -50%,
                -50%
            );

        transition:
            width .12s ease,
            height .12s ease,
            background .12s ease;

    }


    .custom-cursor.hover {

        width: 20px;
        height: 20px;

        background: var(--pink);

    }

}


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

.site-shell {

    width:
        min(
            1180px,
            100%
        );

    margin: 0 auto;

    background: var(--paper);

    border: var(--border);

    box-shadow:
        10px 10px 0 var(--black);

    position: relative;

    overflow: hidden;

}


/* ========================================
   TOP BAR
======================================== */

.topbar {

    min-height: 64px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 20px;

    padding:
        0 24px;

    background: var(--violet);

    border-bottom: var(--border);

    font-family:
        "DM Mono",
        monospace;

}


.brand {

    color: var(--black);

    font-size: 22px;

    font-weight: 500;

    text-decoration: none;

    letter-spacing: -1px;

}


.topbar-status {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--black);

    font-size: 11px;

    font-weight: 500;

}


.status-dot {

    width: 9px;
    height: 9px;

    background: var(--green);

    border: 2px solid var(--black);

    border-radius: 50%;

}


.topbar-year {

    justify-self: end;

    font-size: 12px;

    font-weight: 500;

}


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

.hero {

    min-height: 600px;

    display: grid;

    grid-template-columns:
        1.35fr
        .65fr;

    gap: 50px;

    padding:
        80px 64px;

    background: var(--yellow);

    border-bottom: var(--border);

}


.hero-copy {

    align-self: center;

}


.eyebrow {

    width: max-content;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    padding:
        7px 10px;

    background: var(--paper);

    border: 2px solid var(--black);

    box-shadow:
        3px 3px 0 var(--black);

    font-family:
        "DM Mono",
        monospace;

    font-size: 11px;

    font-weight: 500;

}


.eyebrow span {

    color: var(--violet-dark);

}


.hero h1 {

    max-width: 760px;

    font-size:
        clamp(
            52px,
            8vw,
            100px
        );

    line-height: .9;

    letter-spacing: -6px;

    font-weight: 700;

}


.hero h1 span {

    display: block;

    color: var(--violet-dark);

    text-shadow:
        3px 3px 0 var(--black);

}


.hero-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 11px;

}


.hero-meta span {

    color: var(--violet-dark);

}


.hero-description {

    max-width: 620px;

    margin-top: 28px;

    font-size: 17px;

    line-height: 1.7;

    font-weight: 500;

}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;

}


.neo-button {

    min-width: 170px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    padding:
        14px 17px;

    border: var(--border);

    box-shadow:
        var(--shadow-small);

    text-decoration: none;

    font-family:
        "DM Mono",
        monospace;

    font-size: 11px;

    font-weight: 500;

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}


.neo-button.violet {

    background: var(--violet);

}


.neo-button.white {

    background: var(--paper);

}


.neo-button:hover {

    color: var(--black);

    transform:
        translate(
            4px,
            4px
        );

    box-shadow: none;

}


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

.hero-photo-wrap {

    width:
        min(
            100%,
            320px
        );

    position: relative;

    align-self: center;

    justify-self: end;

}


.photo-label {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 10px;

    font-weight: 500;

}


.photo-card {

    aspect-ratio:
        4 / 5;

    padding: 10px;

    background:
        var(--violet-light);

    border: var(--border);

    box-shadow:
        var(--shadow);

    transform:
        rotate(2deg);

}


.photo-card img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        grayscale(100%);

    transition:
        filter .25s ease;

}


.photo-card:hover img {

    filter:
        grayscale(0);

}


.photo-sticker {

    width: 70px;
    height: 70px;

    position: absolute;

    right: -20px;
    bottom: -24px;

    display: grid;

    place-items: center;

    background:
        var(--pink);

    border: var(--border);

    box-shadow:
        var(--shadow-small);

    font-size: 34px;

    transform:
        rotate(-8deg);

}


/* ========================================
   SECTIONS
======================================== */

.section {

    padding:
        72px 64px;

    border-bottom:
        var(--border);

}


.section-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 32px;

}


.section-number {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background:
        var(--violet);

    border:
        2px solid var(--black);

    box-shadow:
        3px 3px 0 var(--black);

    font-family:
        "DM Mono",
        monospace;

    font-size: 11px;

    font-weight: 500;

}


.section-heading h2 {

    font-size:
        clamp(
            25px,
            4vw,
            42px
        );

    line-height: 1;

    letter-spacing:
        -2px;

}


/* ========================================
   DOOMSDAY COUNTDOWN
======================================== */

.doomsday-card {

    padding:
        34px 28px 30px;

    background:
        #b8f28b;

    border:
        var(--border);

    box-shadow:
        var(--shadow);

    color:
        var(--black);

    text-align:
        center;

}


.doomsday-subtitle {

    margin:
        0 0 26px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        5px;

}


.countdown {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

}


.countdown-unit {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 100px;

}


.countdown-number {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            48px,
            7vw,
            82px
        );

    font-weight:
        800;

    line-height:
        .9;

    letter-spacing:
        -4px;

}


.countdown-label {

    margin-top:
        18px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        10px;

    letter-spacing:
        4px;

    color:
        var(--black);

}


.countdown-separator {

    align-self:
        flex-start;

    margin-top:
        8px;

    color:
        #777;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        48px;

    font-weight:
        700;

}


/* ========================================
   EXPERIENCE
======================================== */

.experience-card {

    display: grid;

    grid-template-columns:
        180px
        1fr
        auto;

    gap: 30px;

    align-items: start;

    padding:
        32px;

    background:
        var(--green);

    border:
        var(--border);

    box-shadow:
        var(--shadow);

}


.experience-year {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        16px;

    font-weight:
        500;

}


.experience-year span {

    color:
        var(--violet-dark);

}


.experience-tag {

    display:
        inline-block;

    margin-bottom:
        12px;

    padding:
        5px 9px;

    background:
        var(--paper);

    border:
        2px solid var(--black);

    box-shadow:
        2px 2px 0 var(--black);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        10px;

    font-weight:
        500;

}


.experience-main h3 {

    font-size:
        32px;

    letter-spacing:
        -1.5px;

}


.experience-main p {

    max-width:
        700px;

    margin-top:
        12px;

    color:
        var(--gray);

    font-size:
        14px;

    line-height:
        1.8;

}


.experience-stack {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        20px;

}


.experience-stack span {

    padding:
        5px 9px;

    background:
        var(--paper);

    border:
        2px solid var(--black);

    box-shadow:
        2px 2px 0 var(--black);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        10px;

}


.experience-arrow {

    font-size:
        34px;

    font-weight:
        700;

}


/* ========================================
   PROJECTS
======================================== */

.projects-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        26px;

}


.project-card {

    min-height:
        330px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        24px;

    border:
        var(--border);

    box-shadow:
        var(--shadow);

    text-decoration:
        none;

    color:
        var(--black);

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}


.project-card:hover {

    color:
        var(--black);

    transform:
        translate(
            6px,
            6px
        );

    box-shadow:
        1px 1px 0 var(--black);

}


.project-violet {

    background:
        var(--violet-light);

}


.project-yellow {

    background:
        var(--yellow);

}


.project-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        11px;

}


.project-top span:last-child {

    font-size:
        22px;

}


.project-body {

    margin-top:
        auto;

}


.project-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        18px;

    background:
        var(--paper);

    border:
        2px solid var(--black);

    box-shadow:
        3px 3px 0 var(--black);

    font-size:
        24px;

}


.project-body h3 {

    font-size:
        36px;

    line-height:
        1;

    letter-spacing:
        -2px;

}


.project-body p {

    max-width:
        420px;

    margin-top:
        14px;

    color:
        var(--gray);

    font-size:
        14px;

    line-height:
        1.7;

}


.project-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        35px;

    padding-top:
        15px;

    border-top:
        2px solid var(--black);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        11px;

}


/* ========================================
   SPOTIFY
======================================== */

.spotify-card {

    overflow:
        hidden;

    background:
        var(--paper);

    border:
        var(--border);

    box-shadow:
        var(--shadow);

}


.spotify-heading {

    min-height:
        105px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        22px 26px;

    background:
        var(--violet);

    border-bottom:
        var(--border);

}


.spotify-heading > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.mini-label {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .5px;

}


.spotify-heading h3 {

    margin:
        0;

    font-size:
        28px;

    line-height:
        1;

    letter-spacing:
        -1.5px;

}


.music-symbol {

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--yellow);

    border:
        3px solid var(--black);

    box-shadow:
        4px 4px 0 var(--black);

    font-size:
        27px;

    transform:
        rotate(3deg);

}


.spotify-card iframe {

    display:
        block;

    width:
        100%;

    height:
        352px;

    border:
        0;

    background:
        #111;

}


.spotify-card::after {

    content:
        "WLY / MUSIC COLLECTION";

    display:
        block;

    padding:
        10px 18px;

    background:
        var(--green);

    border-top:
        var(--border);

    color:
        var(--black);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        9px;

    font-weight:
        700;

}


/* ========================================
   WATCH LOG
======================================== */

.watch-card {

    overflow:
        hidden;

    background:
        var(--paper);

    border:
        var(--border);

    box-shadow:
        var(--shadow);

}


.watch-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        16px 20px;

    background:
        var(--pink);

    border-bottom:
        var(--border);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        11px;

}


.watchlist-description {

    margin:
        0;

    padding:
        24px 28px 0;

    max-width:
        900px;

    color:
        var(--gray);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        11px;

    line-height:
        1.8;

}


#watchlist-container {

    padding:
        24px;

}


/* ========================================
   MARQUEE
======================================== */

.marquee {

    width:
        100%;

    overflow:
        hidden;

    background:
        var(--violet);

    border-top:
        var(--border);

    border-bottom:
        var(--border);

    padding:
        18px 0;

}


.marquee-track {

    display:
        flex;

    width:
        max-content;

    animation:
        marquee-scroll
        10s
        linear
        infinite;

}


.marquee-content {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    padding-right:
        30px;

    white-space:
        nowrap;

}


.marquee-content span {

    color:
        var(--black);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        18px;

    font-weight:
        700;

    letter-spacing:
        -.5px;

}


.marquee-content b {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--yellow);

    font-size:
        23px;

    line-height:
        1;

    -webkit-text-stroke:
        1px var(--black);

}


@keyframes marquee-scroll {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}


.marquee:hover
.marquee-track {

    animation-play-state:
        paused;

}


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

.footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        24px 30px;

    background:
        var(--paper);

}


.footer-left {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        10px;

}


.footer-left span {

    color:
        var(--gray);

}


.footer-right {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.cat-secret,
.footer-instagram {

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--paper);

    border:
        2px solid var(--black);

    color:
        #777;

    text-decoration:
        none;

    cursor:
        pointer;

    font-size:
        16px;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        color .15s ease;

}


.cat-secret:hover,
.footer-instagram:hover {

    transform:
        translate(
            2px,
            2px
        );

    box-shadow:
        2px 2px 0 var(--black);

}


.cat-secret:hover {

    color:
        var(--black);

}


.footer-instagram:hover {

    color:
        #e4405f;

}


/* ========================================
   CAT WALK
======================================== */

#catWalk {

    position:
        absolute;

    right:
        35px;

    bottom:
        24px;

    z-index:
        20;

    opacity:
        0;

    pointer-events:
        none;

    font-size:
        28px;

}


/* ========================================
   SELECTION
======================================== */

::selection {

    background:
        var(--violet);

    color:
        var(--paper);

}


/* ========================================
   SCROLLBAR
======================================== */

::-webkit-scrollbar {

    width:
        12px;

}


::-webkit-scrollbar-track {

    background:
        var(--cream);

}


::-webkit-scrollbar-thumb {

    background:
        var(--violet);

    border:
        2px solid var(--black);

}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--yellow);

}


/* ========================================
   TABLET
======================================== */

@media (max-width: 800px) {

    body {

        padding:
            12px;

    }


    .site-shell {

        box-shadow:
            5px 5px 0 var(--black);

    }


    .topbar {

        min-height:
            55px;

        padding:
            0 14px;

    }


    .topbar-status {

        display:
            none;

    }


    .topbar-year {

        font-size:
            10px;

    }


    .hero {

        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            45px;

        padding:
            48px 24px 60px;

    }


    .hero h1 {

        font-size:
            clamp(
                48px,
                14vw,
                76px
            );

        letter-spacing:
            -4px;

    }


    .hero-description {

        font-size:
            15px;

    }


    .hero-photo-wrap {

        width:
            min(
                78vw,
                300px
            );

        justify-self:
            center;

    }


    .section {

        padding:
            48px 24px;

    }


    .projects-grid {

        grid-template-columns:
            1fr;

    }


    .experience-card {

        grid-template-columns:
            1fr;

        gap:
            18px;

        padding:
            24px;

    }


    .experience-main h3 {

        font-size:
            28px;

    }


    .experience-arrow {

        display:
            none;

    }


    .project-card {

        min-height:
            290px;

    }


    .project-body h3 {

        font-size:
            32px;

    }


    .footer {

        align-items:
            flex-start;

        padding:
            22px 20px;

    }


    .footer-left {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            5px;

    }

}


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

@media (max-width: 700px) {

    #doomsday .section-heading {

        align-items:
            flex-start;

        gap:
            12px;

    }


    #doomsday .section-heading h2 {

        font-size:
            30px;

        line-height:
            1.05;

        letter-spacing:
            -1.5px;

        max-width:
            270px;

    }


    .doomsday-card {

        padding:
            30px 14px 26px;

        overflow:
            hidden;

    }


    .doomsday-subtitle {

        margin-bottom:
            28px;

        font-size:
            9px;

        letter-spacing:
            3px;

        white-space:
            nowrap;

    }


    .countdown {

        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr auto
            1fr auto
            1fr auto
            1fr auto
            1fr;

        align-items:
            start;

        gap:
            3px;

    }


    .countdown-unit {

        min-width:
            0;

        width:
            100%;

    }


    .countdown-number {

        font-size:
            clamp(
                28px,
                8vw,
                42px
            );

        letter-spacing:
            -2px;

        line-height:
            1;

        white-space:
            nowrap;

    }


    .countdown-separator {

        margin-top:
            2px;

        font-size:
            28px;

        line-height:
            1;

    }


    .countdown-label {

        margin-top:
            10px;

        font-size:
            7px;

        letter-spacing:
            1px;

        white-space:
            nowrap;

    }

}


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

@media (max-width: 700px) {

    .spotify-heading {

        min-height:
            90px;

        padding:
            18px;

    }


    .spotify-heading h3 {

        font-size:
            22px;

    }


    .music-symbol {

        width:
            45px;

        height:
            45px;

        font-size:
            22px;

    }


    .spotify-card iframe {

        height:
            352px;

    }

}


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

@media (max-width: 480px) {

    body {

        padding:
            7px;

    }


    .topbar {

        grid-template-columns:
            1fr auto;

    }


    .brand {

        font-size:
            19px;

    }


    .hero {

        padding:
            38px 18px 50px;

    }


    .hero h1 {

        font-size:
            46px;

        letter-spacing:
            -3px;

    }


    .hero-meta {

        font-size:
            9px;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .neo-button {

        width:
            100%;

    }


    .section {

        padding:
            42px 18px;

    }


    .section-heading {

        gap:
            11px;

        margin-bottom:
            25px;

    }


    .section-number {

        width:
            34px;

        height:
            34px;

    }


    .section-heading h2 {

        font-size:
            27px;

    }


    .experience-year {

        font-size:
            13px;

    }


    .project-card {

        min-height:
            270px;

        padding:
            20px;

    }


    .project-body h3 {

        font-size:
            29px;

    }


    .spotify-heading {

        padding:
            16px;

    }


    .spotify-heading h3 {

        font-size:
            19px;

    }


    .watchlist-description {

        padding:
            20px 18px 0;

        font-size:
            10px;

    }


    #watchlist-container {

        padding:
            16px;

    }


    .footer {

        flex-direction:
            column;

    }


    .footer-right {

        align-self:
            flex-end;

    }

}