@import 'styles/variables.scss';

.container {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: linear-gradient(-45deg, rgba(255, 189, 89, 0.7) 10%, rgba(253, 152, 0, 0.85), var(--lightestBackground), var(--darkestBackground));
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

.content {
  position: relative;
  top: calc(50% - 125px);
  min-height: 250px;

  .bolt svg {
    height: 155px;
    width: 150px;
    stroke-width: 0.5;
    stroke: var(--primaryText);
  }

  h1 {
    color: var(--primaryText);
    margin-top: 50px;
    font-size: 25px;
  }
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}