.htmll {
  box-sizing: border-box;

  --black: #1a1c20;
  --white: #fff;
  --green: #00c380;
  --d-green: #019b66;
  --gray: #c1c1c1;
  --l-gray: #c4c4c4;
  --m-gray: #373838;
  --d-gray: #282724;
  --d-blue: #202428;
  --orange: #ef6206;
  --yellow: #dfa500;
  --l-yellow: #deb953;
  --light: #fbfbfb;
  --n-road: -4em;
  --p-road: 7em;

  background-color: #f6c12e;
  height: 40vh;
  margin-bottom: 50px;
}

.htmll *,
.htmll *::before,
.htmll *::after {
  box-sizing: inherit;
}

.bodyy::before,
.bodyy::after {
  content: " ";
  position: absolute;
}

.bodyy {
  margin: 0;
  height: 40vh;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  animation: car 3.5s cubic-bezier(0.57, 0.63, 0.49, 0.65) infinite;

  background-image: 


    /* ===rubber-l */ radial-gradient(
      circle at 49% 117%,
      var(--black) 37%,
      transparent 38%
    ),
    radial-gradient(circle at -24% 50%, var(--white) 31%, transparent 49%),
    radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%),
    radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%),
    linear-gradient(var(--black) 100%, transparent 0),
    /* rubber-l=== */ /* ===rubber-r */
      radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%),
    radial-gradient(circle at 124% 50%, var(--white) 31%, transparent 49%),
    radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%),
    radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%),
    linear-gradient(var(--black) 100%, transparent 0),
    /* rubber-r=== */ /* ===shadow */
      linear-gradient(#f6c12e 100%, transparent 0);

  /* shadow=== */

  background-size: 


    /* ===rubber-l */ 2.5em 2.5em, 0.7em 0.6em, 2.5em 0.9em,
    2.5em 0.9em, 1.95em 3.9em, /* rubber-l=== */ /* ===rubber-r */ 2.5em 2.5em,
    0.7em 0.6em, 2.5em 0.9em, 2.5em 0.9em, 1.95em 3.9em,
    /* rubber-r=== */ /* ===shadow */ 13em 0.9em;

  /* shadow=== */

  background-position: 


    /* ===rubber-l */ calc(50% - 6.4em) calc(50% - 1.7em),
    calc(50% - 5.26em) calc(50% - -3.4em), calc(50% - 6.5em) calc(50% - -3.8em),
    calc(50% - 4.3em) calc(50% - -3.2em), calc(50% - 6.58em) calc(50% - -1.5em),
    /* rubber-l=== */ /* ===rubber-r */ calc(50% - -6.45em) calc(50% - 1.7em),
    calc(50% - -5.26em) calc(50% - -3.4em),
    calc(50% - -6.5em) calc(50% - -3.8em), calc(50% - -4.3em) calc(50% - -3.2em),
    calc(50% - -6.58em) calc(50% - -1.5em),
    /* rubber-r=== */ /* ===shadow */ center calc(50% - -3.8em);

  /* shadow=== */
}

.bodyy::before {
  width: 15.5em;
  height: 62.9em;
  top: calc(50% - 26.2em);
  background-size: 24.6% 491%;
  background-repeat: no-repeat;
  background-position: center 0;
  animation: line 1.5s infinite linear, move-road 3.5s infinite linear;
  transform: perspective(311px) rotateX(83deg)
    translate3d(var(--n-road), -11.975em, 0);
  background-image: repeating-linear-gradient(
    to top,
    var(--white),
    var(--white) 4.6%,
    transparent 0,
    transparent 13.01%
  );
}
.plate {
  position: absolute;
  z-index: 100;
  color: black;
  bottom: 38.5%;
  font-weight: 600;
}

