:root {
    --bg: #fbf1c7;
}

/* html, body, main { */
/*     background-color: var(--bg); */
/*     height: 100%; */
/*     margin: 0; */
/* } */

/* main { */
/*     display: flex; */
/* } */

#header {
    text-align: center;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
}

.links {
    /* display: flex; */
    width: 250;
    overflow: hiddden;
    position: relative;

    /* font-family: sans-serif; */
    /* gap: 0.625%; */
}

.links div {
    display: block;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: banner 5s infinite linear;
}

@keyframes banner {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}


.links span {
    float: left;
    width: 50%
}

.links img {
    float: left;
    width: 50%
}

a {
  /* flex: 1; */
  text-decoration: none;
  outline: none;
  text-align: center;
  line-height: 3;
  color: black;
    float: left;
    z-index: 20;
    width: 50%;
}


a:link,
a:visited,
a:focus {
  /* background: #689d6a; */
    animation: linkBg 5s infinite linear;
  color: black;
}

a:hover {
  background: #d65d0e;
}

a:active {
  background: black;
}

@keyframes linkBg {
  12.5% {
    background-color: #FF0000;
  }
  25% {
    background-color: #FFA500;
  }
  37.5% {
    background-color: #FFFF00;
  }
  50% {
    background-color: #7FFF00;
  }
  62.5% {
    background-color: #00FFFF;
  }
  75% {
    background-color: #0000FF;
  }
  87.5% {
    background-color: #9932CC;
  }
  100% {
    background-color: #FF1493;
  }
}

@keyframes bgScroll {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -1088px 0px;
    }

}

.scrollBg {
    background-image: url("/space.jpg");
    animation: bgScroll 20s linear infinite;
}