.sky {
    position: relative;
    padding: 0;
}
.clouds {
    position: absolute;
    animation: floating-clouds 400s linear infinite forwards; 
}
.peek {
    animation: peek 4s 1 forwards; 
}
.cloud-one { top: 3.5em; left: 3em; }
.cloud-two { top: 7em; left: 12em; }
.cloud-three { top: 4em; right: 10em; }
.cloud-four { top: 1em; left: -12em; }
.cloud-five { top: 8em; left: -25em; }
.cloud-six { top: 5.5em; left: -38em; }
.cloud-seven { top: 2em; left: -51em; }
.cloud-eight { top: 6em; left: -64em; }
.cloud-nine { top: 7.5em; left: -77em; }
.cloud-ten { top: 3.5em; left: -90em; }
.cloud-eleven { top: 7em; left: -103em; }
.cloud-twelve { top: 4em; left: -116em; }

@keyframes floating-clouds {
    from { translate: 0vw; }
    to { translate: 200vw; }
}

@keyframes rotate-left {
    from { rotate: 45deg; }
    to { rotate: -45deg; }
}

@keyframes peek {
    0% { opacity: 1;  z-index: 1;}
    90% { opacity: 1;  z-index: 1;}
    100% { rotate: 0; z-index: -99;}
}

/*Dynamic CSS (Move later)*/

.step1 { animation: stepOne 1.5s linear 0s 1 forwards; }
@keyframes stepOne {
    0% { rotate: -12deg; left: 0%;}
    10% { rotate: 7deg; }
    30% { rotate: -12deg; }
    50% { rotate: 7deg; }
    70% { rotate: -12deg; }
    90% { rotate: 7deg; }
    100% { rotate: 0deg; left: 115%;}
}

.step2 { animation: stepTwo 1.5s linear 0s 1 forwards; }
@keyframes stepTwo {
    0% { rotate: -12deg; left: 115%;}
    10% { rotate: 7deg; }
    30% { rotate: -12deg; }
    50% { rotate: 7deg; }
    70% { rotate: -12deg; }
    90% { rotate: 7deg; }
    100% { rotate: 0deg; left: 250%;}
}

.step3 { animation: stepThree 1.5s linear 0s 1 forwards; }
@keyframes stepThree {
    0% { rotate: -12deg; left: 250%;}
    10% { rotate: 7deg; }
    30% { rotate: -12deg; }
    50% { rotate: 7deg; }
    70% { rotate: -12deg; }
    90% { rotate: 7deg; }
    100% { rotate: 0deg; left: 385%;}
}

.step4 { animation: stepFour 1.5s linear 0s 1 forwards; }
@keyframes stepFour {
    0% { rotate: -12deg; left: 385%;}
    10% { rotate: 7deg; }
    30% { rotate: -12deg; }
    50% { rotate: 7deg; }
    70% { rotate: -12deg; }
    90% { rotate: 7deg; }
    100% { rotate: 0deg; left: 515%;}
}

.step5 { animation: stepFive 1.5s linear 0s 1 forwards; }
@keyframes stepFive {
    0% { rotate: -12deg; left: 515%;}
    10% { rotate: 7deg; }
    30% { rotate: -12deg; }
    50% { rotate: 7deg; }
    70% { rotate: -12deg; }
    90% { rotate: 7deg; }
    100% { rotate: 0deg; left: 650%;}
}

.step6 { animation: stepSix 1.5s linear 0s 1 forwards; }
@keyframes stepSix {
    0% { rotate: -12deg; left: 650%;}
    10% { rotate: 7deg; }
    30% { rotate: -12deg; }
    50% { rotate: 7deg; }
    70% { rotate: -12deg; }
    90% { rotate: 7deg; }
    100% { rotate: 0deg; left: 785%;}
}

.finish { animation: finish 1.5s linear 0s 1 forwards; }
@keyframes finish {
    0% { rotate: -12deg; left: 785%;}
    10% { rotate: 7deg; }
    30% { rotate: -12deg; }
    50% { rotate: 7deg; }
    70% { rotate: -12deg; }
    90% { rotate: 7deg; }
    100% { rotate: 0deg; left: 905%;}
}

.rotate90 {
    rotate: 90deg;
}