@font-face {
  font-family: "ScienceGothic";
  src: url("ScienceGothic.ttf") format("truetype");
  font-weight: 100 900; /* Plage de poids */
  font-stretch: 50% 200%; /* Plage de largeur */
  font-style: normal;
  font-variation-settings: "wght" 400, "wdth" 122, "YOPQ" 0, "slnt" 0;
}

body {
  font-family: "ScienceGothic", sans-serif;
  font-size: 50px;
  line-height: 1.15;
  font-variation-settings: "wght" 400, "wdth" 90, "YOPQ" 0, "slnt" 0;
  background-color: #f6e6d1;
}

.nom {
  text-align: center;
  position: sticky; 
  height: 900px;
  display: flex;
  justify-content: center;  /* Alignement horizontal */
  align-items: center;
  resize: both;
  
}


.content {
  height: 20000px; /* Longueur suffisante pour faire défiler la page */
}



.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Crée des colonnes flexibles */
  grid-auto-rows: 120px; /* Hauteur par défaut des lignes */
  gap: 50px; /* Espacement entre les cases */
  grid-auto-flow: dense; /* Permet de réarranger les éléments pour combler les espaces */
  padding: 20px;

  
}

.item{
  background-color: #f6e6d1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  box-shadow: 0 0 1rem #00000054;
  font-size: 45px;
}

.web{
  grid-column: span 2; /* Prend 2 colonnes */
  grid-row: span 1;
}

.video{
  grid-column: span 2; /* Prend 2 colonnes */
  grid-row: span 3;
}

.photo{
  grid-column: span 2; /* Prend 2 colonnes */
  grid-row: span 3;
}

.design{
  grid-column: span 2; /* Prend 2 colonnes */
  grid-row: span 3;
}

.graphique{
  grid-column: span 2; /* Prend 2 colonnes */
  grid-row: span 2;
}