* {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.box_sky,
.box_sky_half,
.box_land,
.box_road {
  left: 0px;
  top: 0px;
  width: 100vw;
}

.box_sky {
  height: 35vh;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 255, 1) 0%,
    rgba(0, 0, 255, 0.5) 100%
  );
  overflow: hidden;
}

.box_sky_half {
  height: 17.5vh;
  background: transparent;
  position: relative;
}

.box_land {
  height: 30vh;
  background: linear-gradient(
    to bottom,
    rgba(0, 128, 0, 0.5) 0%,
    rgba(0, 128, 0, 1) 100%
  );
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.box_road {
  height: 35vh;
  background-image: url("../img/road.png");
  background-repeat: repeat-x;
  overflow: hidden;
}

.img_house {
  width: 5wh;
  height: auto;
}

.img_springfield {
  height: 30vh;
}

.img_cloud_solid,
.img_cloud_transparent_5s,
.img_cloud_transparent_8s,
.img_cloud_transparent_11s,
.img_cloud_transparent_16s {
  width: auto;
  position: absolute;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
}

.img_cloud_solid {
  height: 15vh;
  animation-name: moving_cloud;
  animation-duration: 30s;
}

.img_cloud_transparent_5s {
  height: 9vh;
  opacity: 0.5;
  animation-name: moving_cloud;
  animation-duration: 16s;
  animation-delay: 5s;
}

.img_cloud_transparent_8s {
  height: 12vh;
  opacity: 0.5;
  animation-name: moving_cloud;
  animation-duration: 20s;
  animation-delay: 8s;
}

.img_cloud_transparent_11s {
  height: 10vh;
  opacity: 0.5;
  animation-name: moving_cloud;
  animation-duration: 20s;
  animation-delay: 11s;
}

.img_cloud_transparent_16s {
  height: 14vh;
  opacity: 0.7;
  animation-name: moving_cloud;
  animation-duration: 22s;
  animation-delay: 16s;
}

.img_car_old,
.img_car_sport {
  width: auto;
  left: -20%;
  position: absolute;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.img_car_old {
  height: 25vh;
  bottom: -5vh;
  animation-name: moving_car;
  animation-duration: 18s;
  animation-delay: 2s;
}

.img_car_sport {
  height: 30vh;
  bottom: 10vh;
  animation-name: moving_car;
  animation-duration: 7s;
  animation-delay: 5s;
}

@keyframes moving_cloud {
  0% {
    left: 100%;
    top: 0%;
  }
  100% {
    left: -10%;
    top: 0%;
  }
}

@keyframes moving_car {
  0% {
    left: -10%;
  }
  70% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}