/*BODY*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
}

body {
  background-image: url(./jonny-auh-z99iWocuDt0-unsplash.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

/*MAIN*/
#main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  overflow: hidden;
  text-align: center;
}

.title {
  font-size: 5rem;
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2rem;
  color: #5e81ac;
}

.time {
  padding: 1rem;
  box-shadow: 0.5rem 0.5rem 0 0 rgba(0, 0, 0, 0.1);
  border-radius: 3rem;
}

.gradient-text {
  background: #8fbcbb;
  background: linear-gradient(
    170deg,
    rgba(191, 97, 106, 1) 0%,
    rgba(208, 135, 112, 1) 14%,
    rgba(235, 203, 128, 1) 34%,
    rgba(163, 190, 140, 1) 58%,
    rgba(180, 142, 173, 1) 78%
  );

  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Animate the text when loading the element. */
  /* This animates it on page load and when hovering out. */
  animation: rainbow-text-simple-animation-rev 2.1s ease forwards;
}

.gradient-text:hover {
  animation: rainbow-text-simple-animation 1.5s ease-in forwards;
}

/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-simple-animation-rev {
  0% {
    background-size: 650%;
  }
  40% {
    background-size: 650%;
  }
  100% {
    background-size: 100%;
  }
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-simple-animation {
  0% {
    background-size: 100%;
  }
  80% {
    background-size: 650%;
  }
  100% {
    background-size: 650%;
  }
}