body {
  width: 100%;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, #5C243B 35%, rgb(9,116,187) 61%,  rgb(9,116,187) 80%);
  margin:0px;
  color: rgb(255, 189, 76);
  }
form {
  color: rgb(255, 189, 76);
  font-size: 60px;

}
.form-control {
  color: rgb(255, 189, 76);
  font-size: 40px;

}
.form {

  background-image: url(../img/gohan.jpg);
  background-size:cover ;
  background-repeat: no-repeat;
  background-position: center;
  background-position: top;
  height:100%;
  width: 100%;
  font-family: 'Titre', sans-serif;
  font-size: 50px;
  text-transform: uppercase; /* Met en majuscules */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Ombre noire */
  color: #ffffff; /* Couleur rouge pour le texte */
  -webkit-text-stroke: 2px black; /* Bordure de 2 pixels de large en noir */

}
@media screen and (max-width: 768px) {
  .form {
    background-size:100% 100% ;
    background-image: url(../img/kid1sm.jpg); /* Image de fond pour les smartphones */
  }
}
button {
  width:30%;
  height:10vh;
}

  #car {
        
    -webkit-box-shadow: 0px 18px 24px 3px #000000; 
    box-shadow: 0px 18px 24px 3px #000000;
    background-image: linear-gradient(to right, #333333 50%, #222222 50%);
    border:5px solid black;
    border-radius:30px;


   
  }
  #car1 {
        
    -webkit-box-shadow: 0px 18px 24px 3px #000000; 
    box-shadow: 0px 18px 24px 3px #000000;
    background-image: linear-gradient(to right, #222222 50%, #333333 50%);
    border:5px solid black;
    border-radius:30px;
    padding: 30px 0 30px 0;
   
  }
  .rounded {
    border-radius: 10px;
    overflow: hidden;
  }
  iframe {
    width: 80%;
    -webkit-box-shadow: 0px 18px 24px 3px #000000; 
    box-shadow: 0px 18px 24px 3px #000000;
    border:15px solid black;
    
  }

.radar {
    width:75%;
    position: relative;
}
.radar3 {
  width:20%;
  position: absolute;
  left:48.5%;
  z-index: 2;
  top:1.3%;
}
.radar3:hover {
  cursor: pointer;
}


.triangle {

  position: absolute;
  z-index: 2;
  width:7%;
  top:45%;
  left:41.5%;
  transform: skew(-10deg);
  rotate: 22deg;
}

.triangle1 {

  position: absolute;
  z-index: 2;
  width:5%;
  top:21%;
  left:50%;
  transform: skew(-12deg);
  rotate: 22deg;
}
.triangle2 {

  position: absolute;
  z-index: 2;
  width:5%;
  top:39%;
  left:24.5%;
  transform: skew(-12deg);
  rotate: 45deg;
}
.triangle3 {

  position: absolute;
  z-index: 2;
  width:5%;
  top:55%;
  left:59%;
  transform: skew(-12deg);
  rotate: 225deg;
}
.triangle4 {

  position: absolute;
  z-index: 2;
  width:5%;
  top:75%;
  left:32%;
  transform: skew(-12deg);
  rotate: 200deg;
}

#map {
    position: absolute;
    top:18.5%;
    left:15%;
    background-color: green;
    border-radius: 400px;
    width:54%;
    height:66%;
    border: 7px solid black;
    transform: perspective(1000px) rotateY(-25deg) skew(-12deg);
    transition: transform 0.3s ease-in-out;
    background: linear-gradient(45deg, #f0f0f0, #cacaca);
    box-shadow:  12px -12px 24px #bebebe,
                -12px 12px 24px #ffffff;
}
.radar3:active {
  transform:translate3d(-0.1em,0.1em,1em)
}

.info {

}
.fa-arrow-down {
  position: absolute;
  top:-5.3%;
  left:59.3%;
  rotate: 22deg;
}
/* CSS pour le halo d'input en focus */
.form-control:focus {
  background-color: rgb(255, 193, 77);
  box-shadow: 0 0 20px orange;
  color:rgb(0, 0, 0);

  border-color: orange !important;

}


@media (max-width: 768px) {
    .radar3 {
      top:6%;
    }

  }
  @media (max-width: 500px) {
#map {
  top:24.5%;
    left:17%;
    height:62%;
    box-shadow: none;
}
    .radar3 {
      top:9%;
    }
  }


  @media (max-width: 576px) {
    p {
      font-size: 0.7em;
    }

  }