body {
  background-color: #4d0323;
}

.box1 {
  text-align: center;
  font-family: "questrial", sans-serif;
  color: #aff9d9;
  font-size: clamp(1.125rem, 0.9028rem + 1.016vw, 2rem);
}
.box2 {
  text-align: center;
  font-family: "Olimpico", sans-serif;
  color: #aff9d9;
  font-size: clamp(1.125rem, 0.9028rem + 1.016vw, 2rem);
}

.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: "Olimpico", sans-serif;
    color: #aff9d9;
    font-size: clamp(1.125rem, 0.9028rem + 1.016vw, 2rem);
}

.phrase {
    margin-left: 100px;
    font-family: "Olimpico", sans-serif;
    font-size: clamp(1.125rem, 0.9028rem + 1.016vw, 2rem);
    color: #aff9d9;
}

  button {
    font-size: 20px;
    background-color: #4d0323;
    border: solid 1px #aff9d9; 
    border-radius: 5px;
    color: aliceblue;
    padding: 10px 15px;
    margin-top: -20px;
    position: relative; /* Pour éviter qu'il sorte du flux */
    margin-top: 20px; /* Ajuste l'espace entre le texte et le bouton */
  }

  button:hover{
    font-weight: bold;
    transition: transform 0.5s ease, font-size 0.3s ease;
  }