body {
  background:
    radial-gradient(
      /* ellipse at top center, */
      ellipse 90% 50% at 50% 0%,
      #fa8fbd40 0%,
      #fa8fbd20 25%,
      #00000000 95%
    ),
    /* ellipse at bottom center, */
    radial-gradient(
      ellipse 100%  20% at 50% 100%,
      #8ae6fa30 0%,
      #8ae6fa10 30%,
      #00000000 95%
    )
    black;

  font-family:  "Montserrat", sans-serif;
  color: #f2f2f2;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;

  display: flex;
  align-items: center;
  flex-direction: column;
  padding-inline: 2rem;
  min-height: 100dvh;
}

h2 {
  font-weight: 400;
  font-size: clamp(1.2rem, 1.4vw, 1.8rem);
  text-align: center;
}

h2 a {
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.2;
}

a, a:visited {
  color: #a78bfa;
  text-decoration: none;
}

@keyframes hueShift {
  0% {
    filter: hue-rotate(0deg);
  }
  20% {
    filter: hue-rotate(0deg);
  }
  60% {
    filter: hue-rotate(120deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 2s;
  animation-fill-mode: forwards;
}

.fade-in.delayed {
  animation-delay: .8s;
}

header, article {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 2em;
}

header {
  margin-block: 3em;
}

footer {
  opacity: .7;
  margin-block: 2em;
  font-weight: 500;
}

header img {
  width: min(60vw, 350px);
}

a:hover, a:active {
  filter: hue-rotate(120deg) saturate(1.8) brightness(1.1);
  transition-duration: 2s;
}

nav {
  display: flex;
  gap: 1em;
  font-size: 1.6em;
  width: 100%;
  justify-content: flex-end;
  padding-top: 1rem;
}

nav a, nav a:visited {
  color: #ddd;
}

nav a:hover {
  color: #a78bfa;
}


.no_filter:hover, no_filter:active {
  filter: none;
  color: #a78bfa;
}

article img {
  width: 100%;
}

.game-card {
  overflow: hidden;
  width: min(90vw, 900px);
  border-radius: min(3vw, 1.5em);
  border: .2em solid white;
}

.game-card img {
  filter: brightness(0.8);
  filter: grayscale(100%) brightness(0.8) sepia(100%) hue-rotate(213deg) saturate(300%);
  display: block;
  transition:
    transform 0.1s ease,
    filter 0.2s ease;
}

.game-card:hover img, .game-card:active img {
  transform: scale(1.1);
  transition:
    transform 0.3s ease,
    filter 1.0s ease;
  filter: none;
}

@media (max-width: 600px) {
  body {
    background:
      radial-gradient(
	/* ellipse at top center, */
	ellipse 90% 50% at 50% 0%,
	#fa8fbd40 0%,
	#fa8fbd20 30%,
	#00000000 95%
      ),
      /* ellipse at bottom center, */
      radial-gradient(
	ellipse 100% 50% at 50% 100%,
	#8ae6fa30 0%,
	#8ae6fa10 30%,
	#00000000 95%
      )
      black;
  }

  nav {
    justify-content: center;
  }

  .mobile-break {
    display: block;
  }
}

@media (hover: none) {
  header img {
    animation: hueShift 20s ease-in-out infinite;
  }
}