.bodyy::after {
  width: 15.2em;
  height: 13.2em;
  top: calc(48% - 8.8em);
  left: calc(50% - 7.55em);
  background-repeat: no-repeat;
  animation: light 1s linear infinite, shake 3.5s linear infinite;
  color: black;
  background-image: 

    /* ===ceiling */ radial-gradient(
      58em 20em at 50% 215%,
      transparent 20%,
      var(--white) 20.5%,
      var(--white) 20.8%,
      #f6c12e 21.5%
    ),
    /* ceiling=== */ /* ===antenna */
      radial-gradient(circle at center 100%, var(--black) 30%, transparent 0),
    /* antenna=== */ /* ===antenna */
      linear-gradient(var(--white) 100%, transparent 0),
    /* antenna=== */ /* ===glass-l */
      radial-gradient(
        17.8em 37em at 70% 240%,
        var(--black) 30%,
        transparent 30.5%
      ),
    /* glass-l=== */ /* ===glass-r */
      radial-gradient(
        17.8em 37em at 31% 240%,
        var(--black) 30%,
        transparent 30.5%
      ),
    /* glass-r=== */ /* ===light */
      radial-gradient(
        circle,
        var(--light) 48%,
        var(--black) 52%,
        var(--black) 59%,
        transparent 62%
      ),
    /* light=== */ /* ===light */
      radial-gradient(
        circle,
        var(--light) 48%,
        var(--black) 52%,
        var(--black) 59%,
        transparent 62%
      ),
    /* light=== */ /* ===hood-ro */
      radial-gradient(1em 1em at 102% 100%, var(--m-gray) 28%, #f3f3f3 30%),
    /* hood-ro=== */ /* ===hood-ro */
      radial-gradient(1em 1em at 97% -7%, var(--m-gray) 28%, var(--l-gray) 30%),
    /* hood-ro=== */ /* ===hood-ro */
      radial-gradient(1em 1em at -6% 102%, var(--m-gray) 28%, #efefef 30%),
    /* hood-ro=== */ /* ===hood-ro */
      radial-gradient(1em 1em at -6% -1%, var(--m-gray) 28%, var(--l-gray) 30%),
    /* hood-ro=== */ /* ===hood-f */
      linear-gradient(
        to top,
        var(--m-gray) 50%,
        var(--d-gray) 0,
        var(--d-gray) 58%,
        var(--m-gray) 0
      ),
    /* hood-f=== */ /* ===hood-e */
      linear-gradient(
        to top,
        var(--l-gray) 30%,
        var(--white) 100%,
        transparent 0
      ),
    /* hood-e=== */ /* ===hood-l */
      radial-gradient(
        16.4em 30.1em at 209% 333%,
        var(--white) 30%,
        transparent 30.2%
      ),
    /* hood-l=== */ /* ===hood-r */
      radial-gradient(
        16.4em 30.1em at -109% 333%,
        var(--white) 30%,
        transparent 30.2%
      ),
    /* hood-r=== */ /* ===hood-o */
      linear-gradient(var(--gray) 100%, transparent 0),
    /* hood-o=== */ /* ===hood */
      linear-gradient(var(--white) 100%, transparent 0),
    /* hood=== */ /* ===mirror */
      radial-gradient(6.7em 2.5em at 154% 8%, var(--black) 30%, transparent 33%),
    /* mirror=== */ /* ===mirror */
      radial-gradient(6.7em 2.5em at -53% 8%, var(--black) 30%, transparent 33%),
    /* mirror=== */ /* ===guide-l */
      linear-gradient(var(--orange) 100%, transparent 0),
    /* guide-l=== */ /* ===guide-r */
      linear-gradient(var(--orange) 100%, transparent 0),
    /* guide-r=== */ /* ===plaque */
      linear-gradient(var(--yellow) 100%, transparent 0),
    /* plaque=== */ /* ===plaque */
      linear-gradient(var(--l-yellow) 100%, transparent 0),
    /* plaque=== */ /* ===bumper */
      linear-gradient(var(--d-blue) 100%, transparent 0),
    /* bumper=== */ /* ===bumper-l */
      radial-gradient(circle at 124% 39%, var(--d-blue) 60%, transparent 64%),
    /* bumper-l=== */ /* ===bumper-r */
      radial-gradient(circle at -44% 39%, var(--d-blue) 60%, transparent 64%),
    /* bumper-r=== */ /* ===bumper-d */
      radial-gradient(
        13.2em 2em at 50% 59%,
        var(--l-gray) 96%,
        transparent 100%
      ),
    /* bumper-d=== */ /* ===bumper-l */
      radial-gradient(
        1.6em 1.6em at 75% -9%,
        var(--l-gray) 60%,
        transparent 64%
      ),
    /* bumper-l=== */ /* ===bumper-r */
      radial-gradient(
        1.6em 1.6em at 15% -9%,
        var(--l-gray) 60%,
        transparent 64%
      ),
    /* bumper-r=== */ /* ===floor */
      linear-gradient(var(--d-blue) 100%, transparent 0),
    /* floor=== */ /* ===floor-l */
      radial-gradient(
        6.9em 4.6em at 295% 3%,
        var(--d-blue) 30%,
        transparent 31%
      ),
    /* floor-l=== */ /* ===floor-r */
      radial-gradient(
        6.9em 4.6em at -189% 3%,
        var(--d-blue) 30%,
        transparent 31%
      );

  /* floor-r=== */

  background-size: 

    /*=== ceiling */ 61.5% 20%,
    /* ceiling=== */ /* ===antenna */ 5% 6%,
    /* antenna=== */ /*=== antenna */ 0.4% 39%,
    /* antenna=== */ /* ===glass-l */ 60% 30%,
    /* glass-l=== */ /* ===glass-r */ 60% 30%,
    /* glass-r=== */ /* ===light */ 16% 16%,
    /* light=== */ /* ===light */ 16% 16%,
    /* light=== */ /* ===hood-ro */ 2.4% 2%,
    /* hood-ro=== */ /* ===hood-ro */ 2.4% 2.3%,
    /* hood-ro=== */ /* ===hood-ro */ 2.4% 2.3%,
    /* hood-ro=== */ /* ===hood-ro */ 2.4% 2.3%,
    /* hood-ro=== */ /* ===hood-f */ 91% 12%,
    /* hood-f=== */ /* ===hood-e */ 93.9% 17%,
    /* hood-e=== */ /* ===hood-l */ 12% 17.5%,
    /* hood-l=== */ /* ===hood-r */ 12% 17.5%,
    /* hood-r=== */ /* ===hood-o */ 38% 1.1%,
    /* hood-o=== */ /* ===hood */ 77% 25%, /* hood=== */ /* ===mirror */ 9% 30%,
    /* mirror=== */ /* ===mirror */ 9% 30%,
    /* mirror=== */ /* ===guide-l */ 8.4% 3%,
    /* guide-l=== */ /* ===guide-r */ 8.4% 3%,
    /* guide-r=== */ /* ===plaque */ 33% 6.5%,
    /* plaque=== */ /* ===plaque */ 36% 9%,
    /* plaque=== */ /* ===bumper */ 87% 30%,
    /* bumper=== */ /* ===bumper-l */ 10% 12%,
    /* bumper-l=== */ /* ===bumper-r */ 10% 12%,
    /* bumper-r=== */ /* ===bumper-d */ 78% 35%,
    /* bumper-d=== */ /* ===bumper-l */ 11% 8%,
    /* bumper-l=== */ /* ===bumper-r */ 11% 8%,
    /* bumper-r=== */ /* ===floor */ 68% 8%,
    /* floor=== */ /* ===floor-l */ 5% 7%,
    /* floor-l=== */ /* ===floor-r */ 5% 7%;

  /* floor-r=== */

  background-position: 


    /*=== ceiling */ 50.5% 0,
    /* ceiling=== */ /* ===antenna */ 90% 37%,
    /* antenna=== */ /*=== antenna */ 88% 1.2%,
    /* antenna=== */ /* ===glass-l */ 0 11.7%,
    /* glass-l=== */ /* ===glass-r */ 100% 11.7%,
    /* glass-r=== */ /* ===light */ 5% 63%,
    /* light=== */ /* ===light */ 95% 63%,
    /* light=== */ /* ===hood-ro */ 4.1% 55.7%,
    /* hood-ro=== */ /* ===hood-ro */ 4.1% 65.9%,
    /* hood-ro=== */ /* ===hood-ro */ 95.8% 55.7%,
    /* hood-ro=== */ /* ===hood-ro */ 95.8% 65.8%,
    /* hood-ro=== */ /* ===hood-f */ center 62%,
    /* hood-f=== */ /* ===hood-e */ 49% 63.6%,
    /* hood-e=== */ /* ===hood-l */ 3.4% 46.2%,
    /* hood-l=== */ /* ===hood-r */ 96.5% 46.2%,
    /* hood-r=== */ /* ===hood-o */ center 40.9%,
    /* hood-o=== */ /* ===hood */ center 50.3%,
    /* hood=== */ /* ===mirror */ 5.7% 48.6%,
    /* mirror=== */ /* ===mirror */ 95% 48.6%,
    /* mirror=== */ /* ===guide-l */ 5% 75.2%,
    /* guide-l=== */ /* ===guide-r */ 95% 75.2%,
    /* guide-r=== */ /* ===plaque */ 51% 86%,
    /* plaque=== */ /* ===plaque */ 51.5% 87.3%,
    /* plaque=== */ /* ===bumper */ center 71.9%,
    /* bumper=== */ /* ===bumper-l */ -0.8% 77.8%,
    /* bumper-l=== */ /* ===bumper-r */ 101.7% 77.8%,
    /* bumper-r=== */ /* ===bumper-d */ center 80.2%,
    /* bumper-d=== */ /* ===bumper-l */ 4% 85.9%,
    /* bumper-l=== */ /* ===bumper-r */ 97% 85.9%,
    /* bumper-r=== */ /* ===floor */ center 92.5%,
    /* floor=== */ /* ===floor-l */ 11.7% 92.6%,
    /* floor-l=== */ /* ===floor-r */ 88.3% 92.6%;

  /* floor-r=== */
}

@keyframes line {
  100% {
    background-position: center 100%;
  }
}

@keyframes car {
  15%,
  23% {
    transform: translate3d(-2.3em, 0, 0);
  }

  36%,
  42% {
    transform: translate3d(-0.8em, 0, 0);
  }

  61%,
  71.5% {
    transform: translate3d(2.8em, 0, 0);
  }

  81%,
  88% {
    transform: translate3d(1.5em, 0, 0);
  }
}

@keyframes move-road {
  5.5% {
    transform: perspective(311px) rotateX(83deg)
      translate3d(var(--n-road), -11.975em, 0);
  }

  27%,
  51% {
    transform: perspective(311px) rotateX(83deg)
      translate3d(var(--p-road), -11.975em, 0);
  }

  73%,
  100% {
    transform: perspective(311px) rotateX(83deg)
      translate3d(var(--n-road), -11.975em, 0);
  }
}

@keyframes light {
  0%,
  37% {
    --light: #fbfbfb;
  }

  50% {
    --light: #f1f1f1;
  }

  62% {
    --light: #fbfbfb;
  }

  65% {
    --light: #f1f1f1;
  }

  95% {
    --light: #fbfbfb;
  }

  100% {
    --light: #f1f1f1;
  }
}
/* 
@keyframes shake {
  5%,
  26% {
    transform: rotate(-1.5deg);
  }

  33%,
  41% {
    transform: rotate(-0.5deg);
  }

  48%,
  69% {
    transform: rotate(1.5deg);
  }

  80%,
  95% {
    transform: rotate(0.5deg);
  }
} */

@media screen and (max-width: 36em) {
  .htmll {
    transform: scale(0.5);
  }

  .bodyy::before {
    width: 11em;
    --n-road: -4em;
    --p-road: 4em;
  }
  .left-text {
    top: 25% !important;
    left: 0 !important;
    right: 0;
    z-index: 20;
  }
  .left-text > h4,
  .left-text > h6,
  .right-text > h4,
  .right-text > h6 {
    text-align: center !important;
    font-size: calc(1.5vw + 1vh + 0.5vmin) !important;
  }
  .right-text {
    top: calc(80% - 2px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20;
  }
}
.bg-car {
  background-color: #f6c12e;
  position: absolute;
  height: 35vh;
  width: 100%;
  bottom: 20px;
}

.left-text,
.right-text {
  position: absolute;
}

.left-text {
  top: 50%;
  left: 20%;
}
.left-text > h4 {
  font-size: 40px;
  font-family: "Inconsolata";
  font-weight: 600;
}
.right-text > h4 {
  font-size: 40px;
  font-family: "Inconsolata";
  font-weight: 600;
}
.left-text > h6,
.right-text > h6 {
  text-align: center;
}

.right-text {
  top: 50%;
  right: 20%;
}