:root {
  --light-text: #ffffff;

  --light4: #6eb3e7;
  --light5: #81c2eb;
  --light6: #8fc6ef;
  --light7: #a3d1f4;

  --blue2: #2ea1d6;
  --blue3: #3eace0;
  --blue4: #54b9e8;
  --blue5: #69c5f0;
  --blue6: #82cff2;

  --font-size-normal: 20px;
}
html, body {
  height: 100%;
}
body {
  margin: 0px;
  background-color: var(--light5);
  color: var(--light-text);
  font-size: 30px;
  font-family: "Liter", sans-serif;
  text-align: center;

  display: grid;
  /* header, main, footer */
  grid-template-rows: auto 1fr auto;
}
header {
  background-image: linear-gradient(var(--light7), var(--light5));
}
main {

}
footer {
  font-size: 20px;
  padding: 20px;
  background-color: var(--light6);
}

.title {
  text-align: center;
  font-weight: 400 !important;
  font-size: 100px;
  z-index: 1;
  background-image: linear-gradient(var(--light-text) 50%, var(--blue5) 150%);
  -webkit-background-clip: text;
  color: transparent;
}
.title-shadow {
  text-align: center;
  font-weight: 400 !important;
  font-size: 100px;
  z-index: 0;
  text-shadow:
    0px 0px 10px var(--blue3);
  color: transparent;
}

.tagline {
  text-align: center;
  font-weight: 400 !important;
  font-size: 40px;
  font-style: italic !important;
}

.stack-grid {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
}
.stack-grid * {
  grid-area: stack;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in-1 {
  animation: fadeIn 2s ease both;
}
.fade-in-2 {
  animation: fadeIn 2s 0.25s ease both;
}
.fade-in-3 {
  animation: fadeIn 1.5s 0.6s ease both;
}
.fade-in-4 {
  animation: fadeIn 1.5s 0.9s ease both;
}

.sriracha-regular {
  font-family: "Sriracha", cursive;
  font-weight: 400;
  font-style: normal;
}
.huninn-regular {
  font-family: "Huninn", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.liter-regular {
  font-family: "Liter", sans-serif;
  font-weight: 400;
  font-style: normal;
}