body {
  font-family: 'Clash Display', sans-serif;
  background-color:   #3d3737;
  color: #E0E0E0; 
}

h1{
  font-size: clamp(3.1875rem, -1.3849rem + 18.3815vw, 13.125rem);
  font-weight: 600;
  text-align: center;
  line-height: 1em;
}

h2{
  margin-top: 80px;
  font-size: clamp(3.1875rem, 0.8869rem + 9.2486vw, 8.1875rem);
  font-weight: 500;
}

.box2 {
  font-size: clamp(1.5rem, 0.8864rem + 2.7273vw, 3rem);

}

.container{
    margin: 0 5%;
}
  .grid-container {
    display: grid;
    grid-template-columns: auto 1fr; /* Colonne gauche fixe à 100px, droite flexible */
    gap: 1em; /* Espacement entre les colonnes */
    align-items: baseline; /* Alignement vertical des items */
    margin-bottom: 1em; /* Espacement entre les phrases */
  }

  .numero {
    font-family: 'Clash Display', sans-serif;
    background-color: #E0E0E0;
    color: #3d3737;
    padding: 2px;
  }

  .phrase {
    font-size: clamp(1.25rem, 0.9049rem + 1.3873vw, 2rem);
    font-weight: 400;
  }

  button {
    font-size: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
    padding: 10px 20px;
    background-color: #3d3737;
    border: 2px #E0E0E0 solid;
    border-radius: 8px;
    color: #E0E0E0;
    cursor: pointer;
    transition: all .3s ease-in;
  }
  button:hover {
    background-color: #E0E0E0;
    color: #3d3737;
  }