/*// BASE STYLES //*/

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  font-family: Arial, sans-serif;
}

.grass, .sky, .road {
  position: relative;
  width: 100%;
}

.sky {
  height: 40%;
  background: skyblue;
}

.grass {
  height: 30%;
  background: seagreen;
}

.road {
  height: 30%;
  background: dimgrey;
  box-sizing: border-box;
  border-top: 10px solid grey;
  border-bottom: 10px solid grey;
}

.lines {
  box-sizing: border-box;
  border: 5px dashed #fff;
  height: 0;
  width: 100%;
  position: absolute;
  top: 50%;
}

/*// ELEMENTS TO ANIMATE //*/

.mario {
  position: absolute;
  top: -35px;
  left: 0;
  animation: drive 4s infinite cubic-bezier(1, 0.01, 0.17, 1),
             jump 0.5s infinite;
}

.luigi {
  position: absolute;
  top: 100px;
  left: 0;
  animation: drive 5s both infinite cubic-bezier(1, 0.04, 1, 1);
}

.cloud {
  position: absolute;
  left: -300px; /* Ensure clouds start off-screen */
}
.cloud:nth-child(1) {
  width: 200px;
  top: 120px;
  opacity: 0.5;
  animation: wind 80s linear infinite reverse;
}
.cloud:nth-child(2) {
  width: 300px;
  top: 0;
  animation: wind 50s linear infinite reverse;
}

/*// HEADING ANIMATION //*/

.animated-heading {
  position: absolute;
  top: -100px; /* Start off-screen */
  width: 100%;
  text-align: center;
  font-size: 2.5em;
  animation: slideIn 2s ease-out forwards, colorChange 2s ease-out forwards infinite, grow 2s ease-out forwards;
}

@keyframes slideIn {
  to { top: 50%; } /* Stop in the middle */
}

@keyframes colorChange {
  from { color: black; }
  to { color: red; }
}

@keyframes grow {
  from { transform: scale(0.5); }
  to { transform: scale(1); }
}



/*// KEYFRAMES //*/

@keyframes drive {
  from { transform: translateX(-200px); }
  to { transform: translateX(2000px); }
}

@keyframes wind {
  from { left: -300px; }
  to { left: 100%; }
}

@keyframes jump {
  0% { top: -40px; }
  50% { top: -140px; }
  100% { top: -40px; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}