body {
  margin: 0;
  overflow: hidden;
}

main {
  display: flex;
  flex-direction: column;
  width: calc(100vw * 4);
  height: 100vh;
}

aside {
  width: 100%;
  height: 100%;
}

.sky {
  position: relative;
  width: 100%;
  height: 60%;
  background: url(/assets/images/sky.jpg);
  background-size: cover;
}

.city {
  position: absolute;
  width: 500%;
  height: 40%;
  bottom: 24%;
  background: url(/assets/images/city.png);

  animation: car-animation 10s linear infinite;
}

.road {
  position: relative;
  width: 400%;
  height: 40%;
  background: url(/assets/images/road.jpg);

  animation: car-animation 10s cubic-bezier(0.4, 0, 0.34, 0.94) infinite;
}

.car {
  position: absolute;
  width: 500px;
  height: 230px;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
}

.car-image {
  width: 100%;
  height: 100%;
}

.back-wheel-image {
  position: absolute;
  width: 100px;
  height: 100px;
  bottom: 10px;
  left: 40px;

  animation: wheel-animation 10s linear infinite;
}

.front-wheel-image {
  position: absolute;
  width: 100px;
  height: 100px;
  bottom: 10px;
  right: 55px;

  animation: wheel-animation 10s linear infinite;
}

@keyframes car-animation {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-80%);
  }
}

@keyframes wheel-animation {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-500deg);
  }
  100% {
    transform: rotate(-410deg);
  }
}