html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

* {
    user-select: none;
}
/*Background stuff*/
#background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: #522d02;
    z-index: 1;
}

#glare {
    position: fixed;
    left: -100px;
    bottom: -100px;
    width: calc(120vw + 220px);
    height: calc(120vh + 220px);
    background-image: url("glare.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2;
    transform-origin: left bottom;
    animation: glareRotate 8s ease-in-out infinite;
}

#ashes {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: url("ashes.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 3;
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(1);
}

#checkers {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: url("checker pattern.png");
    background-repeat: repeat;
    animation: moveCheckers 4s linear infinite;
    z-index: 4;
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
}

#stars {
    position: fixed;
    width: 828px;
    height: 826px;
    left: -290px;
    bottom: -270px;
    background-image: url("stars.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 5;
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
}

#evil {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: -430px;
    top: -295px;
    background-image: url("evil.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 6;
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
}

#duotone {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 200px;
    background-image: url("duotone topright.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 7;
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(1);
}

#flame {
    position: fixed;
    width: 60vw;
    height: 60vh;
    right: -710px;
    bottom: -120px;
    background-image: url("flame.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 8;
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
}

/*#srBreak {
    position: fixed;
    width: 60vw;
    height: 60vh;
    right: -710px;
    bottom: -120px;
    background-image: url("BreakCallout.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 33;
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
}*/



#Title {
    position: fixed;
    width: 680px;
    height: 400px;
    left: 50%;
    top: -80px;
    background-image: url("important/Title.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9;
    transform: translateX(-50%) translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
}

#notice {
    position: fixed;
    width: 20vw;
    height: 20vh;
    left: 730px;
    bottom: -120px;
    background-image: url("important/notice.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
}


/*Annoying ass music boombox widget stuff but at least i got it to work*/
#musicWidget {
    position: fixed;
    left: 55px;
    bottom: 255px;
    width: 360px;
    height: 360px;
    transform: translate( var(--parallax-x, 0px), var(--parallax-y, 0px) ) scale(1.25);
    transform-origin: bottom left;
    transition: transform 0.08s linear;
    z-index: 30;
}
#boombox {
    position: absolute;
    left: 72px;
    bottom: 0px;
    width: 186px;
    height: 184px;
    background-image: url("important/boombox.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}

#hands {
    position: absolute;
    left: 55px;
    bottom: 135px;
    width: 247px;
    height: 200px;
    background-image: url("important/hands.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: translateY(35px) scale(0.9);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 2;
}

@font-face {
    font-family: "FNF";
    src: url("important/FridayNightFunkin-Regular.ttf");
}

#songText {
    position: fixed;
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%);
    opacity: 0;
    font-family: "FNF", sans-serif;
    font-size: 28px;
    color: white;
    text-align: center;
    text-shadow: 3px 3px 0px black;
    z-index: 50;
    pointer-events: none;
}

    #songText.show {
        animation: songTextPop 6s ease forwards;
    }

@keyframes songTextPop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    12% {
        opacity: 1;
        transform: translateX(-50%) translateY(0px);
    }

    80% {
        opacity: 1;
        transform: translateX(-50%) translateY(0px);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(25px);
    }
}

#musicNotes,
#musicNotesTwo {
    position: absolute;
    width: 99px;
    height: 75px;
    background-image: url("important/music-notes.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    z-index: 4;
}

#musicNotes {
    left: 220px;
    bottom: 135px;
}

#musicNotesTwo {
    left: 270px;
    bottom: 185px;
}

#musicToggle {
    position: absolute;
    left: 72px;
    bottom: 0px;
    width: 186px;
    height: 184px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
}

/* MUSIC ON STATES */

.music-on #hands {
    animation: handsCheer 3s ease forwards;
}

.music-on #musicNotes {
    opacity: 1;
    animation: noteClipOne 4s steps(1) infinite;

}

