* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  overflow: hidden;
}

main {
  height: 100vh;
  width: 100vw;
}

.sky {
  height: 30%;
  width: 100%;
  background-image: url(https://images.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-size: cover;

}

.green {
  height: 30%;
  width: 100%;
  background-color: green;
  background-image: url(https://wallpapercave.com/wp/wp7512360.jpg)
}

.road {
  height: 40%;
  width: 100%;
  background-color: black;
  position: relative;
}

.stripes {
  height: 10px;
  width: 100%;
  border-top: 10px dashed white;
  position: relative;
  top: 50%;

}

.road p {
  font-size: 5rem;
  position: absolute;
  
}

.tractor {
  top: -10%;
  animation-name: drive;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  /* animation-direction: reverse; */
}

.car {
  top: 40%;
  animation-name: drive;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}

/* Animations */

@keyframes drive {
  from {
    transform: translateX(-2vw) scale(-1, 1);
  }

  to {
    transform: translateX(105vw) scale(-1, 1);
  }
}


.sky p {
  font-size: 5rem;
  position: absolute
}

.bird {
  /* top: 40%; */
  animation-name: drive;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

/* Animations */

@keyframes drive {
  from {
    transform: translateX(-2vw) scale(-1, 1);
  }

  to {
    transform: translateX(105vw) scale(-1, 1);
  }
}

.green p{
  font-size: 100px;
  position: relative;
  top: 98px;
}

.green h1{
  font-size: 100px;
  position: relative;
  left: 1300px;
  bottom: 30px;
}

.road h1{
  font-size: 80px;
  position: relative;
  bottom: 50px;
  left: 1430px;
}

.tractor{
  position: relative;
  top: 25px;
}