@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&family=Inter:wght@500&display=swap');

:root[theme="dark"] {
    --primary-color: #fff;
    --secondary-color: #121212;
    --muted-color: #444;
    --primary-bg: #121212;
    --secondary-bg: #2f2f2f;
    --primary-border: #fff;
    --secondary-border: #777;
    --link-color: #3d6df1;
    --see-trough: rgba(75, 75, 75, 0.3);
    --fade-color: rgb(18, 18, 18, 0.99);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--primary-bg);
    color: var(--primary-color);
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='3440' height='1440' preserveAspectRatio='none' viewBox='0 0 3440 1440'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1044%26quot%3b)' fill='none'%3e%3crect width='3440' height='1440' x='0' y='0' fill='rgba(18%2c 18%2c 18%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c696.82C132.535%2c699.073%2c249.103%2c629.641%2c370.635%2c576.72C515.899%2c513.465%2c692.01%2c487.74%2c781.074%2c356.704C873.355%2c220.934%2c875.09%2c39.897%2c845.224%2c-121.525C816.024%2c-279.35%2c727.385%2c-418.177%2c616.277%2c-534.007C509.025%2c-645.818%2c368.108%2c-707.33%2c225.412%2c-767.683C65.204%2c-835.443%2c-105.963%2c-974.512%2c-266.419%2c-907.341C-430.047%2c-838.842%2c-407.831%2c-588.104%2c-523.932%2c-453.989C-639.945%2c-319.976%2c-902.366%2c-308.634%2c-935.457%2c-134.498C-968.137%2c37.474%2c-779.169%2c169.778%2c-668.191%2c305.153C-581.777%2c410.563%2c-480.218%2c495.329%2c-362.626%2c564.257C-249.301%2c630.684%2c-131.34%2c694.588%2c0%2c696.82' fill='%230e0e0e'%3e%3c/path%3e%3cpath d='M3440 2602.736C3660.547 2643.752 3891.341 2557.0519999999997 4076.399 2430.256 4258.657 2305.379 4404.049 2119.21 4458.287 1905.036 4508.846 1705.3899999999999 4392.265 1511.138 4360.696 1307.624 4329.579 1107.027 4377.974 891.67 4274.045 717.296 4161.853 529.057 3987.067 345.85300000000007 3769.918 316.40200000000004 3554.864 287.2349999999999 3382.76 481.462 3184.402 569.514 3016.796 643.915 2822.38 662.608 2694.321 793.865 2562.7380000000003 928.7339999999999 2501.751 1114.78 2471.044 1300.685 2439.866 1489.443 2431.105 1690.622 2518.053 1861.039 2603.532 2028.576 2792.937 2100.923 2939.484 2218.818 3106.702 2353.343 3229.005 2563.496 3440 2602.736' fill='%23161616'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1044'%3e%3crect width='3440' height='1440' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

.container {
    max-width: 1300px;
    margin: auto;
    padding: 0 50px;
    padding-bottom: 45px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    height: 80px;
    width: 500px;
    z-index: 50;
    position: relative;
}

nav a, 
a {
    text-decoration: none;
    color: var(--link-color);
}

nav a {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 5px 20px;
    margin-right: 5px;
    transition: all 0.3s ease;
    border-radius: 5px;
    border: var(--primary-bg) 1px solid;
}

nav a:hover {
    border: var(--link-color) 1px solid;
}

.currentPage {
    background-color: var(--link-color);
    color: var(--primary-bg);
    border: var(--link-color) 1px solid;
}

#dropdownButton {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 50;
    background-color: var(--primary-bg);
    color: var(--link-color);
    border: var(--link-color) 1px solid;
    border-radius: 8px;
    padding: 5px 10px;
    width: 50px;
}

#dropdownContent {
    position: fixed;
    top: 60px;
    right: 0px;
    width: 40%;
    flex-direction: column;
    background-color: var(--secondary-bg);
    border-radius: 10px;
}

#dropdownContent a {
    padding: 8px 20px;
    border: none;
    border-bottom: var(--primary-bg) 1px solid;
    color: var(--primary-color);
}

#indexContainer {
    height: 80vh;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.content h1 {
    font-size: 5rem;
    font-weight: 500;
    margin-bottom: 20px;
    font-family: 'Exo 2', sans-serif;
}

.content h2, .content h3 {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 30px;
    font-family: 'Exo 2', sans-serif;
}

.content h3 {
    font-size: 2rem;
}

.content p, .content li {
    font-size: 1.2rem;
    font-family: 'Inter', sans-serif;
}

#indexHello {
    font-size: 1.5rem;
    width: 95%;
    margin-bottom: -70px;
    text-align: right;
}

#name {
    font-size: 15rem;
    text-align: right;
}

#indexText {
    font-size: 1.5rem;
    width: 95%;
    text-align: right;
}

footer {
    color: var(--muted-color);
    position: absolute;
    bottom: 0;
    left: 45%;
    font-size: 0.8rem;
    width: 200px;
    padding-bottom: 5px;
    text-align: center;
}

