:root{
    --color-p:lightblue;
    --montagne: #bba;
}

p{
    color:var(--color-p);
}

/* The Confidential layout on top of the divMain*/
#Confidentiel{
    transform: rotate(15deg) translate(0px, 200px);
    font-size: 40px;
    color: white;
    background: linear-gradient(90deg, rgba(128,128,128,0.5) 40%, #FFCC99);
    text-align: center;
    border-color: black;
    border-style: dashed solid;
    margin-right: -100px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* H1 main of the exercise on Confidential layout on top of the text*/
#h1Main{
    background: none;
    border: none;
}

/* Div Main of the exercise on Confidential layout on top of the text*/
#divMain p{
    color:black;
}

/* The parent of all rules for the car */
#bodyCar{
  position: relative;
  background-color: gray;
  overflow: hidden;
  height: 200px;
  
}

/* The sky */
#mainCar{
  padding: 10px;
  background-color: aliceblue;
}

#voiture{
  width:200px;
  display: flex;
  flex-direction: column;
  position: relative;
  left:40%;
}

/* The top of the car*/
#haut{
  position: relative;
  left: 25px;
  width: 120px;
  height: 30px;
  background-image: linear-gradient(-45deg, black, darkblue 85%);
  border: red solid;
  border-width: medium;
  border-width: 3px 0 0 3px;
  border-radius: 16px 16px 0 0;
  transform: skew(12deg);
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

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


/* The bottom of the car*/
#bas{
  width: 200px;
  height: 40px;
  background-image: linear-gradient(red, brown 20%, white 17%, gold 27%, red 37%, brown 90%);
  border-radius: 16px 30px 8px 5px;
}

/* The general style for the wheel*/
.roue{
  background-color: transparent;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-image: radial-gradient(orange, orange 45%, black 55%, black 65%, transparent 75%);
  width: 40px;
  height: 40px;
  top: 60px;
  display: flex;
}

/* The wheel 1*/
#r1{
  left: 25px;
}

/* The wheel 2*/
#r2{
  left: 145px;
}

/* The road */
#footerCar{
  height: 30px;
  border-bottom: dashed white 10px;
}



/* Animation of the mountain */

#animationMontagne {
  overflow: hidden;  
  width: 1000x;
  max-width: 1000px;
}

#soleil {
  background-image: radial-gradient(white, yellow 10%,  transparent 50%);
  height: 60px;
  width: 60px;
  position: relative;
  left: 400px;
  animation-name:animationSoleil;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 0px 300px;
}

#ciel {
  background: cornflowerblue;
  height: 200px;
  animation-name: animationCiel;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#terre {
  background: var(--montagne);
  height: 50px;
  display: flex;
}

.montagne{
  height: 200px;
  width: 200px;
  background: var(--montagne);
}

.montagne:first-child {
  transform:  skewX(10deg) scale(1.4, 1) rotate(45deg) translate(-50px, -130px);
  background-image: radial-gradient(circle at top left,white, transparent 30%);
}

.montagne:nth-child(2) {
   transform:  rotate(45deg) translate(0, -100px);
   background-image: radial-gradient(circle at top left,white, var(--montagne) 20%);
}

.montagne:nth-child(3) {
  background-image: radial-gradient(circle at top left,#fff 5%, var(--montagne) 30%);
  transform:  scale(1.7, 1.2) rotate(45deg) translate(-10px, -100px);
}

.montagne:nth-child(4) {
   transform:  skewX(20deg)  rotate(45deg) translate(0, -100px);
   background-image: radial-gradient(circle at top left,white, var(--montagne) 20%);
}

.montagne:nth-child(5) {
  transform:  skewX(-10deg) scale(1.7, 1) rotate(45deg) translate(-40px, -50px);
  background-image: radial-gradient(circle at top left,#fff , var(--montagne) 20%);
}

/* Keyframe animation of the sun */
@keyframes animationSoleil {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

/* Keyframe animation of the sky*/
@keyframes animationCiel {
  0% {
    background-color: black;
  }
  20% {
    background-color: blueviolet;
  }
  40% {
    background-color: cornflowerblue;
  }
  60% {
    background-color: cornflowerblue;
  }
  80% {
    background-color: blueviolet;
  }
  100% {
    background-color: black;
  }
}


/* Animation of the car */

#mainCarAnimation{
  padding: 10px;
  background-color: aliceblue;
  animation-name: animationSky;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


#voitureAnimation{
  width:200px;
  display: flex;
  flex-direction: column;
  position: relative;
  left:40%;
  animation-name: animationCar;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

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

@keyframes animationSky {
  from {
    background-color:aliceblue;
  }
  to {
    background-color:darkslateblue;
  }
}


@keyframes animationCar {
  from {
    transform: translate(-600px);
  }
  to {
    transform: translate(55vw);
  }
}


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