body{
    background-image: url('./images/clouds.jpg');
    overflow: hidden;
}

@keyframes rise{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-50px);
    }
    100%{
        transform: translateY(0);
    }
}

@keyframes hop1{
    0%{
        transform: translateY(0);
    }
    70%{
        transform: translateY(-150px);
    }
    100%{
        transform: translateY(0);
    }
}

.hopping1{
    animation: hop1 0.5s infinite;
}

@keyframes hop2{
    0%{
        transform: translateY(0);
    }
    70%{
        transform: translateY(-150px);
    }
    100%{
        transform: translateY(0);
    }
}

.hopping2{
    animation: hop2 0.6s infinite;
}

.bone{
    position: absolute;
    bottom: -3%;
    left: 25%;
    width: 50px;
    height: 50px;
    z-index: 3;
    transition: transform 0.5s, opacity 0.5s;
}

.bone:hover, .fish:hover{
    transform: scale(1.7) rotate(10deg) translateY(-35px);
    opacity: 0.8;
}

.fish{
    position: absolute;
    bottom: -3%;
    right: 25%;
    width: 50px;
    height: 50px;
    z-index: 3;
    transition: transform 0.5s, opacity 0.5s;
}

.elh{
    position: absolute;
    bottom: 5%;
    right: 10%;
    width: 200px;
    height: 200px;
    z-index: 3;
    transition: transform 0.5s;
}

.red{
    position: absolute;
    bottom: 5%;
    left: 10%;
    width: 200px;
    height: 200px;
    z-index: 3;
    transition: transform 0.5s;
}

.grass{
    position: absolute;
    left: 0%;
    bottom: 0%;
    width: 100%;
    z-index: 2;
}

.sun{
    position: absolute;
    top: 10%;
    left: 50%;
    width: 125px;
    height: 125px;
    animation: rise 4s infinite;
    z-index: 1;

}