html {
  background: repeating-linear-gradient(90deg in hsl longer hue, red 0 50%) 0/200%;
  animation: r 6s linear infinite;
}
@keyframes r {
  to {background-position: 100%}
}
.marquee {
  overflow: hidden;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  display: flex;
}

.marquee h1{
  font-size: 2em;
  white-space: nowrap;
  text-transform: uppercase
}
a {
  text-decoration:none;
  color:#FFF;
}
.rainbow-button {
  width:calc(20vw + 6px);
  height:calc(8vw + 6px);
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:3vw;
  font-weight:bold;
  animation:slidebg 2s linear infinite;
}
.rainbow-button:after {
  content:attr(alt);
  width:20vw;
  height:8vw;
  background-color:#191919;
  display:flex;
  align-items:center;
  justify-content:center;
}
@keyframes slidebg {
  to {
    background-position:20vw;
  }
}