html {
  background: linear-gradient(-135deg, #333333, #000000) fixed;
  /* background-size: 800% 800%;
  animation: GradietionAnimation 10s ease infinite; */
}

@keyframes GradietionAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
#timer {
  font-family: "EB Garamond", "Times New Roman", Times, serif;
  color: rgb(219, 228, 233);
  text-align: justify;
}

@keyframes blur-in {
  0% {
    filter: blur(20px);
    opacity: 0.1;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes blur-campaign {
  0% {
    opacity: 0;
    scale: 0.9;
  }
  70% {
    scale: 1.1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes blur-out {
  from {
    filter: blur(10px);
  }
  to {
    filter: blur(100);
  }
}

#title {
  animation: blur-in 1.5s both ease-out;
  animation-delay: 0.5s;
}

#info {
  animation: blur-in 1s both ease-out;
  animation-delay: 1s;
}

#schedule {
  animation: blur-in 1s both ease-out;
  animation-delay: 1s;
}

#loadshow {
  animation: blur-in 1s both ease-out;
  animation-delay: 0.8s;
}

#campaign {
  border: 1px solid rgba(219, 228, 233, 0.5);
  background-image: url("./campaign_bg.jpg");
  background-size: cover;
  animation: blur-campaign 0.2s both ease-out;
  animation-delay: 2.5s;
  hover: {
    animation: blur-out 2s both;
  }
}

#main {
  /* animation: blur-out 2s both; */
  /* animation-delay: 2s; */
}

a:hover {
  color: rgba(219, 228, 233, 0.6);
}

#timer {
  color: black;
  background-color: rgb(219, 228, 233);
  animation: blur-in 1s both;
  border-radius: 50%;
}