/* car */

#car {
  position: relative;
  width: 20%;
  height: 20%;
  transform: translate(var(--mouse-x, 0px), 75%);
  transition: transform 0.1s ease-out;
}

#c-body {
  animation: 0.5s linear bumpy-road -0.1s infinite;
  position: absolute;
}

#c-wheel1,
#c-wheel2 {
  width: 15%;
  position: absolute;
  z-index: -1;
  animation: 0.5s linear bumpy-road infinite;
  top: 30%;
}

#c-wheel1 {
  left: 16%;
}

#c-wheel2 {
  left: 74%;
}

/* background */

.overlap {
  overflow: hidden;
  place-items: center;
  width: 100%;
  max-width: 1600px;
}

#sky {
  animation: 10s linear side-scroll -1s infinite;
}

#field {
  animation: 6s linear side-scroll -1s infinite;
}

#road {
  transform: translateY(10%);
}

#foreground {
  z-index: 10;
  animation: 2s linear side-scroll infinite;
}

/* Desktop Media Query */

@media screen and (width >= 450px) {

  #c-wheel1,
  #c-wheel2 {
    width: 15%;
    top: 32%;
  }

  
}

@media screen and (width >= 900px) {

  #c-wheel1,
  #c-wheel2 {
    width: 15%;
    top: 35%;
  }
}

/* css animations */

@keyframes bumpy-road {
  0% {
    transform: translateY(0vw);
  }
  25% {
    transform: translateY(0.1vw);
  }
  50% {
    transform: translateY(-0.15vw);
  }
  75% {
    transform: translateY(0.2vw);
  }
  100% {
    transform: translateY(0vw);
  }
}

@keyframes side-scroll {
  0% {
    transform: translateX(1%) scale(105%);
  }
  50% {
    transform: translateX(-1%) scale(105%);
  }
  100% {
    transform: translateX(1%) scale(105%);
  }
}