.wrapper {
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  background: linear-gradient(45deg,
    #c60000, #ffca39, #f9f871,
    #b9f76c, #66f9a3, #6ce8ff,
    #7170ff, #9b6bff, #da5fff,
    #ff1493, #ffffff
  );
  background-size: 1800% 1800%;
  background-position: 100% 0%;
  background-attachment: fixed;
  animation: rainbow 18s ease infinite;
  cursor: none;
}

@keyframes rainbow {
  0% { background-position: 100% 0%; opacity: 1; }
  50% { background-position: 0% 100%; opacity: 1; }
  100% { background-position: 100% 0%; opacity: 1; }
}

@media only screen and (max-width: 768px) {
  .wrapper {
    background-size: 2400% 2400%;
    animation-duration: 24s;
  }
}

@media only screen and (max-width: 480px) {
  .wrapper {
    background-size: 3000% 3000%;
    animation-duration: 30s;
  }
}