body{
    background-color: #cccfff;
    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;
    }
}

img{
    position: absolute;
    bottom: 0px;
}

.sun{
    background-color: #ff8c1a;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    box-shadow: 0 0 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;
    }
}