/*body {
  background-image: url("./images/sky.jpg");
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 250px;
  height: 100vh;
}
.road {
  grid-row: 3/4;
  grid-column: 1/4;
  height: 250px;
  align-self: flex-end;
}
.city {
  grid-row: 2/3;
  grid-column: 1/4;
  align-self: flex-end;
}

.city-image {
  background-image: url("./images/city.png");
  grid-row: 2/3;
  grid-column: 1/4;
  background-repeat: no-repeat;
}

.car {
  width: 400px;
  position: sticky;
  top: 80px;
  left: 20px;
}
*/

body{

  margin: 0;
  padding:0;
}
.InFeRnO{

  height: 100vh;
  width: 100%;
  background-image: url("./images/sky.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.highway{

  height: 200px;
  width: 600%;
  display: block;
  background-image: url("./images/road.jpg");
  background-repeat: repeat;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  background-repeat: repeat-x;
  animation: 5s highway linear infinite;
}

@keyframes highway {

  25%{

      transform: translateX(-100px);
  }

  50%{

      transform: translateX(-50px);
  }

  75%{

      transform: translateX(-90px);
  }
}

.city{

  height: 210px;
  width: 200%;
  display: block;
  background-image: url("./images/city.png");
  position: absolute;
  left: 0;
  right: 0;
  bottom: 200px;
  z-index: 1;
  animation: 5s city linear infinite;
  background-repeat: repeat-x;
}

@keyframes city {

  100%{

      transform: translate(-1400px);
  }
}

.car{

  width: 400px;
  position: absolute;
  left: 30%;
  transform: translateX(-50);
  z-index: 2;
  bottom: 100px;


}

.car img{

  width: 100%;
  animation: car infinite 1s linear;
}

@keyframes car {

  100%{
       transform: translateY(-1px);
  }
  50%{
      transform: translateY(1px);
  }
  0%{
      transform: translateY(-1px);
}

}

.wheel{

  left: 50%;
  bottom: 180px;
  position: absolute;
  z-index: 2;
  transform: translateX(-50px);


}

.wheel img{

  width: 71px;
  height: 71px;

}

.back-wheel{

  left: -300px;
  position: absolute

}

.front-wheel{

  right: -15px;
  position: absolute;
}


@keyframes wheel {

  100% {
      transform: rotate(360deg);
  }

}