html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Eurostile-demi;
  user-select: none; 
  touch-action: none; 
  -webkit-user-select: none;
  background-color: rgb(255,151,255);
}

a{
  color: white;
  text-decoration: none;
}

.titre {
    font-size: 90px;
    position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
    color: white;
}

.grid-container-2 {
  position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(4, 200px); /* Three columns at 100px each */
  gap: 20px; /* Spacing between the columns */
  /* Calculate total width: (3 * 100px) + (2 * 10px) */
  width: calc(4 * 200px + 2 * 10px);
  margin: 0 auto; /* Centers the container itself */
  justify-content: center; /* Centers the grid columns within the container */
}

/* Grid Item Styling */
.grid-item {
  color: white;
    font-size: 25px;
    text-align: center;
}

.grid-item:hover {
  color: black;
}


@font-face {
    font-family: Eurostile-demi;
    src: url("./assets/fonts/Eurostile-Demi\ Demi.otf") format("opentype");
  }


/* Responsive: Mobile Layout */
@media (max-width: 767px) {

  .titre {
    font-size: 22vw;
    top: auto;
    left: auto;
    position: absolute;
    transform: translate(0,0);
    color: white;
}

  .grid-container-2 {
      display: grid;
      grid-template-columns: auto; /* Three columns at 100px each */
      top: 9%;
      left: auto;
      transform: translate(0,0);
      gap: 10px; /* Spacing between the columns */
      /* Calculate total width: (3 * 100px) + (2 * 10px) */
      width: calc(3 * 100px + 2 * 10px);
      padding-left: 1vw;
      padding-top: 2vw;
      margin: 0 auto; /* Centers the container itself */
      justify-content: left;
  }

  .grid-item {
    color: white;
    font-size: 20px;
      min-width: 100%;
      text-align: left;
  }
  .wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }
}