html, body {
  margin: 0;
  padding: 0;
  background-color: #87CEFA;
}

.background-loader {
  background-image: url(background.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.car-1 {
  background-image: url(car1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 300px;
  height: 100px;
  animation: car-1-moveLeftCar 4s linear infinite;
  position: absolute;
  bottom: 16%;
  right: -50%;
}

@keyframes car-1-moveLeftCar {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-140vw - 300px));
  }
}

.car-1-wheel {
  background-image: url(Wheel.png);
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: car-1-wheelRotate 2s linear infinite;
  z-index: 996;
}

.car-1-wheel-left {
  position: absolute;
  bottom: -17%;
  left: 12.2%;
}

.car-1-wheel-right {
  position: absolute;
  bottom: -16%;
  right: 8.5%;
}

@keyframes car-1-wheelRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.car-2 {
  background-image: url(car2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 300px;
  height: 100px;
  animation: car-2-moveRightCar 4s linear infinite; 
  position: absolute;
  bottom: 4%;
  z-index: 997;
  left: -50%; 
}

@keyframes car-2-moveRightCar {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(140vw + 300px));
  }
}

.car-2-wheel {
  background-image: url(Wheel.png);
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: car-2-wheelRotate 2s linear infinite;
  z-index: 999;
}

.car-2-wheel-left {
  position: absolute;
  bottom: -15%;
  left: 8.5%;
}

.car-2-wheel-right {
  position: absolute;
  bottom: -15%;
  left: 71.2%;
}

@keyframes car-2-wheelRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 600px)  {
  .background-loader {
    background-size: cover;
  }
}

@media (max-width: 750px)  {
  .car-1 {
    width: 200px;
    height: 75px;
    bottom: 16%;
  }

  .car-1-wheel {
    width: 37px;
    height: 37px;
  }

  .car-1-wheel-left {
    bottom: -14%;
    left: 11.2%;
  }
  
  .car-1-wheel-right {
    bottom: -14%;
    right: 7.5%;
  }

  .car-2 {
    width: 200px;
    height: 75px;
    bottom: 4%;
  }

  .car-2-wheel {
    width: 37px;
    height: 37px;
  }

  .car-2-wheel-left {
    bottom: -14%;
    left: 7.7%;
  }
  
  .car-2-wheel-right {
    bottom: -14%;
    left: 70.3%;
  }
 
}