:root {
    --color-mediterraneanLight: #0166FF;
    --color-shellWhite: #FFFCFF;
    --color-softerGrey: #EFF2F5;
    --color-volcanoSand: #141414;
    --color-secondary-mediterraneanLight-300: #C9DEFF;

    --nav-height: 3.25rem
}

html{
    scroll-behavior: smooth;
}

h1{
    font-family: "IBM Plex Serif";
    font-size: 84px;
    font-weight: 600;
    line-height: 96px;
    letter-spacing: -0.02em;
    text-align: left;

    margin-bottom: 1.25rem;

    color: var(--color-mediterraneanLight, #0166FF);
}

h2 {
    /* Desktop/Title L */
    font-family: "IBM Plex Serif";
    font-size: 3.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 3.75rem; /* 115.385% */
    color: var(--color-mediterraneanLight, #0166FF);
}

h3 {
    color: var(--color-volcanoSand, #141414);

    /* Desktop/Paragraph L Bold */
    font-family: Montserrat;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.25rem; /* 128.571% */
}

h4{
    color: var(--color-mediterraneanLight, #0166FF);
    text-align: center;

    /* Desktop/Title M */
    font-family: "IBM Plex Serif";
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

p{
    color: var(--color-volcanoSand, #141414);
    /* Desktop/Paragraph M */
    font-family: Montserrat;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem; /* 160% */
    letter-spacing: -0.025rem;
}

.paragraph p{
    margin-bottom: 1.25rem;
    max-width: 44rem;
}

body{
    padding: 0 2rem 0 2rem;
    background: var(--color-shellWhite, #FFFCFF);
    max-width: 1440px;
    margin: 0 auto;
}



/* ======== Nav ======== */
nav {
    display: flex;
    max-width: 75rem;
    min-width: 20.5rem ;
    height: var(--nav-height);
    padding: var(--spacing-spacing-3xs, 0.5rem) var(--spacing-spacing-2xs, 1rem);
    justify-content: space-between;
    align-items: center;
    align-content: center;
    
    border-radius: var(--borderRadius-borderRadius-xs, 0.5rem);
    background: #141414c0;
    background: 0.5;
    backdrop-filter: blur(12px);
    box-shadow: 0px 0px 10px 0px rgba(1, 102, 255, 0.10);
    z-index: 100;

    position: fixed;
    bottom: 1.5rem;
    right: calc(50vw - calc(360px/2));

    font-family: Montserrat;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: -0.02rem;
}

nav img {
    margin-top: 0.25rem;
}

nav ul{
    display: flex;
    gap: 0.05rem;
}

nav ul a{
    padding: 0.25rem;
    justify-content: center;
    align-items: center;
}

nav ul a:hover li{
    background: var(--color-secondary-mediterraneanLight-300);
    color: var(--color-mediterraneanLight);
    transition: 150ms;
}

nav ul li {
    padding: 0.5rem;
    color: var(--color-shellWhite);
    border-radius: 0.125rem;
}

.active {
    background: var(--color-mediterraneanLight, #0166FF);
    color: var(--color-shellWhite, #FFFCFF);
}

/* ======== Project Card ======== */

.project-card{
    display: flex;
    flex: 1 1 calc(50% - 1rem);
    flex-direction: column;
    max-width: 43rem;
    min-width: 20.5rem;
    min-height: 37.5rem;
    padding-top: 1.5rem;
    justify-content: space-between;

    border-radius: var(--borderRadius-borderRadius-xs, 0.5rem);
    background: var(--color-softerGrey, #EFF2F5);

    color: var(--color-mediterraneanLight, #0166FF);

    overflow: hidden;

    transition: 100ms;
}



.project-card-title-row {
    display: flex;
    min-height: 10rem;
    padding: var(--spacing-spacing-false, 0rem) var(--spacing-spacing-xs, 1.5rem);
    align-items: top;
    gap: var(--spacing-spacing-xl, 1rem);
    align-self: stretch;
    margin-bottom: 4rem;
    justify-content: space-between;

    transition: 100ms;
    
}

.project-card-title-row p {
    margin-top: 0.75rem;
    max-width: 32rem;

    /* Desktop/Paragraph S Bold */
    font-family: Montserrat;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.02rem;

    color: var(--color-mediterraneanLight, #0166FF);

    transition: 100ms;
}

.project-card-thumbnail {
    height: 26.75rem;
}

.project-card-thumbnail img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit:contain;
    border-radius: 0 0.5rem 0.5rem 0;
    object-position: bottom;

    transition: 300ms;
}

.project-card:hover{
    background: linear-gradient(#141414, #141414f3);
    color: var(--color-shellWhite);
    transition: 100ms;
}

.project-card:hover h2{
    color: var(--color-shellWhite);
    transition: 100ms;
}

.project-card:hover p{
    color: var(--color-shellWhite);
    transition: 100ms;
}

.project-card:hover .project-card-thumbnail img{
    transform: scale(1.25) translate(0, -2rem);
    transition: 300ms;
}

.project-card-title-row svg{
    transition: 300ms;
}

.project-card:hover .project-card-title-row svg{
    transform: scale(2) translate(-1rem, 1rem);
    fill: var(--color-mediterraneanLight);
    transition: 300ms;
}

.project-card:hover .project-card-title-row #arrow{
    stroke: var(--color-shellWhite);
    transition: 50ms;
}


.project-card-small{
    display: flex;
    flex: 1 2 50%;
    flex-direction: column;
    max-width: calc(100% - 1rem);
    max-height: 10rem;
    min-width: 20.5rem;
    padding-top: 1.5rem;
    justify-content: space-between;

    border-radius: var(--borderRadius-borderRadius-xs, 0.5rem);
    background: var(--color-softerGrey, #EFF2F5);
}

.project-card-small:hover{
    background: linear-gradient(#141414, #141414f3);
    color: var(--color-shellWhite);
    transition: 100ms;
}

.project-card-small:hover h2{
    color: var(--color-shellWhite);
    transition: 100ms;
}

.project-card-small:hover p{
    color: var(--color-shellWhite);
    transition: 100ms;
}

.project-card-small-title-row svg{
    transition: 300ms;
}

.project-card-small:hover .project-card-small-title-row svg{
    transform: scale(2.75) translate(-1rem, 1rem);
    fill: var(--color-mediterraneanLight);
    transition: 300ms;
}

.project-card-small:hover .project-card-small-title-row #arrow{
    stroke: var(--color-shellWhite);
    transition: 50ms;
}

.project-card-small-title-row {
    display: flex;
    min-height: 3rem;
    padding: var(--spacing-spacing-false, 0rem) var(--spacing-spacing-xs, 1.5rem);
    align-items: top;
    gap: var(--spacing-spacing-xl, 1rem);
    align-self: stretch;
    margin-bottom: 4rem;
    justify-content: space-between;
    
}

.project-card-small-title-row img{
    height: 3rem;
}

.project-card-small-title-row h2{
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-bottom: 0.5rem;
}

.project-card-small-title-row p{
    font-size: 1rem;
    line-height: 1.25rem;
    max-width: 20rem;
}


.section-more-projects{
    display: flex;
    max-width: 90rem;
    padding: var(--spacing-spacing-xl, 4rem) 7.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-spacing-m, 2rem);
    align-self: stretch;
    margin-bottom: 4rem;

}


.project-card-container{
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;

}


/* ======== Footer ======== */
footer{
    display: flex;
    padding: 2rem 4rem 16rem 4rem;
    justify-content: space-between;
    position:static;
    max-width: 100% ;
    right: calc(50vw - calc(1022px/2));
    margin-top: 0;
    margin-bottom: calc(var(--nav-height) + 3.5rem);
    margin-right: auto;
    margin-left: auto;

    background: var(--color-softerGrey);
    border-radius: 0.5rem;
}

.footer-social-links{
    display: flex;
    gap: 1.5rem;
}

.project-section-title{
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.project-section-title-text{
    display: flex;
    gap: var(--spacing-spacing-m, 2rem);
    align-self: stretch;
    align-items: center;
    padding: var(--spacing-spacing-false, 0rem) 7.5rem;
    flex-wrap: wrap-reverse;
}

.project-section-title-text h1{
    color: var(--color-mediterraneanLight, #0166FF);

    /* Desktop/Title XL */
    font-family: "IBM Plex Serif";
    font-size: 5.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 6rem; /* 114.286% */
    letter-spacing: -0.105rem;
}

.project-main-data-chip{
    display: flex;
    padding: 0.5rem var(--spacing-spacing-2xs, 0.75rem);
    justify-content: center;
    align-items: center;
    height: 1.75rem;
    border-radius: 6.25rem;
    background: var(--color-secondary-mediterraneanLight-300, #C9DEFF);
    margin-top: 2rem;
}

.project-main-data-chip p{
    color: var(--color-mediterraneanLight, #0166FF);
    text-align: center;
    font-weight: 700;
}

.project-main-data-chip-disabled{
    display: flex;
    padding: 0.5rem var(--spacing-spacing-2xs, 0.75rem);
    justify-content: center;
    align-items: center;
    height: 1.75rem;
    border-radius: 6.25rem;
    background: var(--color-softerGrey);
    margin-top: 2rem;
}

.project-main-data-chip-disabled p{
    color: var(--color-secondary-mediterraneanLight-300);
    text-align: center;
    font-weight: 700;
}

.project-chip-container{
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: var(--spacing-spacing-false, 0rem) 7.5rem;
    margin-bottom: 7.25rem;
    flex-wrap: wrap;
}

.project-chip{
    display:flexbox;
    padding: var(--spacing-spacing-3xs, 0.5rem) var(--spacing-spacing-2xs, 1rem);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-spacing-3xs, 0.5rem);
    width: fit-content;

    border-radius: var(--borderRadius-borderRadius-2xs, 0.25rem);
    border: 2px solid var(--color-mediterraneanLight, #0166FF);
}

.project-chip p{
    color: var(--color-mediterraneanLight, #0166FF);
}

.project-section-image-container{
    display: flex;

    align-self: stretch;
    align-items: center;

    border-radius: 1.75rem;
    background: var(--color-softerGrey, #EFF2F5);
}

.project-section-image-container img{
    width: 100%;
    margin: 0 auto;
    border-radius: 1.75rem;
}

.project-section{
    display: flex;
    max-width: 90rem;
    padding: var(--spacing-spacing-xl, 4rem) 7.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-spacing-m, 2rem);
    align-self: stretch;
}

.project-section-image{
    background: var(--color-softerGrey);
    border-radius: 1.75rem;
    display: flex;
    align-items: center;
    padding: 1.75rem;
    
}

.project-section-image img{
    display: block;
    min-width: 80%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;    
}

.project-subsection{
    display: flex;
    max-width: 57rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
}

.project-subsection h3{
    max-width: 48rem;
}

.project-subsection-prototype{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-spacing-2xs, 1rem);
}

.project-subsection-prototype p{
    color: var(--color-mediterraneanLight, #0166FF);
    font-weight: 700;
}

.prototype-button-container {
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-spacing-2xs, 1rem) var(--spacing-spacing-3xs, 0.5rem);
    flex-wrap: wrap;
    
}

.button-secondary{
    display: flex;
    align-items: center;
    padding: var(--spacing-spacing-2xs, 0.75rem) var(--spacing-spacing-xs, 1.5rem);
    gap: var(--spacing-spacing-3xs, 0.5rem);
    

    background-color: var(--color-shelWhite);
    border: 1px solid var(--color-mediterraneanLight, #0166FF);
    border-radius: 6.25rem;
    cursor: pointer; 

    color: var(--color-mediterraneanLight, #0166FF);
}

.button-secondary span{
    font-family: Montserrat;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2rem; /* 160% */
    letter-spacing: -0.025rem;

    word-break: break-word;
}

.buttonbutton-secondary:hover{
    margin: 1px;

}

.button-secondary:hover{
    background:linear-gradient(0.80turn, var(--color-mediterraneanLight), #0167ffcb);
    color: var(--color-shellWhite);
    transition: 50ms
}

.button-secondary:hover svg{
    transform: matrix3d(1,1,1);
}

.button-secondary:hover path{
    stroke: var(--color-shellWhite);
    stroke-width: 2px;
}


.background-white{
    background-color: var(--color-shellWhite);
}

@media (width <= 950px) {
    h1{
        font-size: 3.25rem;
        line-height: 3.75rem;
    }

    h2 {
        /* Mobile/Title L */
        font-size: 2.25rem;
        line-height: 2.938rem;
    }
    
    p{
        /* Mobile/Paragraph M */
        font-size: 1rem;
        line-height: 1.25rem; 
    }
    
    body{
        padding: 1rem;
        overflow-x: hidden;    
    }

    nav {
        max-width: none;
        min-width: 300px;
        right: auto;

        right: calc(50vw - calc(332px/2));
    }

    nav ul li{
        padding: 0.25rem
    }

    nav img {
        height: 1rem;
    }

    .button-secondary span{
        font-size: 1rem;
        line-height: 1.25rem;
        text-align: left;
    }

    .project-card{
        display: flex;
        flex: 10;
        width: 100%;
        height: 100%;
        min-height: 25rem;
    }

    .project-card aside {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .project-card svg {
        width: 44px;
        height: 44px;
        margin-top: 8px;
    }

    .project-card path{
        stroke-width: 2px;
    }

    .project-card-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit:cover;
    }

    #uncovercity img, #ee img{
        object-fit: contain;
        object-position: center;
    }

    .project-section-title{
        margin-top: 2rem;
        gap: 1rem;
        max-width: 100%;
    }

    .project-card-title-row {
        min-height: 5.69rem;
        padding: var(--spacing-spacing-false, 0rem) var(--spacing-spacing-xs, 1.5rem);
        align-items: flex-start;
        gap: var(--spacing-spacing-xl, 1rem);
        align-self: stretch;
        margin-bottom: 1rem;
        justify-content: space-between;
        
    }

    .project-section-title-text h1{
        width: 100%;
    }

    .project-main-data-chip{
        display: flex;
        padding: 0.5rem var(--spacing-spacing-2xs, 0.75rem);
        justify-content: center;
        align-items: center;
        height: 1.25rem;
        border-radius: 6.25rem;
        background: var(--color-secondary-mediterraneanLight-300, #C9DEFF);
        margin-top: 0rem;
    }
    
    .project-main-data-chip p{
        font-size: 1rem;
        line-height: 1rem;
        
    }

    .project-main-data-chip-disabled{
        display: flex;
        padding: 0.5rem var(--spacing-spacing-2xs, 0.75rem);
        justify-content: center;
        align-items: center;
        height: 1.25rem;
        border-radius: 6.25rem;
        background: var(--color-softerGrey);
        margin-top: 0rem;
        color: var(--color-secondary-mediterraneanLight-300);
    }

    .project-main-data-chip-disabled p{
        font-size: 1rem;
        line-height: 1rem;
        
    }

    .project-chip-container{
    display: flex;
    gap: 0.5rem 0.25rem;
    align-items: flex-start;
    padding: var(--spacing-spacing-false, 0rem) 0rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    }

    .project-section{
        width: 100%;
        padding: var(--spacing-spacing-xl, 2.75rem) 0rem;
        gap: 2rem;
    }

    .project-section-image{
        margin-bottom: 2.75rem;
        margin-top: -1.25rem;
        padding: 0.25rem;
        overflow: hidden;
    }

    .project-subsection{
        width: 100%;
    }

    .project-subsection h2{
        font-size: 1.75rem;
        line-height: 2.25rem;
    }

    .project-subsection h3{
        font-size: 1.25rem;
        line-height: 1.5rem;
    }
    
    .paragraph p{
        margin-bottom: 0.25rem;
    }

    .section-more-projects{
        width: 100%;
        padding: var(--spacing-spacing-xl, 2rem) 0rem;
        gap: var(--spacing-spacing-m, 1rem);
        overflow: hidden;
        
    }

    .section-more-projects h4{
        font-size: 1.75rem;
        line-height: normal;
        
    }

    .project-card-container{
        display: flex;
        flex: 0 100%;
        gap: 0.75rem;
        margin-bottom: 4rem;
    }
    
    

    

    .project-section-title-text{
        display: flex;
        gap: 0;
        align-self: stretch;
        align-items: center;
        padding: var(--spacing-spacing-false, 0rem) 0rem;
        flex-wrap: wrap-reverse;
    }

    .project-section-title-text h1{
        font-size: 2.25rem;
        line-height: 3rem;
    }

    .section-more-projects-cards-wrapper{
        max-width: 100%;
    }
    
    footer{
        display: flex;
        height: 12rem;
        padding: 2rem 2rem 2rem 2rem;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        
    }
}