@font-face {
    font-family: the-seasons;
    font-weight: 400;
    font-style: normal;
    src: url("https://use.typekit.net/qfz2jvy.css");
}

@font-face {
    font-family: the-seasons-italic;
    font-weight: 400;
    font-style: italic;
    src: url("https://use.typekit.net/qfz2jvy.css");
}

@font-face {
    font-family: futura-pt;
    font-weight: 300;
    font-style: normal;
    src: url("https://use.typekit.net/qfz2jvy.css");
}

* {
    margin: 0;
    padding: 0;
    color: #9c4198;
    scroll-behavior: smooth;
}

body {
    height: 100%;
}

/* HOME PAGE SLIDER */
div.slider {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    white-space: nowrap;
    scrollbar-width: none;
}

div.project-cover {
    display: flex;
    width: 25vw;
    padding: 20vh 20px 8vh 20px;
    flex: none;
    justify-content: center;
    align-items: center;
    opacity: 0.5
}

div.project-cover:hover {
    text-decoration: underline;
    opacity: 1;
}

div.project-cover img {
    display: block;
    margin: auto;
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
}

div#view-more {
    width: 15vw;
}

div#view-more img{
    visibility: hidden;
}

a.more-button {
    text-decoration: none;
}

a.more-button:hover {
    text-decoration: underline;
}

/* ABOUT  */
div.text-wrapper-1 {
    display: block;
    padding-left: 23vw;
    padding-top: 15vh;
    position: fixed;
}

div.text-wrapper a {
    font-family: futura-pt;
    font-weight: 300;
}

div.img-wrapper {
    display: block;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    white-space: nowrap;
    scrollbar-width: none;
    padding: 10px;
    padding-top: 30vh;
}

div.img-wrapper img {
    height: 33vh;
    margin-right: 7vw;
}

div.text-wrapper-2 {
    margin-top: 2vh;
    padding-left: 23vw;
    font-family: futura-pt;
    font-weight: 300;
}

div.text-wrapper-2 p.about-text {
    width: 45vw;
}

/* WORK */
div.all-wrapper {
    display: flex;
    width: fit-content;
    margin: 0;
}

div.projects {
    width: 19vw;
    height: 80vh;
    padding-top: 20vh;
    padding-right: 10vh;
    padding-bottom: 0;
}

div#verticalscroll-1 {
    padding-left: 20px;
}

a.item-wrapper {
    text-decoration: none;
    opacity: 0.5;
}

a.item-wrapper:hover {
    text-decoration: underline;
    opacity: 1;
}

a.item-wrapper img {
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    padding-bottom: 5vh;
}

#verticalscroll-1, #verticalscroll-2, #verticalscroll-3, #verticalscroll-4, #verticalscroll-5, #verticalscroll-6, #verticalscroll-7  {
    flex: 2;
    overflow: scroll;
    scrollbar-width: none;
}

div.arrow {
    display: flex;
    position: fixed;
    top: 50vh;
    right: 20px;
    font-size: 20px;
}

.arrow {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.arrow.hidden {
    opacity: 0;
    pointer-events: none; /* optional: makes it unclickable when hidden */
}

.arrow p {
    font-size: 15px;
    transform: rotate(90deg);
}

@media screen and (max-width: 1200px) {
/* BODY */
    html, body {
        height: 100%;
        max-height: 100svh;
        overflow-y: hidden;
    }
    
/* FOR HOME */
    div.project-cover {
        width: 30vw;
    }

/* FOR WORK */
    div.projects {
        width: 30vw;
    }

/* ABOUT */
    div.text-wrapper-2 p.about-text {
        width: 60vw;
    }

}

@media screen and (max-width: 900px) {
/* FOR HOME */
    div.project-cover {
        width: 40vw;
    }

/* FOR WORK */
    div.projects {
        width: 40vw;
    }
/* ABOUT */
    div.text-wrapper-1, div.text-wrapper-2 {
        padding-left: 15vw;
    }

    div.text-wrapper-2 p.about-text {
        width: 70vw;
    }
}

@media screen and (max-width: 600px) {
/* FOR HOME */
    div.project-cover {
        width: 92vw;
        padding: 20vh 20px 10vh 20px;
    }

/* FOR WORK */
    div.projects {
        width: 42vw;
        padding-right: 5vh;
    }

/* ABOUT */
    div.text-wrapper-1 {
        padding-top: 13vh;
    }

    div.img-wrapper {
        padding-top: 25vh;
    }
    div.text-wrapper-2 p.about-text {
        width: 70vw;
    }
}