body {
   display: flex;
   flex-direction: row; /* Arranges items horizontally */
   flex-wrap: wrap; /* Allows items to wrap to a new line */
   justify-content: center; /* Centers items horizontally within the container */
   align-items: center; /* Centers rows vertically (if body height is larger than content) */
   min-height: 100vh; /* Ensures body takes full viewport height */
   margin: 0; /* Removes default browser margins */
   background-color: #1c1c33;
   overflow-x: hidden;
}

#logo {
    width:5%;
    height:auto;
    image-rendering: pixelated;
    transition: all 0.3s ease; 
}

#logo:hover {
    width: 6%;
}

p {
  color: white;
}

.varela-round-regular {
  font-family: "Varela Round", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.link-wrap {
  all: unset;          /* removes all default <a> styles */
  cursor: default;     /* optional, still shows it's clickable */
  display: contents;   /* makes the <a> not affect layout */
}

.image-container {
  position: relative;
  width: 150px; /* size of square */
  height: 150px;
  overflow: hidden;
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s ease; 
}

.image-container:hover {
  transform: scale(1.25);
  z-index: 10;
}

.image-container img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  transition: 0.3s ease;
  border-radius: 25px;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  text-align: center;
  opacity: 0;
  transition: 0.3s ease;
  font-family: "Varela Round", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.image-container:hover img {
  filter: brightness(50%);
}

.image-container:hover .overlay-text {
  opacity: 1;
}

.break {
  flex-basis: 100%;
  height: 0;
}

#games-container {
    all: inherit;
}