.wrapper {
  height: 250%;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  background: linear-gradient(
    124deg,
    #1f0400,
    #3b2500,
    #3d3c00,
    #023500,
    #002e35,
    #001036,
    #25003d,
    #3b0028,
    #350020
  );
  background-size: 100% 1800%;

  -webkit-animation: rainbow 000s ease infinite;
  -z-animation: rainbow 60s ease infinite;
  -o-animation: rainbow 60s ease infinite;
  animation: rainbow 60s ease infinite;
}

@-webkit-keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}
@-moz-keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}
@-o-keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}
@keyframes rainbow {
  0% {
    background-position: 0% 82%;
  }
  50% {
    background-position: 100% 19%;
  }
  100% {
    background-position: 0% 82%;
  }
}

.wrapper2 {
  height: 250%;
  width: 100%;
  background: linear-gradient(to bottom right, #000000 0%, #800000 100%);
}

.wrapper3 {
  background-color: #525252;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23ffffff' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23525252' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%235b5b5b' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23646464' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%236e6e6e' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23777777' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23818181' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%238b8b8b' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23959595' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%239f9f9f' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23a9a9a9' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23b4b4b4' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23bebebe' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%23c9c9c9' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23d3d3d3' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23dedede' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23e9e9e9' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23f4f4f4' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23ffffff' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgb(197, 197, 197);
  /* background: linear-gradient(
    45deg,
    #f0c27b,
    #ffaf8b,
    #ffa1a7,
    #f29cc6,
    #cda0de,
    #b296d6,
    #968ccc,
    #7982c1,
    #6f66a4,
    #654a85,
    #592f67,
    #4b1248
  ); */
  /* border: 3px solid #232943;
  box-shadow: inset 0 0 2.5px 2px rgba(0, 0, 0, 0.5); */
}

::-webkit-scrollbar-thumb {
  background-color: gray;
  /* background: linear-gradient(45deg, #fe6b8b, #ff8e53); */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  /* background: rgb(157, 255, 0);
  box-shadow: 0px 0px 5px #88ff00; */
  background: linear-gradient(45deg, #fe6b8b, #ff8e53);
  box-shadow: 0px 0px 5px #ff8e53;
}