@import 'styles/variables.scss';

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

.content {
  position: relative;
  top: calc(50% - 175px);
  min-height: 250px;
  color: var(--primaryText);

  h1 {
    margin-top: 50px;
    font-size: 25px;
  }
}

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

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

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