html{
  padding: 0;
  margin: 0;
  min-width: 400px;
}
body{
width: 100%;
  padding: 0;
  margin: 0;
  background-color: rgb(82, 76, 76);
  min-width: 400px;
}
header{
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  top: 0;
  width: 100%;
  height: 70vh;
}
.header_image{
  height: fit-content;
  width: fit-content;
}
nav{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 85%;
  max-height: 10%;
  padding: 10px;
}
ul{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
  list-style-type: none;
  width: 45%;
  padding: 3px;
}
li{
  margin: 2%;
  text-align: center;
  min-width: fit-content;
}

.LogoAtlas{
  position: relative;
  top:15px;
  aspect-ratio: 9/13;
  height: 86px;
  margin: 0;
  left: 5px;
}
.LogoAtlas:hover{
  transform: scale(1.2);
  transition: 0.5s ease-in-out;
}
@font-face {
  font-family: 'GeosansLight-NMS';
  src: url('geonms-font.ttf');
}
.Menu_links{
  font-family: 'GeosansLight-NMS';
  font-size: 3vw;
  font-weight: 500;
  letter-spacing: 3px;
  color: black;
  text-decoration: none;
}
.Menu_links:active{
  color: red;
}
.Menu_links:hover{
color: white;
}
ul li{
  width: 20%;
}
.Box-Titre{
display: flex;
justify-content: center;
  margin: 0;
  width: 99%;
  height: fit-content;
  position: absolute;
  top: 30%;
  overflow: hidden;
}
.Main_Titre{
padding: 0;
position: relative;
/* border: 2px solid purple; */
font-family: 'GeosansLight-NMS';
font-size: 2em;
color:white;
font-weight: bolder;
align-items: baseline;
width: 376px;
min-height: fit-content;
letter-spacing: 0.02em;
}
.Sous_Titre{
  font-family: 'GeosansLight-NMS';
  color:white;
}
main{
  min-height: fit-content;
}
.article1, .article2, .article3, .article4{
  text-align: center;
  margin-top: 0;
height: 350px;
overflow: hidden;
}
.text_article1, .text_article2, .text_article3, .text_article4{
  padding: 7px;
  font-family: 'GeosansLight-NMS';
  color: white;
  font-weight: 800;
}
.img1, .img2, .img3, .img4{
  position: relative;
  bottom: 0;
  z-index: -1;
  filter: brightness(120%);
  width: 580px;
  aspect-ratio:initial;
  opacity: 150%;
}

/*/Catalogue vaissaeaux/*/
.affichage_vaissaux{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 800vh;
}
.Vimage{
  position: relative;
  left: 20px;
  top: 10px;
  width: 90%;
  max-height: 35%;
  aspect-ratio: initial;
}
.Vnom{
  font-family: 'GeosansLight-NMS';
  color: aliceblue;
  font-size: 1.9em;
  font-weight: 800;
  text-align: center;
}
.Vtype{
  color: aliceblue;
  position: relative;
  top: -20px;
  text-align: center;
  font-family: 'GeosansLight-NMS';
  font-weight: 700;
  font-size: 1.2em;
}
.Vclasse, .Vdegats, .Vstockage, .Vdistance{
  color: aliceblue;
  text-align: center;
  font-family: 'GeosansLight-NMS';
  font-weight: 700;
  font-size: 1em;
}

.article_vaisseau{
  margin: 10px;
  min-width: 300px;
  height: 450px;
  border: 2px solid gray;
  border-radius: 25px;
}
footer{
  position: absolute;
  bottom:auto;
  background-color: aquamarine;
  width: 100%;
  display: flex;
  justify-content: center;    
}
.auto_scroll{
  position: absolute;
  margin: 0;
  left: 48%;
  top: 60%;
}
.arrow{
  width: 30px;
  height: 30px;
}
.video_container{
z-index: -1;
display: flex;
justify-content: center;
position: relative;
top: -14%;
width: 100%;
overflow: hidden;
min-height: 100%;
}
video{
position: relative;
object-fit: cover;
min-width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.Form{
margin: auto;
width: 85%;
display: flex;
align-items: center;
flex-direction: column;
padding: 5px;
}
form{
border: 3px solid gray;
width: 80%;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-around;
padding: 6px;
background-color: white;
border-radius: 9px;
}
button{
border: none;
background-color: white;
}
.recherche_titre{
font-family: 'GeosansLight-NMS';
  color:white;
  letter-spacing: 0.08em;
  display: flex;
  align-items: baseline;
  font-size: 1.7em;
  text-align: center;
}
#recherche{
width: 80%;
height: 32px;
border: 1px solid white;
}
#recherche:focus{
border: 1px solid white;
outline: 1px solid white;
background-color: transparent;
}
#valider{
height: 25px;
aspect-ratio: 1/1;
top: 5px;
left: 5px;
}
.montrer_resultat{
width: 90%;
font-size: large;
color: wheat;
font-family: 'GeosansLight-NMS';
font-size: 2em;
font-weight: 600;
margin: auto;
text-align: center;
}
.main_resultats{
display: flex;
justify-content: center;
padding: 10px;
display: flex;
flex-wrap: wrap; 
min-height: fit-content;
margin: 1px;
}
li {
  animation-duration: calc(var(--i) * 0.9s);
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

li:nth-child(1) {
  animation-name: slideLeft;
}
li:nth-child(2) {
  animation-name: slideTop;
}
li:nth-child(3) {
  animation-name: slideRight;
}
li:nth-child(4) {
  animation-name: slideLeft;
}
li:nth-child(5) {
  animation-name: slideBottom;
}
li:nth-child(6) {
  animation-name: slideRight;
}
li:nth-child(7) {
  animation-name: slideLeft;
}
li:nth-child(8) {
  animation-name: slideTop;
}
li:nth-child(9) {
  animation-name: slideRight;
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideTop {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideBottom {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@media all and (min-width: 577px){
  .text_article1, .text_article2, .text_article3, .text_article4{
  font-size: x-large;
}
.arrow{
width: 45px;
height: 45px;
}
}