* {
    box-sizing:border-box;
}

body{
    height: 100vh;
    background-image: linear-gradient(#d7fffb, #5ee4ff);
}

.sun{
    animation: spin 20s infinite linear;
}

.cloud1 {
    position:fixed;
    top: 0;
    left: 0;
    opacity: 50%;
    animation: cloud 30s infinite ease-in-out;
}
.cloud2{
    position:fixed;
    top: 20px;
    left: -20px;
    animation: cloud 20s infinite; 
}

.cloud3{
    position:fixed;
    right: 10px;
    top:15%;
    animation: cloud 35s infinite; 

}
.cloud4{
    position:fixed;
    top: -120px;
    left: 1000px;
    animation: cloud 60s infinite;
}

.flower{
    position:fixed;
    bottom:0;
    display: flex;
    flex-direction: row;

}
.flower1{
    animation: scale 3s , show 4s;
}

.flower2{
    animation: scale 10s , show 10s;
}

.flower3{
    animation: scale 15s , show 12s;
}


.butterfly{
    position: fixed;
    top: 0;
    bottom: 0;
    animation: crazy 10s infinite linear;

}

.butterfly2{
    position: fixed;
    bottom: 173px;
    left: 276px;
    animation: scale 3s infinite;
}

.grass{
    position:fixed;
    bottom:-10px;
    display: flex;
    flex-direction: row;
    gap:5px;
}
.tree{
    position: fixed;
    bottom:-150px;
    right:-900px;
    
}

@keyframes spin{
    0%{
        transform:rotate(0);
    }
    100%{
        transform:rotate(360deg);
    }
}
@keyframes cloud{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(100vw);
    }
}

@keyframes crazy{
    0%{
        top:0;
        left:0;
      }
    25%{
        top:20%;
        left:25%;
    }
    50%{
        top:40%;
        left:60%;
    }
    100%{
        top:80vh;
        left:100vw;
    }
}

@keyframes scale{
    0%{
        transform: scale(0.5);
    }
    100%{
        transform:scale(1);
        }
}

@keyframes show{
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}