@charset "UTF-8";


 /* ------------------------ BASE ------------------------------ */

:root {
  --main-color: white;
  --second-color: #e3e3e3;
  --txt-color: black;
}

@font-face {
  font-family: "AzeretMono";
  src: url('../fonts/AzeretMono-VariableFont_wght.ttf') format('truetype');
  /* Ajoutez d'autres formats de police et ajustez l'URL si nécessaire */
}




/* ---- BASICS SETTINGS ---- */


*{
  cursor: none;
}
body{
  margin : 0 auto;
  font-family: "AzeretMono";
  color: var(--txt-color);
  font-size: 1.5rem;
}




/* -------- CURSOR -------- */

.cursor-follow{
z-index: 200;
width: 38px;
height: 38px;
border-radius: 100px;
border: solid 2px red;
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
}

.hovered{
  filter: blur(0rem);
width: 12px;
height: 12px;
border: solid 1.5px red;
background-color:  red;
}




/* -------- NAV -------- */

.nav{
  width: 100vw;
  height: 6vh;
  background-color: var(--main-color);
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 100;
}

.nav button{
  cursor: none;
  appearance: none; 
   border: none; /* Supprime la bordure par défaut */
  background: none; 
  padding: 0% 2%; 
  margin: 0;
  font-family: "AzeretMono";
  font-size: 1.5rem;
  color: var(--txt-color)
}
.nav button:hover{
  color: red;
}



.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10%, 1fr)); /* 10 colonnes équilibrées */
  gap: 10px; /* Espacement entre les éléments */
  width: 100vw; /* Prend la largeur de la fenêtre */
  padding: 20px;
  padding-top: 5%;
}

.grid-item {
  position: relative;
}

.grid-container img {
  width: 100%;
  height: auto;
  display: block;
}

.text-container {
  display: flex;
  justify-content: space-between;
  left: 0;
  right: 0;
  padding: 2%;
  font-size: 0.8rem;
}



.left-text {
  flex: 1;
  text-align: left;
}

.right-text {
  flex: 1;
  text-align: right;
}






.image-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}

.image-container img {
  position: absolute;
   top: 50%;
    left: 30%;
  width: 30%;
 
  transition: opacity 0.3s ease-in-out;
}

.top-image {
  opacity: 0;
  
}

.top-image:hover {
  opacity: 1;

}


  /* ------------------------ RESPONSIVE ------------------------------ */




  @media screen and (max-width: 1400px) {

  }
  

@media screen and (max-width: 800px) {

  /* ---- BASICS SETTINGS ---- */

  body{
    font-size: 1rem;
  }


  *{
    cursor: inherit;
  }



}