h2 {
  text-align: center;
}

.message {
  color: var(--tertiary-text-color);
}

.profileList {
  max-inline-size: 1000px;
  margin-block: 0 10px;
  margin-inline: auto;
}

.openedProfile {
  background-color: var(--primary-text-color);
  transition: background 0.2s ease-out;
  color: var(--card-bg-color);
}

.openedProfile:hover,
.openedProfile:focus-visible {
  background-color: var(--tertiary-text-color);
  transition: background 0.2s ease-in;
}

.card {
  inline-size: 85%;
  margin-block: 0 15px;
  margin-inline: auto;
}

@media only screen and (width <= 680px) {
  .card {
    inline-size: 90%;
  }
}