body {
    background-color: black;
    background-image: url("BACKGROUND.png");
}

@keyframes pan {
  0% {
    background-position: 0% 0%;
  }

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

p, h6, h5, h4, h3, h2, h1 {
    color: white;
}

#BACKGROUND {
    display:none;
  background-image: url("BACKGROUND.png");
  position: absolute;
  left: 50%;
  top: 0px;
  translate: -50% 0%;
  z-index: -1;
  height: 100%;
  width: 100%;
  animation: pan 100s linear infinite;
  will-change: background-position;
}

#HOMEPAGE_TITLE {
    width: 100%;
}

#HOMEPAGE_TITLE h1 {
    text-align: center;
    animation-name: Rainbow;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes Rainbow {
    0%   {color: #ff1b1b;}
  14%  {color: #fff824;}
  42%  {color: #2bff39;}
  56% {color: #3cefff;}
  70%  {color: #3328ff;}
  84% {color: #ff2ffc;}
  100%  {color: #ff1b1b;}
}

#HOMEPAGE_IMAGE {
    display: flex;
    align-content: center;
    justify-content: center;
}

#HOMEPAGE_IMAGE img {
    border: 5px solid;
    animation-name: Rainbow;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

#HOMEPAGE_BUTTONS {
    width: 500px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    
}

#HOMEPAGE_BUTTONS div {
    width: 100%;
    height: 50px;
    margin: 6px;
}

#HOMEPAGE_BUTTONS button {
    border: 1px solid;
    width: 100%;
    height: 100%;
    font-family: 'Times New Roman', Times, serif;
    background-color: black;
    animation-name: Rainbow_border;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

button {
    font-family: 'Times New Roman', Times, serif;
}

/* PAGES */


#PAGE_TITLE {
    width: 100%;
}

#PAGE_TITLE h1 {
    text-align: center;
    animation-name: Rainbow;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

#BACKBUTTON {
    width: 100px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    
}

#BACKBUTTON div {
    width: 100%;
    height: 20px;
    margin: 6px;
}

#BACKBUTTON button {
    border: 1px solid;
    width: 100%;
    height: 100%;
    font-family: 'Times New Roman', Times, serif;
    background-color: black;
    animation-name: Rainbow_border;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes Rainbow_border {
    0%   {border-color: #ff1b1b;}
  14%  {border-color: #fff824;}
  42%  {border-color: #2bff39;}
  56% {border-color: #3cefff;}
  70%  {border-color: #3328ff;}
  84% {border-color: #ff2ffc;}
  100%  {border-color: #ff1b1b;}
}