:root {
  --color-dark: hsl(215, 60%, 5%);
  --color-light: hsl(215, 60%, 30%);
  --color-text: hsl(215, 60%, 20%);
}

html {
  font-size: 90px;
  font-weight: 900;
  font-family: sans-serif;
  text-transform: uppercase;
}

body {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--color-dark);
  color: var(--color-text);
}

section {
  opacity: 0.5;
}

body:after {
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: radial-gradient(var(--color-light), var(--color-dark));
  opacity: 1;
  /*
   * opacity: 0;
   * animation: gradient 10s ease forwards;
   */
}

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