*{margin: 0;}

/* Hide scrollbar for Chrome, Safari and Opera */
.all::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .all {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    background-color: #F3F3F3;
  }

  html, body {
    overflow: auto !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none !important;
}


header{
    width: 98.7vw;
    height: 3vh;
    margin-left: 0.6vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    letter-spacing: -0.04vw;
    font-size: 1.4vh;
    z-index: 99;
    position: fixed;
    top: 0;
    background-color: #F3F3F3;
    text-align: center;
}


header a:hover{
    color: black;
   }
   
   .boxmenu{
    width: 33vw;
    justify-content: space-between;
    display: flex;
}

   .archives{
    color: black;
}




.works{
color: grey;
}


header p {
    margin-bottom: 0.7vh;
}

.mail {
    animation: blink 1s steps(1, end) infinite; /* Animation sans effet smooth */
}

/* Animation pour changer la couleur de noir à blanc */
@keyframes blink {
    0%, 100% {
        color: black;
    }
    50% {
        color: #F3F3F3;
    }
}


section{
    height: 95.2vh;
    width: 98.7vw;
    margin-left: 0.6vw;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
   column-gap: 1vh;
   margin-top: 3.5vh;
   background-color: #F3F3F3;
   }



a {
    text-decoration: none;
    color: inherit; /* Cela récupère la couleur du texte parent */
}




header a {
    margin-bottom: 0.7vh;
    }
    


/* Animation de glissement vers le bas */
@keyframes slideDown {
    from {
        top: -100px; /* Hors de l'écran */
    }
    to {
        top: 0; /* Position normale */
    }
}

/* Effet de fondu blanc pour le main */
main {
    opacity: 0; /* Commence invisible */
    animation: fadeIn 1s ease forwards; /* Animation de fondu */
    animation-delay: 0.5s; /* Délai d'une seconde après le header */
}

/* Animation de fondu */
@keyframes fadeIn {
    from {
        opacity: 0; /* Invisible */
    }
    to {
        opacity: 1; /* Complètement visible */
    }
}


.soon{
    font-family: "DM Sans", sans-serif;
    letter-spacing: -0.07vw;
    font-size: 5.5vh;
    font-weight: 300;
    display: flex;
}



@media (max-width: 768px) {
  
    header {
        font-size: 1.2vh;
        height: 3.5vh;
      }
  
      header p {
          margin-bottom: 1.3vh;
        }
  
  
      .boxmenu{
          width: 50vw;
          margin-bottom: 0.7vh;
      }
    
      .archives{
        margin-right: 0;
      }
  
  

  
    
    section{
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(3, 1fr);
      height: calc(var(--vh, 1vh) * 100);
    }

}