html, body {
  width: 100%;
  height: 100%;
}

.x {
  color: white;
  font-size: 6em;
  position: absolute;
}

.iridescence {
    position: fixed;
    top: 0;
    left:0;
    filter: blur(200px);
    width: 100%;
    height: 100%;
    background: #a1a2ff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
    z-index: -1;
}

.iridescence div {
  position: absolute;
  border-radius: 50%;
  animation-name: bokeh;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.iridescence div:nth-child(1) {
  width: 30.5988742281rem;
  height: 30.5988742281rem;
  top: 14%;
  left: 93%;
  color: #0004ff;
  opacity: 0.75;
  box-shadow: 35.5988742281rem 0 0.6753203072rem currentColor;
  filter: brightness(294%) blur(100px);
  transform-origin: 16rem 17rem;
  animation-duration: 33s;
}
.iridescence div:nth-child(2) {
  width: 30.3006846354rem;
  height: 30.3006846354rem;
  top: 37%;
  left: 43%;
  color: #0004ff;
  opacity: 0.75;
  box-shadow: 35.3006846354rem 0 0.5611245837rem currentColor;
  filter: brightness(278%) blur(100px);
  transform-origin: 16rem 10rem;
  animation-duration: 40s;
}
.iridescence div:nth-child(3) {
  width: 30.9689426485rem;
  height: 30.9689426485rem;
  top: 49%;
  left: 61%;
  color: #f500c8;
  opacity: 0.9;
  box-shadow: 35.9689426485rem 0 0.431935719rem currentColor;
  filter: brightness(346%) blur(100px);
  transform-origin: -19rem 19rem;
  animation-duration: 42s;
}
.iridescence div:nth-child(4) {
  width: 30.2270851079rem;
  height: 30.2270851079rem;
  top: 62%;
  left: 33%;
  color: #00ddff;
  opacity: 1.05;
  box-shadow: 35.2270851079rem 0 0.423658158rem currentColor;
  filter: brightness(260%) blur(100px);
  transform-origin: -3rem -3rem;
  animation-duration: 26s;
}
.iridescence div:nth-child(5) {
  width: 30.6041284637rem;
  height: 30.6041284637rem;
  top: 61%;
  left: 52%;
  color: #0004ff;
  opacity: 0.75;
  box-shadow: 35.6041284637rem 0 0.267703226rem currentColor;
  filter: brightness(235%) blur(100px);
  transform-origin: 19rem -4rem;
  animation-duration: 24s;
}
.iridescence div:nth-child(6) {
  width: 30.3519959364rem;
  height: 30.3519959364rem;
  top: 69%;
  left: 63%;
  color: #0004ff;
  opacity: 0.9;
  box-shadow: 35.3519959364rem 0 0.3969304364rem currentColor;
  filter: brightness(306%) blur(100px);
  transform-origin: 0rem -10rem;
  animation-duration: 28s;
}
.iridescence div:nth-child(7) {
  width: 30.1195635094rem;
  height: 30.1195635094rem;
  top: 53%;
  left: 12%;
  color: #f500c8;
  opacity: 0.6;
  box-shadow: 35.1195635094rem 0 0.2617750963rem currentColor;
  filter: brightness(294%) blur(100px);
  transform-origin: -14rem 1rem;
  animation-duration: 26s;
}
.iridescence div:nth-child(8) {
  width: 30.4479577333rem;
  height: 30.4479577333rem;
  top: 25%;
  left: 82%;
  color: #0004ff;
  opacity: 0.75;
  box-shadow: 35.4479577333rem 0 0.506797276rem currentColor;
  filter: brightness(290%) blur(100px);
  transform-origin: -11rem 8rem;
  animation-duration: 20s;
}
.iridescence div:nth-child(9) {
  width: 30.9894155629rem;
  height: 30.9894155629rem;
  top: 7%;
  left: 68%;
  color: #00ddff;
  opacity: 0.6;
  box-shadow: 35.9894155629rem 0 0.4406499344rem currentColor;
  filter: brightness(257%) blur(100px);
  transform-origin: 4rem -8rem;
  animation-duration: 23s;
}
.iridescence div:nth-child(10) {
  width: 30.6704016525rem;
  height: 30.6704016525rem;
  top: 28%;
  left: 10%;
  color: #f500c8;
  opacity: 1.05;
  box-shadow: 35.6704016525rem 0 0.2463968289rem currentColor;
  filter: brightness(347%) blur(100px);
  transform-origin: -13rem 14rem;
  animation-duration: 24s;
}
.iridescence div:nth-child(11) {
  width: 30.3367656065rem;
  height: 30.3367656065rem;
  top: 91%;
  left: 9%;
  color: #f500c8;
  opacity: 0.6;
  box-shadow: 35.3367656065rem 0 0.5592576114rem currentColor;
  filter: brightness(315%) blur(100px);
  transform-origin: 17rem 12rem;
  animation-duration: 44s;
}
.iridescence div:nth-child(12) {
  width: 30.0962817263rem;
  height: 30.0962817263rem;
  top: 35%;
  left: 86%;
  color: #0004ff;
  opacity: 0.6;
  box-shadow: 35.0962817263rem 0 0.4932875834rem currentColor;
  filter: brightness(258%) blur(100px);
  transform-origin: 5rem -17rem;
  animation-duration: 23s;
}
.iridescence div:nth-child(13) {
  width: 30.8061016759rem;
  height: 30.8061016759rem;
  top: 87%;
  left: 24%;
  color: #f500c8;
  opacity: 0.75;
  box-shadow: 35.8061016759rem 0 0.4407371479rem currentColor;
  filter: brightness(209%) blur(100px);
  transform-origin: 15rem -13rem;
  animation-duration: 27s;
}
.iridescence div:nth-child(14) {
  width: 30.3524317451rem;
  height: 30.3524317451rem;
  top: 76%;
  left: 51%;
  color: #f500c8;
  opacity: 1.05;
  box-shadow: 35.3524317451rem 0 0.244493849rem currentColor;
  filter: brightness(267%) blur(100px);
  transform-origin: -3rem -13rem;
  animation-duration: 19s;
}
.iridescence div:nth-child(15) {
  width: 30.6210579045rem;
  height: 30.6210579045rem;
  top: 46%;
  left: 70%;
  color: #0004ff;
  opacity: 0.6;
  box-shadow: 35.6210579045rem 0 0.6427647612rem currentColor;
  filter: brightness(302%) blur(100px);
  transform-origin: 18rem 18rem;
  animation-duration: 24s;
}
.iridescence div:nth-child(16) {
  width: 30.2583283196rem;
  height: 30.2583283196rem;
  top: 98%;
  left: 18%;
  color: #f500c8;
  opacity: 0.6;
  box-shadow: 35.2583283196rem 0 0.202099578rem currentColor;
  filter: brightness(295%) blur(100px);
  transform-origin: 1rem 6rem;
  animation-duration: 32s;
}
.iridescence div:nth-child(17) {
  width: 30.4253342544rem;
  height: 30.4253342544rem;
  top: 5%;
  left: 75%;
  color: #0004ff;
  opacity: 0.75;
  box-shadow: 35.4253342544rem 0 0.3604219553rem currentColor;
  filter: brightness(237%) blur(100px);
  transform-origin: 4rem 1rem;
  animation-duration: 25s;
}
.iridescence div:nth-child(18) {
  width: 30.1783235902rem;
  height: 30.1783235902rem;
  top: 46%;
  left: 61%;
  color: #0004ff;
  opacity: 1.05;
  box-shadow: 35.1783235902rem 0 0.6239935859rem currentColor;
  filter: brightness(283%) blur(100px);
  transform-origin: -4rem 6rem;
  animation-duration: 46s;
}
.iridescence div:nth-child(19) {
  width: 30.3063084446rem;
  height: 30.3063084446rem;
  top: 13%;
  left: 20%;
  color: #0004ff;
  opacity: 0.9;
  box-shadow: 35.3063084446rem 0 0.3697587341rem currentColor;
  filter: brightness(317%) blur(100px);
  transform-origin: 14rem -16rem;
  animation-duration: 32s;
}
.iridescence div:nth-child(20) {
  width: 30.3451175718rem;
  height: 30.3451175718rem;
  top: 78%;
  left: 55%;
  color: #0004ff;
  opacity: 1.05;
  box-shadow: 35.3451175718rem 0 0.6502530484rem currentColor;
  filter: brightness(338%) blur(100px);
  transform-origin: 7rem 17rem;
  animation-duration: 33s;
}
.iridescence div:nth-child(21) {
  width: 30.9492842779rem;
  height: 30.9492842779rem;
  top: 44%;
  left: 29%;
  color: #f500c8;
  opacity: 0.6;
  box-shadow: 35.9492842779rem 0 0.2058064645rem currentColor;
  filter: brightness(308%) blur(100px);
  transform-origin: -19rem 18rem;
  animation-duration: 24s;
}
.iridescence div:nth-child(22) {
  width: 30.8260981219rem;
  height: 30.8260981219rem;
  top: 30%;
  left: 24%;
  color: #00ddff;
  opacity: 0.6;
  box-shadow: 35.8260981219rem 0 0.6313919897rem currentColor;
  filter: brightness(228%) blur(100px);
  transform-origin: 9rem -5rem;
  animation-duration: 30s;
}
.iridescence div:nth-child(23) {
  width: 30.6082305411rem;
  height: 30.6082305411rem;
  top: 25%;
  left: 13%;
  color: #0004ff;
  opacity: 0.6;
  box-shadow: 35.6082305411rem 0 0.5759374786rem currentColor;
  filter: brightness(204%) blur(100px);
  transform-origin: -18rem -6rem;
  animation-duration: 27s;
}
.iridescence div:nth-child(24) {
  width: 30.3243456546rem;
  height: 30.3243456546rem;
  top: 17%;
  left: 1%;
  color: #0004ff;
  opacity: 1.05;
  box-shadow: 35.3243456546rem 0 0.2504702396rem currentColor;
  filter: brightness(310%) blur(100px);
  transform-origin: -14rem 10rem;
  animation-duration: 46s;
}
.iridescence div:nth-child(25) {
  width: 30.0307171999rem;
  height: 30.0307171999rem;
  top: 43%;
  left: 9%;
  color: #f500c8;
  opacity: 1.05;
  box-shadow: 35.0307171999rem 0 0.36898683rem currentColor;
  filter: brightness(314%) blur(100px);
  transform-origin: -4rem 15rem;
  animation-duration: 36s;
}
.iridescence div:nth-child(26) {
  width: 30.3468974626rem;
  height: 30.3468974626rem;
  top: 14%;
  left: 36%;
  color: #0004ff;
  opacity: 1.05;
  box-shadow: 35.3468974626rem 0 0.6155094531rem currentColor;
  filter: brightness(226%) blur(100px);
  transform-origin: 9rem 13rem;
  animation-duration: 31s;
}
.iridescence div:nth-child(27) {
  width: 30.0601983407rem;
  height: 30.0601983407rem;
  top: 24%;
  left: 31%;
  color: #f500c8;
  opacity: 0.75;
  box-shadow: 35.0601983407rem 0 0.4153208289rem currentColor;
  filter: brightness(309%) blur(100px);
  transform-origin: -14rem 5rem;
  animation-duration: 22s;
}
.iridescence div:nth-child(28) {
  width: 30.5868151344rem;
  height: 30.5868151344rem;
  top: 38%;
  left: 82%;
  color: #f500c8;
  opacity: 0.9;
  box-shadow: 35.5868151344rem 0 0.480898821rem currentColor;
  filter: brightness(281%) blur(100px);
  transform-origin: 1rem -11rem;
  animation-duration: 29s;
}
.iridescence div:nth-child(29) {
  width: 30.745465382rem;
  height: 30.745465382rem;
  top: 66%;
  left: 60%;
  color: #0004ff;
  opacity: 0.6;
  box-shadow: 35.745465382rem 0 0.4525537696rem currentColor;
  filter: brightness(225%) blur(100px);
  transform-origin: -11rem -2rem;
  animation-duration: 29s;
}
.iridescence div:nth-child(30) {
  width: 30.3169783883rem;
  height: 30.3169783883rem;
  top: 69%;
  left: 63%;
  color: #f500c8;
  opacity: 1.05;
  box-shadow: 35.3169783883rem 0 0.2671586341rem currentColor;
  filter: brightness(218%) blur(100px);
  transform-origin: -12rem 13rem;
  animation-duration: 39s;
}
.iridescence div:nth-child(31) {
  width: 30.6144371463rem;
  height: 30.6144371463rem;
  top: 29%;
  left: 22%;
  color: #0004ff;
  opacity: 0.9;
  box-shadow: 35.6144371463rem 0 0.2235358566rem currentColor;
  filter: brightness(293%) blur(100px);
  transform-origin: 0rem 19rem;
  animation-duration: 46s;
}
.iridescence div:nth-child(32) {
  width: 30.1808177398rem;
  height: 30.1808177398rem;
  top: 83%;
  left: 88%;
  color: #00ddff;
  opacity: 1.05;
  box-shadow: 35.1808177398rem 0 0.2482387867rem currentColor;
  filter: brightness(229%) blur(100px);
  transform-origin: -11rem -8rem;
  animation-duration: 44s;
}
.iridescence div:nth-child(33) {
  width: 30.034217841rem;
  height: 30.034217841rem;
  top: 86%;
  left: 51%;
  color: #0004ff;
  opacity: 1.05;
  box-shadow: 35.034217841rem 0 0.614574123rem currentColor;
  filter: brightness(312%) blur(100px);
  transform-origin: -11rem 12rem;
  animation-duration: 27s;
}
.iridescence div:nth-child(34) {
  width: 30.0081238174rem;
  height: 30.0081238174rem;
  top: 18%;
  left: 53%;
  color: #0004ff;
  opacity: 1.05;
  box-shadow: 35.0081238174rem 0 0.2202038943rem currentColor;
  filter: brightness(347%) blur(100px);
  transform-origin: -11rem -7rem;
  animation-duration: 36s;
}
.iridescence div:nth-child(35) {
  width: 30.1634622502rem;
  height: 30.1634622502rem;
  top: 66%;
  left: 65%;
  color: #f500c8;
  opacity: 0.6;
  box-shadow: 35.1634622502rem 0 0.358480631rem currentColor;
  filter: brightness(270%) blur(100px);
  transform-origin: -17rem -16rem;
  animation-duration: 22s;
}
.iridescence div:nth-child(36) {
  width: 30.8982742264rem;
  height: 30.8982742264rem;
  top: 5%;
  left: 36%;
  color: #f500c8;
  opacity: 1.05;
  box-shadow: 35.8982742264rem 0 0.410485557rem currentColor;
  filter: brightness(218%) blur(100px);
  transform-origin: -19rem -19rem;
  animation-duration: 37s;
}
.iridescence div:nth-child(37) {
  width: 30.3669480256rem;
  height: 30.3669480256rem;
  top: 69%;
  left: 57%;
  color: #f500c8;
  opacity: 0.6;
  box-shadow: 35.3669480256rem 0 0.5612913827rem currentColor;
  filter: brightness(253%) blur(100px);
  transform-origin: -4rem -3rem;
  animation-duration: 20s;
}
.iridescence div:nth-child(38) {
  width: 30.3296934202rem;
  height: 30.3296934202rem;
  top: 2%;
  left: 99%;
  color: #f500c8;
  opacity: 0.75;
  box-shadow: 35.3296934202rem 0 0.2092925521rem currentColor;
  filter: brightness(336%) blur(100px);
  transform-origin: 9rem -5rem;
  animation-duration: 31s;
}
.iridescence div:nth-child(39) {
  width: 30.0949206634rem;
  height: 30.0949206634rem;
  top: 16%;
  left: 13%;
  color: #0004ff;
  opacity: 1.05;
  box-shadow: 35.0949206634rem 0 0.4373760465rem currentColor;
  filter: brightness(210%) blur(100px);
  transform-origin: 3rem -14rem;
  animation-duration: 45s;
}
.iridescence div:nth-child(40) {
  width: 30.5994375987rem;
  height: 30.5994375987rem;
  top: 40%;
  left: 20%;
  color: #0004ff;
  opacity: 1.05;
  box-shadow: 35.5994375987rem 0 0.408738175rem currentColor;
  filter: brightness(247%) blur(100px);
  transform-origin: -2rem 15rem;
  animation-duration: 46s;
}

@keyframes bokeh {
  100% {
    transform: rotate(360deg);
  }
}