body {
 display: flex;
 background-color: black;
}

.potentate {
  width: 80%;
  margin-left: 9%;
}

@keyframes BG_woliloop {
  0%   {background-color: #1cffe8;
        border-color: #1cffe8;}
  25%  {background-color: #ff4063;
        border-color: #ff4063;}
  50%  {background-color: #2eff93;
        border-color: #2eff93;}
  75%  {background-color: #ffee00;
        border-color: #ffee00;}
  100% {background-color: #1cffe8;
        border-color: #1cffe8;}
}

.drum {
  margin-bottom: 20px;
}
.base {
  margin: 0
}

.span {
  margin-right: 20px;
}
.end {
  margin: 0
}

.rank1_header {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 10px;
  background-color: black;
  border-radius: 5px;
}

.rank1 {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 20px;
  background-color: black;
  border: medium solid white;
  border-radius: 5px;
}

.header {
  padding: 2px;
  background-color: #1cffe8;
  animation-name: BG_woliloop;
  animation-duration: 2.80701754386s;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
  font-family: monospace;
  font-size: 50px;
  text-align: center;
}

.note_WIP {
  width: 50%;
  margin: 0% 25%;
  background-color: white;
  padding: 2px;
  border: 2px;
  font-family: monospace;
  font-size: 17.5px;
  font-weight: bold;
  text-align: center;
}

.rank2 {
  flex-direction: row;
}

.text_about {
  padding-left: 8px;
  background-color: black;
  border: 2px solid white;
  color: white;
  font-family: cursive;
}

.audioplayer {
  background-color: #1cffe8;
  font-family: monospace;
}