#backgroundOverflow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#backgroundWrapper {
    position: absolute;
    top: -10%;
    left: 0;
    width: 110%;
    height: 120%;
    filter: blur(15px);
    animation: bga 2s ease-out;
}

@keyframes bga {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

#background {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        #2e2541 0%,
        #2f605f 15%,
        #59b7a1 34%,
        #e7bc65 56%,
        #7a1e38 100%
    );
    clip-path: polygon(
        100% 0,
        40% 0,
        41% 5%,
        40% 15%,
        45% 25%,
        42% 33%,
        50% 60%,
        40% 80%,
        46% 100%,
        100% 100%
    );
}

#backgroundDoor {
    position: absolute;
    top: 40px;
    left: calc(50% - 76px);
    width: 152px;
    height: 196px;
    border-radius: 80px 80px 0 0;
    background: linear-gradient(80deg, #1c0a0a 40%, #9cedd9);

    box-shadow: inset 18px 10px 10px #d99d62, inset 0 0 0 20px #f99f79,
        inset 42px 10px 4px #813737, inset 0 0 0 40px #377c81,
        inset 46px 34px 0px rgba(0, 0, 0, 0.6);
}

#clouds svg {
    position: absolute;
    fill: rgba(255, 255, 255, 0.5);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
    animation: clouds 3s ease infinite alternate;

    &:nth-child(-n + 3) {
        fill: rgba(50, 0, 0, 0.5);
    }
    &:nth-child(2n) {
        transform: scaleX(-1);
    }
    &:nth-child(3n) {
        transform: scale(0.9);
    }
}

@keyframes clouds {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20%);
    }
}
