@font-face {
  font-family: 'MyFont';
  src: url('fonts/NHaasGroteskTXPro-55Rg.ttf') format('truetype'); /* Format de votre fichier de typographie */
  /* Ajoutez d'autres variantes (gras, italique, etc.) si nécessaire */
}

body, html {
  overflow: hidden; /* Empêche le défilement de la page */
  height: 100%; /* Assure que la hauteur de la page est à 100% de la fenêtre */
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  color: black;
  font-family: MyFont, Helvetica, sans-serif;
  font-size: 13px;

}

a {
  text-decoration: none;
  color: inherit;
}

header .left {
  float: left;
  bottom: 0; /* position the element at the bottom of the screen */
  left: 0; /* align the element with the left edge of the screen */
  right: 0; /* align the element with the right edge of the screen */
  margin: 0; /* remove the margins */
  padding: 10px; /* add some padding to the element */
}

header .right {
  position: absolute;
  left: 50%; 
  padding: 10px; /* add some padding to the element */
}

header .header-text {
  position: absolute;
  left: 25%; /* two thirds of the screen width */
  top: 0;
  margin: 0; /* remove the margins */
  padding: 10px; /* add some padding to the element */
}


.legend {
  position: fixed;       /* reste fixe sur l'écran */
  bottom: 0;             /* en bas de l'écran */
  left: 50px;            /* marge de 50px depuis la gauche */
  padding: 10px;         /* padding autour du texte */
  font-family: MyFont, Helvetica, sans-serif;
  font-size: 13px;
  text-align: left;
}

.numero {
  position: fixed; /* position the element at a fixed location on the screen */
  bottom: 0; /* position the element at the bottom of the screen */
  left: 0; /* align the element with the left edge of the screen */
  right: 0; /* align the element with the right edge of the screen */
  margin: 0; /* remove the margins */
  padding: 10px; /* add some padding to the element */
  font-family: MyFont, Helvetica, sans-serif;
  font-size: 13px;
  text-align: left;

}


.header-hover {
  display: none; /* hide the element by default */
  position: fixed; /* position the eleent at a fixed location on the screen */
  left: 0; /* align the element with the left edge of the screen */
  right: 0; /* align the element with the right edge of the screen */
  margin-top: 30px; /* remove the margins */
  padding: 10px; /* add some padding to the element */
}

header:hover .header-hover {
  display: block; /* show the element when hovering over the header */
  position: absolute; /* position the element in the center of the screen */
  color: black; /* change the text color to white */
  font-size: 13px; /* increase the font size */
} 

main {
  position: relative;
  z-index: 0;
  text-align: center;
  padding: 0px;
  height: 100vh; /* 100% de la hauteur de la fenêtre */
}

img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

body {
  margin: 0;
}

#slideshow-container img {
  /* add a transition effect to the opacity of the images */
  transition: opacity 0.5s;
  /* hide the images by default */
  opacity: 0;
}

#slideshow-container img.active {
  /* show the active image */
  opacity: 1;
}

.about-content {
  
   margin: 0;
  height: 100vh;          /* hauteur = 100% de la fenêtre */
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center; 
  text-align: center;
  font-family: MyFont, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1; /* 120% de la taille de la police */
  letter-spacing: -0.5px;

}

@media screen and (min-width: 768px) {
  .about-content {
    hyphens: auto;
  }
}

.language {
position: fixed;
bottom: 0;
left: 0;
margin: 10px;
font-family: MyFont, Helvetica, sans-serif;
font-size: 13px;
}

.maj {
position: fixed;
bottom: 0;
right: 0;
margin: 10px;
font-family: MyFont, Helvetica, sans-serif;
font-size: 13px;
}

a:hover
{
color: rgb(255, 0, 0);
}

.survol:hover {
  color: rgb(155, 0, 0);
}

.contact {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 1;
  padding: 10px;
  font-family: MyFont, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-align: left; /* texte aligné à gauche */
}

  .education {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 1;
    left: 20%;
    justify-content: space-between;
    padding: 10px 10px;
    font-family: MyFont, Helvetica, sans-serif;
    font-size: 13px;
    letter-spacing: 0px;

    }

    .friends {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      left: 60%;
      justify-content: space-between;
      padding: 10px 10px;
      font-family: MyFont, Helvetica, sans-serif;
      font-size: 13px;
      line-height: 1;
      letter-spacing: 0px;
      }

      .counter {
        position: fixed;
        bottom: 10px;
        left: 10px;
        font-family: MyFont, Helvetica, sans-serif;
        font-size: 13px;
      }

      @media screen and (max-width: 500px) {
       .counter, .legend, .friends, .education, .contact, .header-text, .left, .right {
        font-size: 7.5px;
        }

        .about-content {
          font-size: 40px;
          margin-top: -5px;
          }
        
        }

        @media screen and (max-width: 350px) {
          .counter, .legend, .friends, .education, .contact, .header-text, .left, .right {
           font-size: 7.5px;
           }
           
           }

        
            

           
               

        


/* Style pour mobile */
@media screen and (max-width: 700px) {
  .about-content {
padding-left: 20px;
padding-right: 20px;
    font-size:13.8px;        /* taille adaptée au mobile */
  }
}

      @media screen and (max-width: 900px) {
        main {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          margin-left: 10px;
          margin-right: 10px;
        }
      
        main img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          margin-left: 10px;
          margin-right: 10px;
        }
      }

  


    @media screen and (max-width: 900px) {
  main img {
    max-width: 100%; /* Pour s'assurer que l'image est réactive */
    width: auto; /* Permet à la largeur de s'adapter dynamiquement */
    height: auto; /* Permet à la hauteur de s'adapter dynamiquement */
    max-height: calc(100vw - 20px); /* Taille maximale en fonction de la largeur de la fenêtre */
    max-width: calc(100vw - 20px); /* Taille maximale en fonction de la largeur de la fenêtre */
    aspect-ratio: 10 / 7.75; /* Définit le ratio hauteur/largeur à 1:1 */
    object-fit: cover; /* Assurez-vous que l'image remplit le conteneur */
    margin-left: auto; /* Centrez l'image horizontalement */
    margin-right: auto;
  }
}




@media screen and (max-width: 450px) {
  main {
    margin-top: -50px; /* Ajustez cette valeur selon vos besoins */
  }
}