body
{
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 100vh;
  position: relative;
  background-color: rgb(255, 239, 255);
}

body{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.truck-container{
  position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}
.container{
  position: relative;
  animation-name: e13;
  animation-duration:10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  margin: auto;
}
@keyframes e13 {
  0%  {transform: translate(-1000px, 0px);}
  50%  {transform: translate(20px, 0px);}
  100% {transform: translate(1200px, 0px);}
}
  
.container
{
    height:400px;
    width:400px;
    margin:0 auto;
}
.ts
{
    position:relative;
    width:400px;
    left:15px;
    top:100px;
    animation:bounce 0.5s infinite ;
}
@keyframes bounce{
  100%{
    transform:translateY(7px);
  }
}

.box
{
    height:150px;
    width:250px;
    background-color:pink;
    position: relative;
    border-radius: 5px 5px 0 0;
}

.front
{
  position:absolute;
  height:20px;
  width:80px;
  background-color: pink;
  right:66px;
  top:30px;
  border-radius: 5px 25px 0 0;  

}
.front1
{
  position:absolute;
  height:60px;
  width:95px;
  background-color: pink;
  right:-15px;
  top:14px;
  border-radius: 2px 35px 0 0;
}

.front2
{
  position:absolute;
  height:60px;
  width:120px;
  background-color:pink;
  right:-40px;
  top:60px;
  border-radius: 2px 10px 0 0;
}

.hood
{
  width:380px;
  background-color: rgb(11, 9, 9);
  height:12px;
  position:absolute;
  left:-252px;
  top:120px;
  border-radius:0px 15px 0 0;
}

.window
{
  position:absolute;
  background-color: purple;
  height: 35px;
  width:65px;
  left:13px;
  top:22px;
  border-radius: 5px 30px 2px 2px ;
  border:2px solid black;
}

.tyre1,.tyre2,.tyre3,.tyre4
{
  position:absolute;
  height:55px;
  width:55px;
  background-color: rgb(0, 0, 0);
  border-radius: 50%;
  border:2px solid  rgb(212, 79, 101);
  bottom:-40px;
  animation:spin 1s infinite linear;
}

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

.tyre1{
  left:5px;
}

.tyre2{
  left:70px;
}

.tyre3
{
  left:180px;
}

.tyre4{
  left:310px;
}

.tyre1::after,.tyre2::after,.tyre3::after,.tyre4::after
{
 content: "";
 position:absolute;
 background-color: rgb(87, 88, 82);
 width:40px;
 height:40px;
 border-radius: 50%;
 left:7.5px;
 top:7px;
}
.r1,.r2,.r3,.r4
{
  height:23px;
  width:3px;
  background-color: black;
  z-index:1;
}
.r1{
  position: absolute;
  rotate:90deg;
  left:40px;
  top:10px;
}

.r2{
  position: absolute;
  rotate:180deg;
  left:40px;
  top:22px;
}
.r3{
  position: absolute;
  rotate:270deg;
  left:30px;
  top:29px;
}
.r4{
  position: absolute;
  rotate:360deg;
  left:18px;
  top:23px;
}

.light{
  height:20px;
  width:125px;
  background-color: rgb(88, 73, 73);
  position:absolute;
  top:90px;
  border-radius:0 2px 2px 0;
}
.trapezoid {
  position:absolute;
  width: 15px;
  height: 100px;
  background: rgb(255, 92, 119);
  transform: perspective(8px) rotateX(7deg);
	rotate: 270deg;
  margin: 50px;
  left:95px;

}
.pipe
{
  position:absolute;
  height:60px;
  width:8px;
  background-color: rgb(0, 0, 0);
  top:-50px;
  z-index:-1;
  border-radius: 0 50px 0 0;
}
.pipe2
{
  position:absolute;
  height:20px;
  width:8px;
  background-color: rgb(0, 0, 0);
  top:-56px;
  z-index:-1;
  border-radius: 50px 0 0 50px;
  rotate:90deg;
  left:-8px;
}
.img1{
  rotate:270deg;
  position:absolute;
  left:-109px;
  height:90px;
  top:-92px;
}
.img2{
  rotate:270deg;
  position:absolute;
  left:-150px;
  height:70px;
  top:-62px;
}
.img3{
  rotate:270deg;
  position:absolute;
  left:-120px;
  height:80px;
  top:-62px;
}
.img4{
  rotate:270deg;
  position:absolute;
  left:-70px;
  height:70px;
  top:-72px;
}
.img5{
  rotate:270deg;
  position:absolute;
  left:-60px;
  height:40px;
  top:-82px;
}
.img6{
  rotate:270deg;
  position:absolute;
  left:-120px;
  height:60px;
  top: -89px;
}
.img7{
  rotate:270deg;
  position:absolute;
  left:-110px;
  height:60px;
  top:-72px;
}
.img8{
  rotate:270deg;
  position:absolute;
  left:-140px;
  height:55px;
  top:-72px;
}
.img9{
  rotate:270deg;
  position:absolute;
  left:-150px;
  height:50px;
  top:-82px;
}
.img10{
  rotate:270deg;
  position:absolute;
  left:-170px;
  height:70px;
  top:-72px;
}
.img11{
  rotate:270deg;
  position:absolute;
  left:-200px;
  height:80px;
  top:-72px;
}