/* ###################### FONT FACES ###################### */
@font-face {
    font-family: 'NB Grotesk';
    src: url('./fonts/NBGrotesk-45Mager.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'NB Grotesk';
    src: url('./fonts/NBGrotesk-45RMager.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'NB Grotesk';
    src: url('./fonts/NBGrotesk-55Normal.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'NB Grotesk';
    src: url('./fonts/NBGrotesk-55RNormal.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'NB Grotesk';
    src: url('./fonts/NBGrotesk-65Halbfett.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'NB Grotesk';
    src: url('./fonts/NBGrotesk-65RHalbfett.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'NB Grotesk';
    src: url('./fonts/NBGrotesk-75Fett.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'NB Grotesk';
    src: url('./fonts/NBGrotesk-75RFett.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* ###################### GLOBAL STYLES ######################### */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'NB Grotesk', sans-serif;
    font-size: clamp(0.5rem, 0.9vw, 1rem);
    line-height: 1.6;
    background-color: rgb(20, 20, 20);
    color: white;

    ul,
    ol {
        list-style-position: inside;
    }

    a {
        color: #fff;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    a:hover {
        color: rgb(118, 118, 118);
    }

    span {
        background-color: rgb(118, 118, 118);
        text-decoration: none;
    }

    span:hover {
        background-color: rgb(225, 225, 225);
        color: rgb(20, 20, 20);
        transition: color 0.3s ease;
    }
}

/* ###################### NAVIGATION ######################### */
nav {
    background-color: rgb(20, 20, 20);
    padding: 1rem 0;
    margin-left: 6%;
    position: sticky;
    top: 0;
    z-index: 100;
    max-height: 5vh;

    a {
        font-size: clamp(0.7rem, 0.8vw, 1.2rem);
    }
}

/* ###################### GLOBAL MAIN ###################### */
main {
    height: 78vh;
    max-width: 1440px;
    margin: 0 6%;
    display: grid;
    grid-template-columns: 3fr 8fr 5fr 8fr;

    /* ###################### HOME ######################### */

    .hover1 {
        position: relative;
    }

    .profilePic {
        display: none;
        position: absolute;
        top: 15vh;
        width: 500%;
    }

    .hover1:hover .profilePic {
        display: block;
    }

    section {
        height: 78vh;

        p {
            position: relative;
            top: 30vh;
        }

        .hover2 {
            position: relative;
        }

        .l-shape {
            display: none;
            position: absolute;
            top: 8vh;
            left: 8vw;
            width: 150%;
        }

        .hover2:hover .l-shape {
            display: block;
            color: #fff;
        }

        .straight {
            display: none;
            position: absolute;
            top: 12vh;
            left: 42vw;
            width: 150%;
        }

        .hover2:hover .straight {
            display: block;
            color: #fff;
        }

        .straightDown,
        .straightDown2,
        .straightDown3 {
            display: none;
            position: absolute;
            top: 35vh;
            left: 51vw;
            width: 120%;
        }

        .hover3 {
            position: relative;
        }

        .l-shape2 {
            display: none;
            position: absolute;
            top: -11vh;
            left: 1vw;
            width: 150%;
        }

        .hover3:hover .l-shape2 {
            display: block;
            color: #fff;
        }

        li {
            display: flex;
            gap: 20px;
            counter-increment: my-counter;
        }

        li::before {
            content: counter(my-counter) ".";
            flex-shrink: 0;
        }

        .rootLine {
            padding-right: 10%;
        }

        .aboveRootLine {
            position: relative;
            top: 18vh;
        }

        .underRootLine {
            position: relative;
            top: 36vh;
        }

        .secondUnderRootLine {
            position: relative;
            top: 38vh;
        }

        .hover4 {
            position: relative;
        }

        .artPortPic {
            display: none;
            position: absolute;
            width: 300%;
            top: -20vh;
            right: -30vw;
        }

        .hover4:hover .artPortPic {
            display: block;
        }

        .hover5 {
            position: relative;
        }

        .projectPic {
            display: none;
            position: absolute;
            top: 17vh;
            width: 360%;
            right: -15vw;
        }

        .hover5:hover .projectPic {
            display: block;
        }

        .hover6 {
            position: relative;
        }

        .projectPic2 {
            display: none;
            position: absolute;
            top: 12vh;
            width: 360%;
            right: -15vw;
        }

        .hover6:hover .projectPic2 {
            display: block;
        }

        .hover7 {
            position: relative;
        }

        .projectPic3 {
            display: none;
            position: absolute;
            top: 7vh;
            width: 210%;
            right: -10vw;
        }

        .hover7:hover .projectPic3 {
            display: block;
        }

        .projectList {
            display: grid;
            grid-template-columns: 1fr 5fr 6fr;
            gap: 0px;

            a:first-child {
                text-decoration: none;
            }
        }
    }
}

/* ###################### FOOTER ###################### */

footer {
    background-color: rgb(20, 20, 20);
    color: white;
    text-align: start;
    align-items: end;
    justify-content: space-between;
    margin: 2em 44% 1em 6%;
    max-height: 17vh;
    display: flex;

    .footLinks {
        width: 12vw;
        display: flex;
        justify-content: space-between;
    }

    .footLinks:first-child {
        justify-content: space-around;
    }

    ul {
        list-style: none;

        .interactive {
            display: flex;
            gap: 15px;
        }
    }
}

/* ###################### ABOUT ######################### */

.aboutPage {
    height: 78vh;
    max-width: 1440px;
    margin: 0 6%;
    display: grid;
    grid-template-columns: 1fr 1fr;

    section {
        display: grid;
        grid-template-columns: 3fr 9fr;
        gap: 2vh;

        h2 {
            margin-top: 2em;
        }

        h3 {
            margin: 0 0 2em 1em;
        }


        li {
            display: flex;
            gap: 10px;
            counter-increment: none;
        }

        li::before {
            content: "—";
            flex-shrink: 0;
        }

        p {
            position: static;
            top: auto;
            margin-bottom: 1em;
            padding-right: 2em;
        }
    }

    .background {
        border-left: 1px solid grey;
        padding-left: 2em;
    }

    .stack-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2vw;

        span {
            background-color: transparent;
        }
    }

    .primary {
        /* your strongest style — bigger, brighter */
        font-weight: 700;
        font-size: small;
    }

    .secondary {
        /* medium weight */
        text-decoration: underline;
    }
}

.tech {
    margin: 2em 38% 1em 6%;
}

/* ###################### CV ######################### */

.cvBody {
    background-color: rgb(20, 20, 20);

    nav {
        display: flex;
        justify-content: space-between;
        margin-right: 10%;

        div {
            a {
                margin-right: 3em;
            }
        }
    }

    p {
        position: static;
    }

    section {
        height: auto;

    }
}

nav .printButton {
    background-color: rgb(118, 118, 118);
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

main.cvPage {
    height: auto;
    max-width: 1440px;
    margin: 0 6% 4rem;
    display: block;
}

.cvIntro {
    display: grid;
    gap: 1.5rem;
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.cvIntro h1 {
    font-size: clamp(1.5rem, 4vw, 3.2rem);
    line-height: 0.95;
    max-width: 14ch;
}

.eyebrow {
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
}

.lead {
    max-width: 80ch;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
}

.cvMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.cvGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding-top: 1.5rem;
}

article {
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.25rem;
    min-height: 100%;
    font-size: clamp(0.6rem, 1vw, 1rem);

    p:last-child {
        margin-top: 1em;
    }
}

article h2 {
    margin-bottom: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

article h3 {
    margin-bottom: 0.35rem;
}

.cvItem+.cvItem {
    margin-top: 1rem;
}

.languageList {
    display: block;
    gap: 0.5rem 1rem;
    font-size: clamp(0.8rem, 1vw, 1rem);
    list-style: none;

    li {
        display: grid;
        grid-template-columns: 3fr 6fr 3fr;
        justify-content: space-between;
        margin-bottom: 2em;
        justify-items: center;
        align-items: center;

        .bar {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 0.5rem;
            border: 0;
            border-radius: 999px;
            overflow: hidden;
            background-color: rgb(118, 118, 118);
            accent-color: white;
        }

        .bar::-webkit-progress-bar {
            background-color: rgb(118, 118, 118);
            border-radius: 999px;
        }

        .bar::-webkit-progress-value {
            background-color: white;
            border-radius: 999px;
        }

        .bar::-moz-progress-bar {
            background-color: white;
            border-radius: 999px;
        }
    }
}

.languageList li::before {
    content: none;
    margin-right: 0.5rem;
}

.skillList {
    margin: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1rem;
    font-size: clamp(0.8rem, 1vw, 1rem);
    list-style: none;
}

.skillList li::before {
    content: "—";
    margin-right: 0.5rem;
}

.jobs {
    grid-column: 1 / -1;
}

.hobbies {
    grid-column: 1 / -1;
}

.hobbyList {
    display: flex;
    gap: 0.5rem 1rem;
    font-size: clamp(0.8rem, 1vw, 1rem);
    list-style: none;
    justify-content: space-between;
    text-transform: uppercase;
}

.hobbyList li::before {
    content: none;
    margin-right: 0.5rem;
}

/* ###################### MEDIA QUERIES ######################*/

/* ######################## TABLETS ##########################*/

@media (max-width: 890px) {

    /* HOME */

    body {
        font-size: clamp(0.5rem, 1.4vw, 1rem);

    }

    nav {
        margin-left: 3%;

        a {
            font-size: clamp(0.7rem, 1.4vw, 1rem);
        }
    }

    main {
        height: 80vh;
        margin: 0 3%;
        display: grid;
        grid-template-columns: 3fr 8fr 5fr;

        .profilePic {
            top: 10vh;
            width: 500%;
        }

        section {
            height: 40vh;

            p {
                top: 15vh;
            }

            .aboveRootLine {
                top: 8vh;
            }

            .underRootLine {
                top: 25vh;
            }

            .l-shape {
                top: 12vh;
                left: 12vw;
            }

            .hover2:hover .straight {
                display: none;
            }

            .hover2:hover .straightDown {
                display: block;
                color: #fff;
            }

            .l-shape2 {
                top: -6vh;
                left: 4vw;
                width: 100%;
            }

            .hover4 {
                text-decoration: none;
                color: #fff;
                font-weight: 500;
                transition: color 0.3s ease;
                background-color: transparent;
            }

            .hover4:hover .artPortPic {
                display: none;
            }

            .projectPic {
                top: -10vh;
                right: 20vw;
                width: 420%;
            }

            .projectPic2 {
                top: -15vh;
                right: 20vw;
                width: 420%;
            }

            .projectPic3 {
                top: -18vh;
                right: 18vw;
                width: 820%;
            }
        }

        section:last-child {
            grid-column: 3/4;
            grid-row: 2;
            top: 0vh;

            .secondUnderRootLine {
                top: 20vh;
            }
        }
    }

    footer {
        margin: 2em 17% 1em 6%;

        .footLinks {
            width: 24vw;
        }
    }

    /* ABOUT */

    .aboutPage {
        margin: 0 3%;
        display: block;
        height: 100%;

        section {
            height: auto;
            grid-template-columns: 3fr 8fr;
            margin-bottom: 3em;

            h3 {
                margin: 0 0 2em 0;
            }

            p {
                padding-right: 3em;
            }
        }

        .background {
            border-left: none;
            padding-left: 0;
        }

        .stack-container {
            padding-right: 3em;
        }
    }

    .tech {
        margin: 4em 28% 1em 3%;
    }

    /* CV */

    .cbBody {
        main.cvPage {
            margin: 0 3% 3rem;
        }

        .profile {
            grid-column: 1 / -1;
        }

        .languages {
            grid-column: 1;
            grid-row: 4;
        }

        .education {
            grid-column: 1 / -1;
            grid-row: 2;
        }

        .skills {
            grid-column: 2;
            grid-row: 4;

            .skillList {
                grid-template-columns: 1fr;
                gap: 0.5rem 1rem;
            }
        }

        .jobs {
            grid-column: 1 / -1;
            grid-row: 3;
        }

        .hobbies {
            grid-column: 1 / -1;
        }
    }
}

/* ######################## MOBILE ##########################*/

@media (max-width: 580px) {

    /* HOME */

    body {
        font-size: clamp(0.5rem, 2.6vw, 1.2rem);
    }

    nav {
        margin-left: 6%;

        a {
            font-size: clamp(0.7rem, 2.6vw, 1.2rem);
        }
    }

    main {
        height: auto;
        margin: 0 7%;
        display: block;

        section {
            display: block;
            height: 35vh;

            p {
                display: inline-block;
                top: auto;
            }

            .hover2:hover .l-shape {
                display: none;
            }

            .hover2:hover .straight {
                display: none;
            }

            .straightDown {
                top: 15vh;
                left: 10vw;
                width: 180%;
            }

            .straightDown2 {
                display: none;
                top: 67vh;
                left: 9vw;
                width: 120%;
            }

            .hover2:hover .straightDown {
                display: block;
                color: #fff;
            }

            .hover2:hover .straightDown2 {
                display: block;
                color: #fff;
            }

            .hover3:hover .l-shape2 {
                display: none;
            }

            .straightDown3 {
                top: 15vh;
                left: 5vw;
                width: 180%;
            }

            .hover3:hover .straightDown3 {
                display: block;
                color: #fff;
            }

            .hover4 {
                text-decoration: none;
                color: #fff;
                font-weight: 500;
                transition: color 0.3s ease;
                background-color: transparent;
            }

            .hover4:hover .artPortPic {
                display: none;
            }
        }

        section:first-child {
            display: flex;
            height: 50vh;

            p {
                display: static;
                top: 10vh;
            }

            .hover1 {
                position: relative;
            }

            .profilePic {
                display: none;
                position: absolute;
                top: -10vh;
                width: 45vw;
                margin-left: 15vw;
            }

            .hover1:hover .profilePic {
                display: inline-block;
            }
        }

        .underAbove {
            display: grid;
            grid-template-columns: 1fr 1fr;

            .aboveRootLine {
                grid-column: 2;
                grid-row: 1;
                display: inline-block;
                top: auto;
            }

            .underRootLine {
                grid-column: 1;
                grid-row: 1;
                display: inline-block;
                top: auto;
            }
        }

        section:last-child {
            height: 60vh;
            margin-top: 10vh;

            .secondUnderRootLine {
                top: auto;

                .projectList {
                    grid-template-columns: 1fr 6fr 5fr;
                }

                .projectPic {
                    position: absolute;
                    top: 15vh;
                    right: -65vw;
                    width: 90vw;
                }

                .projectPic2 {
                    position: absolute;
                    top: 10vh;
                    right: -63vw;
                    width: 90vw;
                }

                .projectPic3 {
                    position: absolute;
                    top: 8vh;
                    right: -52vw;
                    width: 90vw;
                }
            }
        }
    }

    footer {
        margin: 2em 10% 3em 7%;

        .footLinks {
            width: 35vw;
        }

    }

    /* ABOUT */

    .aboutPage {
        margin: 0 3%;
        display: block;
        height: 100%;

        section:first-child {
            height: auto;
            display: grid;
            grid-template-columns: 3fr 8fr;
        }

        section {
            height: auto;
            display: grid;
            grid-template-columns: 3fr 8fr;
            margin-bottom: 3em;

            h3 {
                margin: 0 0 2em 0;
            }

            p {
                padding-right: 1em;
            }
        }

        section:last-child {
            height: auto;
        }

        .background {
            border-left: none;
            padding-left: 0;
        }

        .stack-container {
            padding-right: 1em;
        }
    }

    .tech {
        margin: 4em 8% 3em 3%;
    }

    /* CV */

    .cvBody {
        .cvPage {
            padding-bottom: 2rem;

            .cvIntro {
                display: grid;
            }

            .cvGrid {
                grid-template-columns: 1fr;
                width: 100%;
                min-width: 0;
                gap: 1rem;

                article {
                    min-height: auto;
                    min-width: 0;
                    width: 100%;
                    font-size: clamp(0.7rem, 3vw, 1rem);
                    overflow-wrap: anywhere;
                    word-break: break-word;

                    p,
                    li,
                    h2,
                    h3 {
                        overflow-wrap: anywhere;
                        word-break: break-word;
                    }
                }

                .languages {
                    grid-row: 5;

                    .languageList {
                        margin: 0;

                        li {
                            grid-template-columns: minmax(0, 1fr);
                            justify-items: start;
                            gap: 0.5rem;
                            text-align: left;

                            .bar {
                                width: 100%;
                            }
                        }
                    }
                }

                .education {
                    grid-row: 2;
                }

                .skills {
                    grid-column: 1;
                    grid-row: 4;

                    .skillList {
                        margin: 0;
                        grid-template-columns: 1fr;
                        gap: 0.35rem 0;
                    }

                    .skillList li {
                        min-width: 0;
                    }
                }

                .jobs {
                    grid-row: 3;
                }

                .hobbies {
                    grid-row: 6;

                    .hobbyList {
                        margin: 0;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        gap: 0.5rem 1rem;
                    }
                }
            }
        }
    }
}

/* ######################## PRINT CV ##########################*/

@media print {
    @page {
        margin: 10mm;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body,
    .cvBody {
        background: #fff !important;
        color: #000 !important;
        font-size: 10pt;
        line-height: 1.35;
    }

    nav,
    .printButton {
        display: none !important;
    }

    main.cvPage {
        margin: 0;
        max-width: none;
    }

    .cvIntro {
        padding: 0 0 8pt;
        margin-bottom: 8pt;
        gap: 0.35rem;
        border-bottom: 1px solid #111;
    }

    .cvIntro h1 {
        max-width: none;
        font-size: 18pt;
        line-height: 1;
    }

    .lead {
        max-width: none;
        font-size: 10.5pt;
    }

    .cvMeta {
        gap: 0.25rem 0.9rem;
        font-size: 9pt;
    }

    .cvGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
        padding-top: 0.85rem;
    }

    .cvGrid article {
        border: 1px solid #ccc;
        padding: 8pt 9pt;
        min-height: auto;
        break-inside: avoid;
        page-break-inside: avoid;
        font-size: 9.5pt;
    }

    .cvGrid article h2 {
        margin-bottom: 0.6rem;
        font-size: 9.5pt;
    }

    .cvGrid article h3 {
        font-size: 9.5pt;
    }

    .profile,
    .education,
    .jobs,
    .hobbies {
        grid-column: 1 / -1;
    }

    .languages {
        grid-column: 1;
    }

    .skills {
        grid-column: 2;
    }

    .cvGrid .skills .skillList {
        margin: 0;
        grid-template-columns: 1fr;
        gap: 0.25rem 0;
    }

    .cvGrid .languages .languageList {
        margin: 0;
    }

    .cvGrid .languages .languageList li {
        grid-template-columns: 3fr 6fr 3fr;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
        justify-items: center;
        font-size: 9.5pt;
    }

    .cvGrid .languages .languageList .bar {
        height: 0.4rem;
    }

    .cvGrid .hobbies .hobbyList {
        margin: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.35rem 0.9rem;
        text-transform: none;
    }

    a {
        color: inherit !important;
        text-decoration: none;
    }
}