.rainbow {
  width: 100%;
  height: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
  background-color: black;
}
@media only screen and (min-width: 768px) {
  .rainbow {
    height: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .rainbow {
    height: 25px;
  }
}
.rainbow .rainbow-inner .rainbow-content {
  width: 10%;
  height: 200%;
  position: absolute;
  border-radius: 100%;
  top: -50%;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(1) {
  left: -3%;
  background-color: #860000;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(2) {
  left: 3%;
  background-color: #A50C0C;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(3) {
  left: 9%;
  background-color: #B51717;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(4) {
  left: 14%;
  background-color: #CF0909;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(5) {
  left: 19%;
  background-color: #FF4D00;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(6) {
  left: 24%;
  background-color: #CD4411;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(7) {
  left: 29%;
  background-color: #B88B18;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(8) {
  left: 34%;
  background-color: #C9971D;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(9) {
  left: 39%;
  background-color: #DBA61F;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(10) {
  left: 44%;
  background-color: #E7AC1C;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(11) {
  left: 49%;
  background-color: #12D212;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(12) {
  left: 54%;
  background-color: #09BF09;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(13) {
  left: 59%;
  background-color: #0EAE0E;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(14) {
  left: 64%;
  background-color: #1D8F1D;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(15) {
  left: 69%;
  background-color: #002A95;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(16) {
  left: 74%;
  background-color: #0931C0;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(17) {
  left: 79%;
  background-color: #113ACB;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(18) {
  left: 84%;
  background-color: #0038FF;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(19) {
  left: 89%;
  background-color: #446CFB;
}
.rainbow .rainbow-inner .rainbow-content:nth-last-of-type(20) {
  left: 94%;
  background-color: #6A8BFD;
}