body {
   text-align: center;
}

h1 {
  margin: 20px 0;
  font-size: 4em;
}


.character-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.image-wrap {
  position: relative;
  flex: 1 1 20%;
  max-width: 250px;
  width: 100%;
  height: auto;
}

.image-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.image-link {
  position: absolute;
  bottom: 25%;
  left: 0;
  right: 0;

  color: white;
  padding: 0.5rem 0;
  font-size: clamp(12px, 1.5vw, 20px);
  text-decoration: none;
  transition: background-color 0.3s;
  width: 70%;
  margin: 0 auto;

  border: 1.5px solid rgb(68, 67, 67);
  border-radius: 5px;
}

#asmodeus-link {
  background-color: rgba(217, 72, 205, 1);
}

#asmodeus-link:hover {
  background-color: rgba(217, 72, 205, 0.7);
}


#mimi-link {
  background-color: rgb(7, 107, 178);
}

#mimi-link:hover {
  background-color: rgba(7, 107, 178, 0.7);
}

#ribert-link {
  background-color: rgb(43, 163, 91);
}

#ribert-link:hover {
  background-color: rgba(43, 163, 91, 0.7);
}

#tony-link {
  background-color: rgb(189, 180, 109);
}

#tony-link:hover {
  background-color: rgba(189, 180, 109, 0.7);
}

#game-info {
  margin: 20px auto;
  max-width: 800px;
}

#game-info h2 {
  font-size: 2em;
  margin-bottom: 10px;
}

#game-progress {
  width: 90%;
  margin: 0 auto;  
}
#game-progress h2 {
  font-size: 2em;
  margin-top: 2rem;
  margin-bottom: 10px;
}

@media (max-width: 450px) {
  .character-images .image-wrap {
    flex: 1 1 45%;
  }
}

.final-container {
  margin: 20px auto;
}
.final-report-link {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #556b2f;
}

.final-report-link:hover {
  background-color: #8fbc8f;
}