.bold {
    font-weight: bold;
}

/* stage page */

#stageContainer {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

#stageContainer h3 {
    text-align: center;
}

#stageContainer img {
    max-width: 400px;
    width: auto;
    height: 100%;
    margin-left: 20px;
}

#stageFiles {
    margin-top: 40px;
}

/* project page */

#projectList {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
    transition: all 0.3s ease;
}

.project h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

.projectDescription {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin: 20px 0;
    padding: 0 10px;
}

.projectDescription h3 {
    text-align: center;
    font-size: 1.5rem;
}

.projectDescription h3, 
.projectDescription p {
    margin-bottom: 10px;
}

.projectDescription>div {
    margin-bottom: 10px;
}

.projectImage {
    width: 60%;
}

#legacyLinkImages {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10px;
    gap: 30px;
}

figure {
    margin: 0;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

figure img {
    max-width: 600px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

figcaption {
    text-align: center;
    color: var(--muted-color);
    font-style: italic;
}

.contextList {
    padding-left: 20px;
}

.descriptionText {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.descriptionText > div {
    display: flex;
    justify-content: center;
}

.more {
    font-size: 1.1rem;
    padding: 5px 100%;
    color: var(--primary-color);
    background-color: transparent;
    transition: all 0.4s ease;
    cursor: pointer;
    border: none;
}

.more:hover {
    font-weight: bold;
}

div>.more {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

fade {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    height: 70px;

    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            var(--fade-color) 100%);
}

/* projects - modal */

#descriptionModal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--see-trough);
    overflow: auto;
}

.modalContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-bg);
    margin: 5% auto 0 auto;
    padding: 20px;
    border-radius: 10px;
    width: 60%;
    max-width: 1000px;
    height: fit-content;
    overflow: auto;
    animation: fadeIn 0.3s ease-in both;
}

.modalContent h2 {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    font-family: 'Exo 2', sans-serif;
}

.modalContent p {
    font-size: 1.2rem;
    font-family: 'Inter', sans-serif;
    margin-bottom: 10px;
}

button#closeButton {
    margin: 10px;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: var(--primary-bg);
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -5%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* about me */

#aboutMe {
    flex-wrap: wrap;
    flex-direction: row;
    height: 80vh;
}

#aboutMe section {
    padding: 20px;
}

section#profile {
    text-align: center;
    width: 40%;
    /* height: 90%; */
    border-right: solid 1px var(--secondary-border);
}

#profilePicture {
    max-width: 300px;
    max-height: 300px;
    width: 100%;
    height: 100%;
    border-radius: 500px;
    margin: 20px 0;
    object-fit: cover;
    border: solid 2px var(--primary-border);
}

#profileIcons {
    font-size: 1.5rem;
    margin-top: 10px;
}

#profileIcons a {
    padding: 8px;
    margin: 2px;
}

section#text {
    width: 60%;
}

#text h2 {
    margin-top: 20px;
    margin-bottom: 8px;
}

#cv {
    display: flex;
    height: 40px;
    align-items: center;
}

#cvLink {
    padding: 10px;
    margin-top: 10px;
    margin: 10px;
    border: solid 1px var(--link-color);
    border-radius: 50px;
}

#cvDownload {
    margin: 10px;
}

/* scroll bar */

::-webkit-scrollbar-button {
    display: none;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--link-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

@media screen and (max-width: 1000px) {
    h1#name {
        font-size: 9rem;
    }

    #indexHello {
        margin-bottom: -40px;
    }

    /* stage page */

    #stageTitleFull {
        font-size: 4rem;
    }

    #stageContainer {
        flex-direction: column;
    }

    #stageContainer img {
        max-width: 300px;
        margin-top: 20px;
    }

    /* projects page */

    .project {
        padding-left: 0px;
        padding-right: 0px;
        flex-direction: column;
    }

    .projectDescription {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .projectImage {
        width: auto;
    }

    /* about me page */

    #aboutMe {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
    }

    section#profile {
        width: auto;
        border-right: none;
    }

    #profilePicture {
        max-width: 200px;
        max-height: 200px;
    }

    section#text {
        width: auto;
    }
}

@media screen and (max-width: 576px) {
    nav {
        display: none;
    }

    #dropdownButton {
        display: block;
    }

    h1#name {
        font-size: 4rem;
    }

    #indexHello {
        font-size: 1.2rem;
        margin-bottom: -10px;
    }

    footer {
        left: 25%;
    }

    /* stage page */

    #stageTitle {
        display: none;
    }

    #stageContainer img {
        max-width: 200px;
    }

    #stageFiles {
        display: flex;
        flex-wrap: wrap;
    }

    #stageFiles a {
        width: 42%;
    }

    /* projects page */

    .projectImage {
        display: none;
    }

    #legacyLinkImages {
        display: none;
    }

    .modalContainer {
        width: 90%;
    }
}