header {
  background: linear-gradient(
      to bottom,
      rgba(22, 22, 22, 0) 0,
      rgba(22, 22, 22, 0) 75%,
      #1c2026 100%
    ),
    url(../../images/dawn.jpg);
  background-position: center;
  background-size: 155vmax;
  min-height: 35rem;
}

h1 {
  /* color: rgb(228, 174, 135);  */
  color: hsl(220 60% 50% / 1);
  font-family: "Bebas Neue", sans-serif;
  font-size: 20vmax;
  font-style: italic;
  text-align: center;
  margin: 11.7vmax 4.1vmax;
  padding: 50px;
  letter-spacing: 0.1vmax;
  line-height: 15vmax;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

h1#animated-text {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

@media screen and (max-width: 700px) {
  header {
    /* margin-top: 0; */
    min-height: 28rem;
  }

  h1 {
    font-size: 10vmax;
    margin: 5vmax 2vmax;
    line-height: 8vmax;
  }
}