img{
    width:100%;
    position:absolute;
    bottom:0px;
}

body{
    background-color:#ccccff;
    margin:0;
    overflow-y:hidden;
    animation: sky 5.5s 2s forwards;
}

@keyframes sky{
    50%{
        background-color:#ffd700;
    }
    65%{
        background-color:#ffb90f;
    }
    85%{
        background-color:#b39800;
    }
    100%{
        background-color:#68228b;
    }
}
.sun{
    background-color:#ff8c1a;
    height:100px;
    width:100px;
    border-radius:50%;
    position:absolute;
    left:50%;
    box-shadow: 0px 0px 20px 5px #ff8c1a;
    animation:sunset 15s forwards;
}

@keyframes sunset{
    100%{
        transform: translateY(750px);
    }
}
.moon{
    background-color: transparent;
    height:100px;
    width:100px;
    border-radius:50%;
    box-shadow: -20px 10px white;
    position:absolute;
    left:10%;
    top:5%;
    opacity:0;
    animation:night 0.8s 7s forwards;
}
@keyframes night{
    100%{
        opacity: 1;
    }
}