@font-face {
    font-family: 'Inter';
    src: url(src/fonts/Inter-Regular.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url(src/fonts/Inter-Bold.woff2) format("woff2");
    font-weight: bold;
    font-style: normal;
}

html {
    margin: 0;
    font-size: 62.5%;
}

body {
    margin:1.4rem;
    display: flex;
    align-self: baseline;
}

h1,h2,h3,h4,h5,h6,p {
    margin: 0;
    padding: 0;
    font-family: Inter;
}

p {
    font-size: 1.4rem;
}

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

img {
    width: 100%;
    object-fit: cover;
    display: block;
}

video {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    pointer-events: none;

}

.home-img {
    height: 100%;
}

header {
    display: flex;
    width: calc(16.66vw - 1.4rem);
    padding-right: 1.4rem;
    position: sticky;
    top: 1.4rem;
    left: 1.4rem;
    height: 100%;
}

.info {
    position: sticky;
    top: 0;
}

.cv-link:hover,.contact-link:hover,.project-link:hover{
    border-radius: 2rem;
    padding: .8rem;
    z-index: 4;
    font-weight: bold;
}

.cv-link:hover {
    background-color: aquamarine;
}

.contact-link:hover {
    background-color: black;
    color: white;
}

.mobile-break {
    display:none;
}

.project-grid,.project-subgrid-bottom,.project-subgrid-top {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1.4rem;
    width: 100%;
}

.project-subgrid-bottom,.project-subgrid-top {
    scroll-margin-top:1.4rem;
    grid-column: 1 / span 10;
}

.project-subgrid-bottom {
    align-items: end;
}

.cv-grid {
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: calc(100vw - 2.8rem);
    height: calc(100vh - 2.8rem);
    gap: 1.4rem;
}

.home-img-wrapper {
    grid-column: 1 / span 10;
    height: calc(100vh - 2.8rem);
    width: 100%;
    overflow: hidden;
}

.img-wrapper-10 {
    grid-column: 1 / span 10;
    scroll-margin-top:1.4rem;
}

.img-wrapper-9 {
    grid-column: span 9;
}

.img-wrapper-8 {
    grid-column: span 8;
}

.img-wrapper-7 {
    grid-column: span 7;
}

.img-wrapper-5 {
    grid-column: span 5;
}

.img-wrapper-4 {
    grid-column: span 4;
}

.img-wrapper-3 {
    grid-column: span 3;
}

.img-wrapper-2 {
    grid-column: span 2;
}

.img-wrapper-1 {
    grid-column: span 1;
}

.placeholder-4 {
    grid-column: span 4;
}

.placeholder-3 {
    grid-column: span 3;
}

.placeholder-2 {
    grid-column: span 2;
}

.project-title {
    grid-column: 5 / span 6;
    width: fit-content;
    align-self: flex-start;
    position: sticky;
    top: 1.4rem;
    padding: 1rem;
    border-radius: 5rem;
    font-weight: bold;
}

.project-desc-grid {
    grid-column-start: 1;
    grid-column-end: 11;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1.4rem;
    width: 100%;
    padding-bottom: 33.8rem;
}

.project-desc {
    grid-column: span 3;
}

.type {
    grid-column: span 3;
}

#looking,#looking-img {
    grid-row-start: 2;
}

#looking {
    z-index: 1;
    background-color: yellow;
    color: black;
}

#looking-nav:hover {
    z-index: 3;
    background-color: yellow;
    color: black;
}

#sabcp,#sabcp-img {
    grid-row-start: 14;
}

#sabcp {
    z-index: 2;
    background-color: blueviolet;
    color: white;
}

#sabcp-nav:hover {
    z-index: 3;
    background-color: blueviolet;
    color: white;
}


#keno,#keno-img {
    grid-row-start: 28;
}

#keno {
    z-index: 3;
    background-color: lawngreen;
}

#keno-nav:hover {
    z-index: 3;
    background-color: lawngreen;
    color: black;
}

#della,#della-img {
    grid-row-start: 41;
}

#della {
    z-index: 4;
    background-color: dodgerblue;
    color: white;
}

#della-nav:hover {
    z-index: 3;
    background-color: dodgerblue;
    color: white;
}


#mercury,#mercury-img {
    grid-row-start: 44;
}

#mercury {
    z-index: 5;
    background-color: lightgrey;
}

#mercury-nav:hover {
    z-index: 3;
    background-color: lightgrey;
    color: black;
}

#holiday,#holiday-img {
    grid-row-start: 53;
}

#holiday {
    z-index: 6;
    background-color: deeppink;
    color: white;
}

#holiday-nav:hover {
    z-index: 3;
    background-color: deeppink;
    color: white;
}

#artprize,#artprize-img {
    grid-row-start: 61;
}

#artprize {
    z-index: 7;
    background-color: orange;
    color: black;
}

#artprize-nav:hover {
    z-index: 3;
    background-color: orange;
    color: black;
}

.cv-info {
    grid-column: 1 / span 3;
}

.experience {
    grid-column: 5 / span 2;
}

.education {
    grid-column: 7 / span 2;
}

.publication {
    grid-column: 9 / span 2;
}

@media (max-aspect-ratio: 4/5) {
    
    body {
        flex-direction: column;
        margin: 3.2rem;
    }
    
    p {
        font-size: 3.2rem;
    }
    
    header {
        display: flex;
        width: 100%;
        min-height: fit-content;
        height: calc(15vh - 4.8rem);
        padding-bottom: 3.2rem;
        padding-right: 0;
        position: static;
    }
    
    .mobile-break {
        display:inline;
    }
    
    .project-grid,.project-subgrid-bottom,.project-subgrid-top,.cv-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.2rem;
        width: auto;
        align-items: start;
    }
    
    .project-desc-grid {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 3.24rem;
        width: 100%;
        padding-bottom: 33.8rem;
    }
    
    #mercury,#mercury-img {
        grid-row-start: auto;
    }
    
    .cv-grid {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .project-link,.project-br {
        display:none;
    }
    
    .project-subgrid-bottom,.project-subgrid-top {
        grid-column: 1 / -1;
    }
    
    .project-title {
        grid-column: 1 / -1;
        width: fit-content;
        border-radius: 50rem;
        padding: 3.2rem 4.8rem 3.2rem;
    }   
    
    .home-img-wrapper {
        height: calc(85vh - 4.8rem);
        width: 100%;
        overflow: hidden;
    }
    
    .home-img {
        object-fit: cover;
    }
    
    .img-wrapper-10,.img-wrapper-9,.img-wrapper-8,.img-wrapper-7,.img-wrapper-5,.img-wrapper-4,.img-wrapper-3,.img-wrapper-2,.img-wrapper-1,.home-img-wrapper,.project-desc {
    grid-column: 1 / -1;
    }
    
    .placeholder-4,.placeholder-3,.placeholder-2 {
    display:none;
    }

 
    
    .experience,.education,.publication, .cv-info {
        grid-column: span 2;
        height: auto;
    }

}