@import url('./reset.css');

@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, -50%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translate(-50%, 0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes twinkle {
    0% { opacity: 0.7; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.7; transform: scale(0.8); }
}

*{
    font-family: "Schoolbell", cursive;
    font-weight: 400;
    font-style: normal;
}

main{
    display: flex;
    justify-content: center;
}

#container{
    aspect-ratio: 3 / 4;
    height: 100vh;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
}

#title{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

#title h1{
    font-size: 6vh;
}

#title h2{
    font-size: 5vh;
    margin-bottom: 2vh;
}

#title h3{
    font-size: 3vh;
}

#title p{
    margin-top: 2vh;
    font-size: 2.5vh;
}

#score{
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    padding: 1.5vh;
    font-size: 2.5vh;
}

#rabbit{
    aspect-ratio: 1 / 1;
    height: 5%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background-image: url(../assets/images/frog.png);
    background-size: 100%;
}

.bell{
    aspect-ratio: 1 / 1;
    height: 3%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20%;
    animation: bounce 1s infinite ease-out;
    background-image: url(../assets/images/bell.png);
    background-size: 100%;
}

#test{
    bottom: 50.26%;
    left: 76%;
}

#floor{
    height: 2.5%;
    background-image: linear-gradient(to top, #005500, #009900);
    width: 100%;
    position: absolute;
    z-index: 10;
}
  
.sparkle-particle {
    position: absolute;
    pointer-events: none;
    animation: twinkle 0.5s infinite alternate;
    transition: all 0.1s ease-out;
}