* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: lavenderblush;
    overflow: hidden;

}

.container{
    position: relative;
    width: 100%;
    height: 50vh;
}

.black-cat{
    position: absolute;
    width: 11%;
    height: auto;
    top: 3%;
    left: 7%;
    z-index: 3;
}

.rae-frame1 img {
    position: absolute;
    width: 30%;       
    height: auto;     
    top: 10%;        
    left: -4%;
    z-index: 2;        
}

.rae-frame2 img{
    position: absolute;
    width: 25%;
    height: auto;
    top: 27%;
    left: 70%;
    z-index: 3;
}

.witch-topper img{
    position: absolute;
    width: 9%;
    height: auto;
    left: 57%;
    top: 48%;
    z-index: 1;
    

}


.birthday-witch img{
    position: absolute;
    width: 12%;
    height: auto;
    left: 86%;
    top: 3%;
}

.rat img{
    position: absolute;
    width: 12%;
    height: auto;
    left: 42%;
    top: 80%;
    z-index: 3;
}

.speach-bubble img{
    position: absolute;
    width: 18%;
    height: auto;
    left: 30%;
    top: 44%;
    z-index: 2;
}


.neko img{
    position: absolute;
    width: 11%;
    height: auto;
    top: 2%; 
    left: 70%;
    z-index: 20;
}

.chika-dancing img{
    position: absolute;
    width: 12%;
    height: auto;
    top: 140%;
    left: 58%;
}

.everknight-dancing img{
    position: absolute;
    width: 16%;
    height: auto;
    top: 141%;
    left: 31%; 
    z-index: 1;
}

.kaoruko-dancing img{
    position: absolute;
    width: 16%;
    height: auto;
    top: 136%;
    left: 43%;

}

.reze-dancing img{
    position: absolute;
    width: 30%;
    height: auto;
    top: 139%; 
    left: 13%;  
    
}

.birthday-cake img{
    position: absolute;
    width: 12%;
    height: auto;
    top: 80%;
    left: 55%;
    z-index: 3;
}

.shigure-dancing img{
    position: absolute;
    width: 18%;
    height: auto;
    top: 129%; 
    left: 70%; 
    z-index: 20;
}

.quby img{
    position: absolute;
    width: 10%;
    height: auto;
    top: 165%;
    left: 86%;
}

.crow1 img{
    position: absolute;
    width: 15%;
    height: auto;
    top: 156%;
    left: -1%;

}

.crow2 img{
    position: absolute;
    width: 12%;
    height: auto;
    top: 153%;
    left: 9%;
}

h1 {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5vw;
    font-family: Federant;
    color: rgb(120, 6, 6);
}

button {
    font-size: 1.0vw;
    font-family: Oregano;
    padding: 0.1% 0.5%;
    cursor: pointer;
    border-radius: 20%;
    border-color: black;
    color: rgb(120, 6, 6);
    background-color: lavenderblush;
    z-index: 3;
    
}

button:hover{
    background-color: palevioletred;
}

#backBtn{
    position: absolute;
    left: 35%;
    top: 72%;
    
}


#nextBtn{
    position: absolute;
    left: 39%;
    top: 72%;
}

#text-display{
    position: absolute;
    font-family: Oregano;
    font-size: 1.2vw;
    color: rgb(120, 6, 6);
    left: 34%;
    top: 60%;
    z-index: 3;

}

.black-balloon img{
    position: absolute;
    width: 8%;
    height: auto;
    left: 4%;
    bottom: -200%;
    z-index: 3;
    animation: float ease-in infinite;
    animation-delay: 0s;
    animation-duration: 10s;
}

.black-balloon2 img{
    position: absolute;
    width: 7%;
    height: auto;
    left: 70%;
    bottom: -200%;
    z-index: 3;
    animation: float ease-in infinite;
    animation-delay: 3s;
    animation-duration: 7s;
}

.pink-balloon img{
    position: absolute;
    width: 17%;
    height: auto;
    left: 40%;
    bottom: -200%;
    z-index: 0;
    animation: float ease-in infinite;
    animation-delay: 2s;
    animation-duration: 11s;
}

.pink-balloon2 img{
    position: absolute;
    width: 17%;
    height: auto;
    left: 70%;
    bottom: -200%;
    z-index: 0;
    animation: float ease-in infinite;
    animation-delay: 7s;
    animation-duration: 10s;
}

.mint-balloon img{
    position: absolute;
    width: 14%;
    height: auto;
    left: 25%;
    bottom: -200%;
    z-index: 0;
    animation: float ease-in infinite;
    animation-delay: 4s;
    animation-duration: 8s;
}

.mint-balloon2 img{
    position: absolute;
    width: 14%;
    height: auto;
    left: 75%;
    bottom: -200%;
    z-index: 0;
    animation: float ease-in infinite;
    animation-delay: 2s;
    animation-duration: 8s;
}

.gold-balloon  img{
    position: absolute;
    width: 15%;
    height: auto;
    left: 35%;
    bottom: -200%;
    z-index: 0;
    animation: float ease-in infinite;
    animation-delay: 1s;
    animation-duration: 10s;
}

.gold-balloon2  img{
    position: absolute;
    width: 15%;
    height: auto;
    left: 13%;
    bottom: -200%;
    z-index: 3;
    animation: float ease-in infinite;
    animation-delay: 5s;
    animation-duration: 11s;
}

.crimson-balloon img{
    position: absolute;
    width: 15%;
    height: auto;
    left: 45%;
    bottom: -200%;
    z-index: 0;
    animation: float linear infinite;
    animation-delay: 2;
    animation-duration: 9s;
}

.crimson-balloon2 img{
    position: absolute;
    width: 15%;
    height: auto;
    left: 15%;
    bottom: -200%;
    animation: float linear infinite;
    animation-delay: 6s;
    animation-duration: 12s;
    
}

.purple-balloon img{
    position: absolute;
    width: 7%;
    height: auto;
    left: 65%;
    bottom: -205%;
    z-index: 0;
    animation: float linear infinite;
    animation-duration: 10.5s;

}

.purple-balloon2 img{
    position: absolute;
    width: 7%;
    height: auto;
    left: 23%;
    bottom: -220%;
    z-index: 3;
    animation: float linear infinite;
    animation-delay: 9;
    animation-duration: 12s;

}

.white-balloon img{
    position: absolute;
    width: 8%;
    height: auto;
    left: 85%;
    bottom: -200%;
    z-index: 3;
    animation: float ease-in infinite;
    animation-duration: 11s;

}

.white-balloon2 img{
    position: absolute;
    width: 8%;
    height: auto;
    left: 20%;
    bottom: -200%;
    z-index: 3;
    animation: float ease-in infinite;
    animation-delay: 7;
    animation-duration: 11s;

}



@keyframes float {
            0% {
                bottom: -200%;
                transform: translateX(0) rotate(0deg);
            }
            25% {
                transform: translateX(20px) rotate(5deg);
            }
            50% {
                transform: translateX(-20px) rotate(-5deg);
            }
            75% {
                transform: translateX(15px) rotate(3deg);
            }
            100% {
                bottom: 200vh;
                transform: translateX(0) rotate(0deg);
            }
        }