/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@property --bg-color-1 {
  syntax: '<color>';
  initial-value: hsl(240 60% 5%);
  inherits: false;
}
@property --bg-color-2 {
  syntax: '<color>';
  initial-value: hsl(280 50% 20%);
  inherits: false;
}

body {
  background: linear-gradient(10deg, var(--bg-color-1), var(--bg-color-2));
  animation: bg-shift-1 4s linear, bg-shift-2 6.9s linear;
  animation-iteration-count: infinite;
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
h1 {
  background-color: #000;
  font-family: "Jersey 10", sans-serif;
  color: #FFF;
  font-size: 80px;
  letter-spacing: 3px;
  text-shadow: 0px 0px 10px rgba(255,255,255,0.7), 0px 0px 50px rgba(255,255,255,0.3);
  mix-blend-mode: plus-lighter;
}
p {
  background-color: #000;
  font-family: "Geo", sans-serif;
  color: #FFF;
  font-size: 30px;
  text-shadow: 0px 0px 10px rgba(255,255,255,0.5), 0px 0px 50px rgba(255,255,255,0.1);
  mix-blend-mode: plus-lighter;
}
hr {
  background-color: #000;
  box-shadow: 0px 0px 10px rgba(255,255,255,0.5), 0px 0px 50px rgba(255,255,255,0.1);
  mix-blend-mode: plus-lighter;
}

@keyframes bg-shift-1 {
  0% {
    --bg-color-1: hsl(240 60% 5%);
  }
  50% {
    --bg-color-1: hsl(210 60% 20%);
  }
  100% {
    --bg-color-1: hsl(240 60% 5%);
  }
}
@keyframes bg-shift-2 {
  0% {
    --bg-color-2: hsl(280 50% 20%);
  }
  33% {
    --bg-color-2: hsl(310 50% 30%);
  }
  66% {
    --bg-color-2: hsl(170 50% 35%);
  }
  100% {
    --bg-color-2: hsl(280 50% 20%);
  }
}