.music-on #musicNotesTwo {
    opacity: 1;
    animation: noteClipTwo 4s steps(1) infinite;
}

.music-on #boombox {
    animation: boomboxClipBeat 0.8s steps(1) infinite;
}


/* NOTES: hold a rotation, then hard-snap to the next one */

@keyframes noteClipOne {
    0% {
        transform: rotate(-50deg) scale(1);
    }

    25% {
        transform: rotate(60deg) scale(1.1);
    }

    50% {
        transform: rotate(-45deg) scale(1);
    }

    75% {
        transform: rotate(55deg) scale(1.08);
    }

    100% {
        transform: rotate(-50deg) scale(1);
    }
}

@keyframes noteClipTwo {
    0% {
        transform: rotate(55deg) scale(0.85);
    }

    25% {
        transform: rotate(-60deg) scale(0.95);
    }

    50% {
        transform: rotate(50deg) scale(0.85);
    }

    75% {
        transform: rotate(-55deg) scale(0.95);
    }

    100% {
        transform: rotate(55deg) scale(0.85);
    }
}

/* BOOMBOX: chunky fake beat */

@keyframes boomboxClipBeat {
    0% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-3px) scale(1.035);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}



.package-button {
    position: fixed;
    width: 797px;
    height: 204px;
    left: 50%;
    top: 130px;
    background-image: url("important/button1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 20;
    transform: translateX(-50%) scale(1);
    transition: transform 0.15s ease, filter 0.15s ease;
    pointer-events: auto;
}

    .package-button:hover {
        transform: translateX(-50%) scale(1.05);
        filter: brightness(1.5);
    }

    .package-button:active {
        transform: translateX(-50%) scale(0.96);
    }

    .package-button.clicked {
        animation: clickPop 0.22s ease;
    }


#buttonContainer {
    position: fixed;
    inset: 0;
    transform: translate( var(--parallax-x, 0px), var(--parallax-y, 0px) );
    transition: transform 0.08s linear;
    pointer-events: none;
    z-index: 20;
}

#button1 {
    width: 860px;
    height: 220px;
    top: 130px;
    left: 50%;
    background-image: url("important/button1.png");
}

#button2 {
    width: 860px;
    height: 230px;
    /*fix download size in canva its too blurry*/
    top: 260px;
    left: 50%;

    background-image: url("important/button2.png");
}

#button3 {
    top: 395px;
    background-image: url("important/button3.png");
}

#button4 {
    top: 540px;
    background-image: url("important/button4.png");
}

#button5 {
    top: 675px;
    background-image: url("important/button5.png");
}

#examplesButton {
    position: fixed;
    /* Middle-right side */
    right: 5px;
    top: 335px;
    width: 490px;
    height: 280px;
    background-image: url("important/examples.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 40;
    transform: translateY(-50%) scale(1);
    transition: transform 0.15s ease, filter 0.15s ease;
}

    #examplesButton:hover {
        transform: translateY(-50%) scale(1.06);
        filter: brightness(1.5);
    }

    #examplesButton:active {
        transform: translateY(-50%) scale(0.96);
    }



#pageFade {
    position: fixed;
    inset: 0;
    background: black;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 9999;
}

    #pageFade.active {
        opacity: 1;
    }

@keyframes clickPop {
    0% {
        transform: translateX(-50%) scale(1.05);
    }

    45% {
        transform: translateX(-50%) scale(0.92);
    }

    100% {
        transform: translateX(-50%) scale(1.05);
    }
}

@keyframes glareRotate {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes moveCheckers {
    from {
        background-position: 0px 0px;
    }

    to {
        background-position: 78px 78px;
    }
}

#djWidget {
    position: fixed;
    right: 0;
    bottom: -50px;
    width: 508px;
    height: 639px;
    z-index: 9999;
    pointer-events: none;
}

#djCanvas {
    display: block;
    width: 508px;
    height: 639px;
}