body {
  background-color: gray;  
  padding: 0;
  margin: 0;
  overflow:hidden;
}
main {
  padding: 10px;
  animation-name: ciel;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

footer {
  height: 30px;
  border-bottom: dashed white 8px;
}


#voiture {
  width: 200px;
  display: flex;
  flex-direction: column;
  animation-name: voiture;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#haut {
  position: relative;
  left: 20px;
  width: 120px;
  height: 30px;
  background-image: linear-gradient(-45deg, black, darkblue 90%);
  border: red solid;
  border-width: 3px 0 0 3px;
  border-radius: 15px 15px 0 0;
  transform: skew(10deg);
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

#haut div {
  width: 7px;
  height: 30px;
  background: red;
}

#bas {
  width: 200px;
  height: 40px;
  background-image: linear-gradient(red, brown 15%, white 17%, gold 27%, red 37%, brown 90%);
  border-radius: 15px 30px 8px 5px;
}

div.corners {
  background-color: white;
  background-image: none;
  width: 50px;
  height: 30px;
}

div div:first-child {
  width: 35px;
}

div.roue {
  background-color: transparent;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-image: radial-gradient(orange, orange 45%, black 50%, black 65%, transparent 70%);
  width: 38px;
  height: 38px;
  top: 60px;
  animation-name: roues;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  display: flex;
}

#r1 {
  left: 25px;
}

#r2 {
  left: 148px;
}

@keyframes roues {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


@keyframes voiture {
  from {
    transform: translate(-250px);
  }
  to {
    transform: translate(100vw);
  }
}

@keyframes ciel {
  from {
    background-color:aliceblue;
  }
  to {
    background-color:#115;
  }
}