/* @font-face {
    font-family: "Nohemi";
    src: url(/Nohemi-VF.ttf);
} */

/* Light */

@font-face {
    font-family: 'NohemiLight';
    src: url('assets/fonts/web-tt/Nohemi-Light.eot'); /* IE9 Compat Modes */
    src: url('assets/fonts/web-tt/Nohemi-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('assets/fonts/web-tt/Nohemi-Light.woff') format('woff'), /* Modern Browsers */
         url('assets/fonts/web-tt/Nohemi-Light.woff2') format('woff2'), /* Modern Browsers */
         url('assets/fonts/web-tt/Nohemi-Light.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: light;
    /* text-rendering: optimizeLegibility; */
}

/* Regular */

@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/web-tt/Nohemi-Regular.eot'); /* IE9 Compat Modes */
    src: url('assets/fonts/web-tt/Nohemi-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('assets/fonts/web-tt/Nohemi-Regular.woff') format('woff'), /* Modern Browsers */
         url('assets/fonts/web-tt/Nohemi-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('assets/fonts/web-tt/Nohemi-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
}

/* Medium */

@font-face {
    font-family: 'NohemiMed';
    src: url('assets/fonts/web-tt/Nohemi-Medium.eot'); /* IE9 Compat Modes */
    src: url('assets/fonts/web-tt/Nohemi-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('assets/fonts/web-tt/Nohemi-Medium.woff') format('woff'), /* Modern Browsers */
         url('assets/fonts/web-tt/Nohemi-Medium.woff2') format('woff2'), /* Modern Browsers */
         url('assets/fonts/web-tt/Nohemi-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: medium;
    /* text-rendering: optimizeLegibility; */
}

/* Bold */

@font-face {
    font-family: 'Nohemi';
    src: url('Nohemi-Bold.eot'); /* IE9 Compat Modes */
    src: url('Nohemi-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Nohemi-Bold.woff') format('woff'), /* Modern Browsers */
         url('Nohemi-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('Nohemi-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: bold;
    /* text-rendering: optimizeLegibility; */
}

/* Black */

@font-face {
    font-family: 'NohemiBlack';
    src: url('assets/fonts/web-tt/Nohemi-Black.eot'); /* IE9 Compat Modes */
    src: url('assets/fonts/web-tt/Nohemi-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('assets/fonts/web-tt/Nohemi-Black.woff') format('woff'), /* Modern Browsers */
         url('assets/fonts/web-tt/Nohemi-Black.woff2') format('woff2'), /* Modern Browsers */
         url('assets/fonts/web-tt/Nohemi-Black.ttf') format('truetype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: 700;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: auto;
    letter-spacing: 0.1rem;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* font-family: 'Nohemi'; */
    font-weight: 400;
    padding: 2.5rem;
    height: 100vh;

    cursor: url(assets/cursors/fill-cursor.svg) 10 10, auto;
}
/* .blur{
    filter: blur(5px);
} */
h1 {
    font-family: 'NohemiBlack';
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: 900;
}
h1 a {
        letter-spacing: 0.5rem;

}

h2 {
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;

}

p {
    font-weight: 400;
}
.coming-soon{
    position: absolute;
    top: 53%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'NohemiBlack';
    font-size: 5vw;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4rem;
    white-space: nowrap;
}

ul {
    list-style: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

img {
    width: 100%;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: black;

}

.close-portfolio {
    /* font-weight: 600; */
    opacity: 0;
    transition: 800ms;
}

#x {
    width: 17px;
    cursor: url(assets/cursors/stroke-cursor.svg) 10 10, auto;

}

a {
    color: black;
    text-decoration: none;
    cursor: url(assets/cursors/stroke-cursor.svg) 10 10, auto;


}

button {
    font-family: 'Nohemi';
    background-color: white;
    font-weight: 400;
    border: none;
    cursor: pointer;
    padding-bottom: 0.1rem;
    cursor: url(assets/cursors/stroke-cursor.svg) 10 10, auto;

}

.landing-content {
    display: block;
}

.mobile-menu-buttons {
    display: none;

}

.mobile-project-list {
    display: none;
}

.portfolio {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    transition: grid-template-columns 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

.project-list {
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    align-items: flex-start;
    transition: 1000ms;
    opacity: 0;
}

.hideProjectList {
    display: none;
}

.job {
    padding-bottom: .5rem;
    overflow-x: hidden;
}

.imgSection {
    aspect-ratio: 16/9;
    cursor: url(assets/cursors/stroke-cursor.svg) 10 10, auto;

}

.hideOverflow {
    overflow: hidden;
}

.work {
    overflow: hidden;
}


.covers picture {
    width: 100%;
    display: none;
}

.projects {
    display: none;
}

.project {
    display: none;
}

.scrollable-image-container {
    display: block;
    height: auto;
}

.scrollable-image-container img {
    margin-bottom: 0.75rem;
}

.scrollable-image-container img:last-child {
    margin-bottom: 0;
}

.about-modal {
    display: none;
    font-size: 1rem;
    aspect-ratio: 16/9;
}



/* Column 3 */

.about {

    grid-column: 3;
    justify-self: flex-end;
    display: none;
}

.about-img {
    width: 100%;
}

.project-info {
    grid-column: 3;
    display: none;

}

.description {
    padding-left: 1rem;
    display: none
}

.description p {
    font-size: 0.75rem
}

/* Footer */

footer {
    font-family: 'Nohemi';
    display: flex;
    justify-content: space-between;
    height: max-content;
    
}





/* Transitions */

.cover.active {
    display: grid;
    /* Show the active image */
}



.hide-covers {
    display: none;
}


.portfolio-open {
    grid-template-columns: 0% 60% 40%;
    transition: grid-template-columns 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

.show-close-button {
    opacity: 1;
}

.job.hide-titles {
    display: none;
}

.job.activeTitle {
    font-weight: 700;
    text-transform: uppercase;
}

.displayProjects {
    display: grid;
    grid-template-rows: 1fr;

}

.project.displayActiveProject {
    display: grid;

}

.hideAbout {
    display: none;
}

.showProjectInfo {
    display: block;
}

.showDescription {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}




.showAboutModal {
    display: grid;
    grid-template-columns: 1.1fr 0.5fr;
    gap: 1rem;
    overflow: hidden;


}





.highlightAboutButton {
    font-weight: 700;
}

.filters {
    font-weight: 500;
}

.filters li {
    padding-block: .25rem;
}

.contact {
    font-weight: 500;
}

.contact li {
    padding-block: .25rem;
}

.contact-page {
    display: flex;
    flex-direction: column;
}

.bc {
    text-align: center;
    margin: auto;
    width: 40%;

}

.bc img {
    margin-bottom: 1.5rem;
}

.close-contact {
    display: flex;
    font-weight: 600;
}







/* Mobile */

@media (width <=450px) {
    body {
        padding: 0;
        padding-top: 2rem;
        overflow: visible;
    }

    h1 {
        /* font-size: 2.5rem; */
        font-size: 9vw;
        text-align: center;
        padding-bottom: 1.5rem;
    }
    h1 a{

        letter-spacing: 0.3rem;
    }


    button {
        font-weight: 400;
        text-transform: uppercase;
    }

    .close-portfolio {
        display: none;
    }

    .mobile-menu-buttons {
        display: flex;
        padding: 1rem;
        justify-content: space-between;
    }
    .landing-content{
        position: relative;
    }

    .imgSection {
        /* position: relative; */
        aspect-ratio: 0;
    }
    .coming-soon{
        position: absolute;
        display: block;
        font-size: 9vw;
    }

    .mobile-project-list {
        display: none;
        padding: 1rem;
        position: absolute;
        background-color: white;
        padding-top: 0;
        z-index: 10;
    }

    .mobile-project-list li {
        padding-block: .25rem;
    }

    .displayMobileProjectList {
        display: block;
    }

    /* Mobile Project Pages */

    .project-page {
        display: block;
    }

    .project-page img {
        margin-bottom: 0.5rem;
    }

    .project-page img:last-child {
        margin-bottom: 0;
    }

    .mobile-project-info {
        padding: 1rem;
    }

    .mobile-project-title {
        margin-bottom: 1rem;
    }

    .back-button {
        font-size: 12px;
        padding-left: 1rem;
    }

    .project-list {
        display: none;
    }

    .about {
        display: none;
    }

    .portfolio {
        grid-template-columns: 1fr;
    }

    .close-contact {
        margin-left: 1rem;
    }

    .bc {
        margin: auto;
        width: 95%;
    }

    footer {
        margin-top: auto;
        padding: 1rem;
    }

    /* Mobile About Page */
    .about-page-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

    }

    .about-footer {
        margin-top: auto;
        padding: 1rem;
    }


    /* Mobile Contact Page */
    .contact-page {
        align-items: flex-start;
        margin-block: auto;
    }

    .contact-footer {
        margin: 0;
    }
}