@media screen and (min-width:768px) {

    section,
    footer {}

    footer {
        opacity: 0;
    }

    #loading-progress-track {
        width: 10vw;
    }

    .grad {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        /* 2. Prevent it from blocking clicks/interactions on the square underneath */
        pointer-events: none;

        /* 3. The double-sided fade-to-black gradient */
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 1) 13%,
                /* Solid black at the very top */
                rgba(0, 0, 0, 0) 20%,
                /* Fades out completely 20% of the way down */
                rgba(0, 0, 0, 0) 80%,
                /* Stays transparent until 80% of the way down */
                rgba(0, 0, 0, 1) 90%
                /* Fades back to solid black at the bottom */
            );
        opacity: 0;
    }


    h1 {
        background-size: 50vw;
        background-position: 50% 50%;
        filter: blur(0.15em) brightness(0.2);
    }

    #mobileMenuBtn,
    #header.active {
        display: none;
    }

    header {
        position: absolute;
        opacity: 1;
        height: 5vh;
        top: 2vh;
        transform: translateY(0);
        transition: transform 1s ease-out;
        width: 100%;
    }

    .desktop-nav {
        width: 100%;
        max-width: 100vh;
        transform: translateY(-100%);
        color: white;
        display: flex;
        padding-top: .5em;
        gap: 1.5em;
        padding-left: 1.5em;

    }

    .desktop-nav a {
        background-image: linear-gradient(to top, #fd9691, #f61484, #fd9691);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;

        /* Alternative to text-shadow that plays nicer with background-clip */
        filter: drop-shadow(0px 0px 1vw rgba(246, 21, 132, 0.7));
        font-size: 2.7em;
        transition: all 1s;
    }

    .desktop-nav a:hover {
        background-image: linear-gradient(to top, #fff);
        -webkit-background-clip: text;
        background-clip: text;
        color: #fff;
        filter: drop-shadow(0px 0px 0 rgba(246, 21, 132, 0.7));
        text-shadow: #f61484 0px 0px .3vw;
    }

    .container {
        min-width: 100vh;
        height: 100%;
    }

    .audioPlayer {
        width: 12vw;
    }



    .audioPlaying footer,
    footer {
        bottom: 1vh;
    }

    #audio-controls {
        position: fixed;
        bottom: 0;
        left: 0;
        top: auto;
        z-index: 3;
        width: 100%;
        display: flex;
        opacity: 0;
        transform: translateY(100%);
        max-width: 100%;
        left: 0;
        background: linear-gradient(to top, black, transparent);
    }

    #footer-audio {
        width: 100%;
        max-width: 100vh;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        display: flex;
    }

    #song-details {
        width: auto;
        color: #fff;
        font-size: .7vw;
        letter-spacing: .5em;
        text-align: center;
    }

    #song-title {}

    #audioIntro {
        display: none;
        filter: invert(1);
    }

    #videoIntro-wrap {
        height: 100%;
    }

    #videoIntro {
        transform-origin: center top;
    }

    .intro-ats {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain;

        display: none;
        transform: scale(1);
        transform-origin: 50% 37%;
    }

    .overlay-text {
        width: 100vw;
        font-size: 1.1vw;
        line-height: 1.7em;
        letter-spacing: 0.3em;
        padding: 0 20vw;
        bottom: auto;
        top: 76vh;
        height: auto;
        overflow: visible;
        user-select: none;
    }

    #tbob {
        font-size: 150%;
        letter-spacing: 0.6em;
    }

    #intro-text .main-text {
        margin-top: 2em;
    }

    .single-grid {
        display: flex;
        flex-direction: row;
        gap: 1vw;
        margin: 1em auto 1em;
    }

    .single-lockup {
        display: flex;
        flex-direction: row;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 1em;
        width: 50%;
        box-sizing: border-box;
    }

    .single-text {
        width: 53%;
        font-size: 0.8em;
        line-height: 1.7em;
        margin-left: 7%;
        text-align: left;
    }

    #intro-text .inline-social-links {
        width: 60%;
        margin: 1em auto 2em;
    }


}