.gradient-border {
 /* --border-width: 3px;
  position: relative;
  font-family: Lato, sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: white;
  background: #222;
  width: 1166px;
  margin: auto;
  height: 658px;
  border-radius: var(--border-width);*/
  /*border-style: solid;
  border-width: 5px;
  border-color:  white;
  animation: moveGradient 8s ease-in-out infinite;
  box-shadow:0px 0px 5px 5px white;*/
}

/*.gradient-border::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
  }*/


@keyframes moveGradient {
  0% {
    border-color:  white;
    box-shadow:0px 0px 5px 5px rgb(255, 255, 255, 0.5);
  }
  25% {
    border-color: rgb(121, 204, 255);
    box-shadow:0px 0px 5px 5px rgba(121, 204, 255, 0.5);
  }
  50% {
    border-color: orange;
    box-shadow:0px 0px 5px 5px rgba(255, 166, 0, 0.5);
  }
  75% {
    border-color: yellow;
    box-shadow:0px 0px 5px 5px rgb(255, 255, 0, 0.5);
  }
  100% {
    border-color:  white;
    box-shadow:0px 0px 5px 5px rgb(255, 255, 255, 0.5);
  }
}