/* general */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: hsla(0, 0%, 0%, 1);
    color: hsla(0, 0%, 100%, 1);
}

a {
    cursor: pointer;
    color: hsla(0, 0%, 100%, 1);
}

/* header */

.header {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 3;
    padding-bottom: 4vh;
    top: 0;
    position: relative;
    padding: 0; /* This line seems redundant */
}

#menu-btn-container {
    width: 100vw;
}


#navigation-container {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    transition: top 0.3s ease;
    z-index: 1000;
    padding-bottom: 5vh;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.987) 0%,
            rgba(0, 0, 0, 0.951) 11%,
            rgba(0, 0, 0, 0.896) 20.8%,
            rgba(0, 0, 0, 0.825) 29.6%,
            rgba(0, 0, 0, 0.741) 37.5%,
            rgba(0, 0, 0, 0.648) 44.6%,
            rgba(0, 0, 0, 0.55) 51%,
            rgba(0, 0, 0, 0.45) 57%,
            rgba(0, 0, 0, 0.352) 62.5%,
            rgba(0, 0, 0, 0.259) 67.7%,
            rgba(0, 0, 0, 0.175) 72.7%,
            rgba(0, 0, 0, 0.104) 77.8%,
            rgba(0, 0, 0, 0.049) 82.9%,
            rgba(0, 0, 0, 0.013) 88.2%,
            rgba(0, 0, 0, 0) 93.9%,
            rgba(0, 0, 0, 0) 100%
    );
}

#heading-container {
    display: flex;
    margin: 2vh 0 0 0;
    justify-content: center;
}

#logo {
    height: 15vw;
}

.navigation {
    display: none;
}

/* menu */

#menu-btn-container {
    display: flex;
    justify-content: center;
    z-index: 4;
    margin: 0;
    position: relative;
    /*transition: top 0.3s ease;
    padding-bottom: 5vh;
    background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.987) 0%,
            rgba(0, 0, 0, 0.951) 11%,
            rgba(0, 0, 0, 0.896) 20.8%,
            rgba(0, 0, 0, 0.825) 29.6%,
            rgba(0, 0, 0, 0.741) 37.5%,
            rgba(0, 0, 0, 0.648) 44.6%,
            rgba(0, 0, 0, 0.55) 51%,
            rgba(0, 0, 0, 0.45) 57%,
            rgba(0, 0, 0, 0.352) 62.5%,
            rgba(0, 0, 0, 0.259) 67.7%,
            rgba(0, 0, 0, 0.175) 72.7%,
            rgba(0, 0, 0, 0.104) 77.8%,
            rgba(0, 0, 0, 0.049) 82.9%,
            rgba(0, 0, 0, 0.013) 88.2%,
            rgba(0, 0, 0, 0) 93.9%,
            rgba(0, 0, 0, 0) 100%
    );*/
}

#menu-icon {
    width: 10vw;
    margin: 1rem 0 0 0;
    cursor: pointer;
    transform: rotate(0deg);
    transition: transform 0.5s ease;
}

.menu-open #menu-icon {
    transform: rotate(45deg);
}

body.menu-open {
    overflow: hidden;
}

.menu {
    display: none;
    position: absolute;
    background: hsla(0, 0%, 0%, 0.9);
    flex-direction: column;
    align-items: center;
    opacity: 0;
    z-index: 999;
    pointer-events: none;
    width: 100%;
    height: 100vh;
    top: 4.5vh;
}

.menu-open .menu {
    display: flex;
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
    width: 100%;
}

body.menu-open .main {
    display: none;
}

.link-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    width: 100%;
    height: 100vh;
}

.links {
    color: hsla(0, 0%, 100%, 1);
    background: none;
    border: none;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13vw;
}

.links a {
    text-decoration: none;
}

/* main */

.info .main,
.sound-design .main,
.music .main,
.virtual-musicians .main {
    margin-bottom: 3vh;
    display: flex;
}

.main,
.info-container {
    flex-direction: column;
    align-items: center;
    margin: 0 6% 0 6%;
    opacity: 1;
    pointer-events: auto;
}

/* landing */

.landing .main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

#landing-img {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    height: 100vh;
    justify-content: center;
    overflow: hidden;
}

#landing-img img {
    display: flex;
    justify-content: center;
}

/* pages */

.work-heading {
    margin: 1.5vh 0 0.5vh 0;
}

h1 {
    margin: 0;
    font-size: 13vw;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.music h3 {
    font-family: ivyora-text, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 9vw;
}

h2 {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 7vw;
    text-align: center;
    margin: 2vh 0 0 0;
}

h3 {
    font-size: 4vw;
    font-family: ivyora-text, sans-serif;
    font-weight: 100;
    font-style: normal;
    text-align: center;
    margin: 2vw 0 8vw 0;
}

.work-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1vh;
}

.work-content,
.info-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.work-img,
.embed-container {
    margin: 0 0 3vh 0;
}


.work-img,
#portrait {
    width: 100%;
}

#portrait {
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.embed-container {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.embed {
    width: 100%;
    height: 100%;
}

iframe {
    padding-bottom: 5%;
}

#infolayer {
    width: 100%;
}

.virtual-musicians h2 {
    margin-bottom: 3vh;
}

.virtual-musicians h3 {
    margin-bottom: 2vh;
}

#portrait-content {
    margin-top: 3vh;
}

/* info */

.info-heading {
    font-size: 9vw;
    text-align: left;
    margin: 4vh 0 1vh 0;
}

#contact-content {
    width: 100%;
}

.description {
    font-family: ivyora-text, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 4vw;
    margin: 0;
}

#email {
    margin-top: 4vh;
}

@media (min-width: 768px) {

    h1 {
        font-size: 5vw;
    }

    h2 {
        font-size: 3.5vw;
    }

    h3 {
        margin: 1vh 0 4.5vh 0;
        font-size: 2vw;
    }

    .music h3 {
        font-size: 3vw;
    }

    #heading-container {
        justify-content: space-between;
    }

    .header {
        justify-content: space-between;
        margin-top: 1vh;
    }

    #navigation-container {
        justify-content: space-between;
        align-items: center;
    }

    .navigation {
        display: flex;
        align-items: center;
        gap: 1.5vw;
        font-family: neue-haas-grotesk-display, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 2.5vw;
        margin-right: 5vw;

    }

    .navigation a {
        text-decoration: none;
    }

    #logo-link {
        display: inline-block;
    }

    #logo {
        height: 6vw;
        margin-left: 5vw;
    }

    #menu-icon,
    #menu {
        display: none;
    }

    #landing-img img {
        display: flex;
        width: 100vw;
        object-fit: cover;
        margin-top: -30vh;
    }

    .info-heading {
        font-size: 3vw;
        margin: 0;
    }

    .info-content {
        display: flex;
        flex-direction: row;
        margin-top: 3vh;
        gap: 3vw;
        width: 70%;
        align-items: center;
    }

    #portrait-content {
        margin: 0;
    }

    #portrait {
        width: 27vw;
    }

    .info-text {
        display: flex;
        flex-direction: column;
    }

    .description {
        font-size: 1.1vw;
        margin: 1vw 0 2vw 0;
    }
}