/**
* get random number.
* @param {number} min - min number.
* @param {number} max - max number.
*/
/**
* common
*/
html,
body {
  width: 100vw;
  height: 100vh;
}
body {
  background: #092745;
  position: relative;
  overflow: hidden;
  font-size: 0;
  perspective: 200px;
}
/*
* variable
*/
div.criterion {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}
div.square {
  position: absolute;
  transform-style: preserve-3d;
}
div.square0 {
  box-shadow: 0 0 0px #eb4747;
  width: 0px;
  height: 0px;
  left: 0px;
  top: 0px;
  -webkit-animation: rotate-animation0 38s ease-in-out 0ms infinite normal;
          animation: rotate-animation0 38s ease-in-out 0ms infinite normal;
}
div.square1 {
  box-shadow: 0 0 2px #eb6347;
  width: 30px;
  height: 30px;
  left: -15px;
  top: -15px;
  -webkit-animation: rotate-animation1 38s ease-in-out 150ms infinite normal;
          animation: rotate-animation1 38s ease-in-out 150ms infinite normal;
}
div.square2 {
  box-shadow: 0 0 4px #eb7e47;
  width: 60px;
  height: 60px;
  left: -30px;
  top: -30px;
  -webkit-animation: rotate-animation2 38s ease-in-out 300ms infinite normal;
          animation: rotate-animation2 38s ease-in-out 300ms infinite normal;
}
div.square3 {
  box-shadow: 0 0 6px #eb9947;
  width: 90px;
  height: 90px;
  left: -45px;
  top: -45px;
  -webkit-animation: rotate-animation3 38s ease-in-out 450ms infinite normal;
          animation: rotate-animation3 38s ease-in-out 450ms infinite normal;
}
div.square4 {
  box-shadow: 0 0 8px #ebb447;
  width: 120px;
  height: 120px;
  left: -60px;
  top: -60px;
  -webkit-animation: rotate-animation4 38s ease-in-out 600ms infinite normal;
          animation: rotate-animation4 38s ease-in-out 600ms infinite normal;
}
div.square5 {
  box-shadow: 0 0 10px #ebcf47;
  width: 150px;
  height: 150px;
  left: -75px;
  top: -75px;
  -webkit-animation: rotate-animation5 38s ease-in-out 750ms infinite normal;
          animation: rotate-animation5 38s ease-in-out 750ms infinite normal;
}
div.square6 {
  box-shadow: 0 0 12px #ebeb47;
  width: 180px;
  height: 180px;
  left: -90px;
  top: -90px;
  -webkit-animation: rotate-animation6 38s ease-in-out 900ms infinite normal;
          animation: rotate-animation6 38s ease-in-out 900ms infinite normal;
}
div.square7 {
  box-shadow: 0 0 14px #cfeb47;
  width: 210px;
  height: 210px;
  left: -105px;
  top: -105px;
  -webkit-animation: rotate-animation7 38s ease-in-out 1050ms infinite normal;
          animation: rotate-animation7 38s ease-in-out 1050ms infinite normal;
}
div.square8 {
  box-shadow: 0 0 16px #b4eb47;
  width: 240px;
  height: 240px;
  left: -120px;
  top: -120px;
  -webkit-animation: rotate-animation8 38s ease-in-out 1200ms infinite normal;
          animation: rotate-animation8 38s ease-in-out 1200ms infinite normal;
}
div.square9 {
  box-shadow: 0 0 18px #99eb47;
  width: 270px;
  height: 270px;
  left: -135px;
  top: -135px;
  -webkit-animation: rotate-animation9 38s ease-in-out 1350ms infinite normal;
          animation: rotate-animation9 38s ease-in-out 1350ms infinite normal;
}
div.square10 {
  box-shadow: 0 0 20px #7eeb47;
  width: 300px;
  height: 300px;
  left: -150px;
  top: -150px;
  -webkit-animation: rotate-animation10 38s ease-in-out 1500ms infinite normal;
          animation: rotate-animation10 38s ease-in-out 1500ms infinite normal;
}
div.square11 {
  box-shadow: 0 0 22px #63eb47;
  width: 330px;
  height: 330px;
  left: -165px;
  top: -165px;
  -webkit-animation: rotate-animation11 38s ease-in-out 1650ms infinite normal;
          animation: rotate-animation11 38s ease-in-out 1650ms infinite normal;
}
div.square12 {
  box-shadow: 0 0 24px #47eb47;
  width: 360px;
  height: 360px;
  left: -180px;
  top: -180px;
  -webkit-animation: rotate-animation12 38s ease-in-out 1800ms infinite normal;
          animation: rotate-animation12 38s ease-in-out 1800ms infinite normal;
}
div.square13 {
  box-shadow: 0 0 26px #47eb63;
  width: 390px;
  height: 390px;
  left: -195px;
  top: -195px;
  -webkit-animation: rotate-animation13 38s ease-in-out 1950ms infinite normal;
          animation: rotate-animation13 38s ease-in-out 1950ms infinite normal;
}
div.square14 {
  box-shadow: 0 0 28px #47eb7e;
  width: 420px;
  height: 420px;
  left: -210px;
  top: -210px;
  -webkit-animation: rotate-animation14 38s ease-in-out 2100ms infinite normal;
          animation: rotate-animation14 38s ease-in-out 2100ms infinite normal;
}
div.square15 {
  box-shadow: 0 0 30px #47eb99;
  width: 450px;
  height: 450px;
  left: -225px;
  top: -225px;
  -webkit-animation: rotate-animation15 38s ease-in-out 2250ms infinite normal;
          animation: rotate-animation15 38s ease-in-out 2250ms infinite normal;
}
div.square16 {
  box-shadow: 0 0 32px #47ebb4;
  width: 480px;
  height: 480px;
  left: -240px;
  top: -240px;
  -webkit-animation: rotate-animation16 38s ease-in-out 2400ms infinite normal;
          animation: rotate-animation16 38s ease-in-out 2400ms infinite normal;
}
div.square17 {
  box-shadow: 0 0 34px #47ebcf;
  width: 510px;
  height: 510px;
  left: -255px;
  top: -255px;
  -webkit-animation: rotate-animation17 38s ease-in-out 2550ms infinite normal;
          animation: rotate-animation17 38s ease-in-out 2550ms infinite normal;
}
div.square18 {
  box-shadow: 0 0 36px #47ebeb;
  width: 540px;
  height: 540px;
  left: -270px;
  top: -270px;
  -webkit-animation: rotate-animation18 38s ease-in-out 2700ms infinite normal;
          animation: rotate-animation18 38s ease-in-out 2700ms infinite normal;
}
div.square19 {
  box-shadow: 0 0 38px #47cfeb;
  width: 570px;
  height: 570px;
  left: -285px;
  top: -285px;
  -webkit-animation: rotate-animation19 38s ease-in-out 2850ms infinite normal;
          animation: rotate-animation19 38s ease-in-out 2850ms infinite normal;
}
div.square20 {
  box-shadow: 0 0 40px #47b4eb;
  width: 600px;
  height: 600px;
  left: -300px;
  top: -300px;
  -webkit-animation: rotate-animation20 38s ease-in-out 3000ms infinite normal;
          animation: rotate-animation20 38s ease-in-out 3000ms infinite normal;
}
div.square21 {
  box-shadow: 0 0 42px #4799eb;
  width: 630px;
  height: 630px;
  left: -315px;
  top: -315px;
  -webkit-animation: rotate-animation21 38s ease-in-out 3150ms infinite normal;
          animation: rotate-animation21 38s ease-in-out 3150ms infinite normal;
}
div.square22 {
  box-shadow: 0 0 44px #477eeb;
  width: 660px;
  height: 660px;
  left: -330px;
  top: -330px;
  -webkit-animation: rotate-animation22 38s ease-in-out 3300ms infinite normal;
          animation: rotate-animation22 38s ease-in-out 3300ms infinite normal;
}
div.square23 {
  box-shadow: 0 0 46px #4763eb;
  width: 690px;
  height: 690px;
  left: -345px;
  top: -345px;
  -webkit-animation: rotate-animation23 38s ease-in-out 3450ms infinite normal;
          animation: rotate-animation23 38s ease-in-out 3450ms infinite normal;
}
div.square24 {
  box-shadow: 0 0 48px #4747eb;
  width: 720px;
  height: 720px;
  left: -360px;
  top: -360px;
  -webkit-animation: rotate-animation24 38s ease-in-out 3600ms infinite normal;
          animation: rotate-animation24 38s ease-in-out 3600ms infinite normal;
}
div.square25 {
  box-shadow: 0 0 50px #6347eb;
  width: 750px;
  height: 750px;
  left: -375px;
  top: -375px;
  -webkit-animation: rotate-animation25 38s ease-in-out 3750ms infinite normal;
          animation: rotate-animation25 38s ease-in-out 3750ms infinite normal;
}
div.square26 {
  box-shadow: 0 0 52px #7e47eb;
  width: 780px;
  height: 780px;
  left: -390px;
  top: -390px;
  -webkit-animation: rotate-animation26 38s ease-in-out 3900ms infinite normal;
          animation: rotate-animation26 38s ease-in-out 3900ms infinite normal;
}
div.square27 {
  box-shadow: 0 0 54px #9947eb;
  width: 810px;
  height: 810px;
  left: -405px;
  top: -405px;
  -webkit-animation: rotate-animation27 38s ease-in-out 4050ms infinite normal;
          animation: rotate-animation27 38s ease-in-out 4050ms infinite normal;
}
div.square28 {
  box-shadow: 0 0 56px #b447eb;
  width: 840px;
  height: 840px;
  left: -420px;
  top: -420px;
  -webkit-animation: rotate-animation28 38s ease-in-out 4200ms infinite normal;
          animation: rotate-animation28 38s ease-in-out 4200ms infinite normal;
}
div.square29 {
  box-shadow: 0 0 58px #cf47eb;
  width: 870px;
  height: 870px;
  left: -435px;
  top: -435px;
  -webkit-animation: rotate-animation29 38s ease-in-out 4350ms infinite normal;
          animation: rotate-animation29 38s ease-in-out 4350ms infinite normal;
}
div.square30 {
  box-shadow: 0 0 60px #eb47eb;
  width: 900px;
  height: 900px;
  left: -450px;
  top: -450px;
  -webkit-animation: rotate-animation30 38s ease-in-out 4500ms infinite normal;
          animation: rotate-animation30 38s ease-in-out 4500ms infinite normal;
}
div.square31 {
  box-shadow: 0 0 62px #eb47cf;
  width: 930px;
  height: 930px;
  left: -465px;
  top: -465px;
  -webkit-animation: rotate-animation31 38s ease-in-out 4650ms infinite normal;
          animation: rotate-animation31 38s ease-in-out 4650ms infinite normal;
}
div.square32 {
  box-shadow: 0 0 64px #eb47b4;
  width: 960px;
  height: 960px;
  left: -480px;
  top: -480px;
  -webkit-animation: rotate-animation32 38s ease-in-out 4800ms infinite normal;
          animation: rotate-animation32 38s ease-in-out 4800ms infinite normal;
}
div.square33 {
  box-shadow: 0 0 66px #eb4799;
  width: 990px;
  height: 990px;
  left: -495px;
  top: -495px;
  -webkit-animation: rotate-animation33 38s ease-in-out 4950ms infinite normal;
          animation: rotate-animation33 38s ease-in-out 4950ms infinite normal;
}
div.square34 {
  box-shadow: 0 0 68px #eb477e;
  width: 1020px;
  height: 1020px;
  left: -510px;
  top: -510px;
  -webkit-animation: rotate-animation34 38s ease-in-out 5100ms infinite normal;
          animation: rotate-animation34 38s ease-in-out 5100ms infinite normal;
}
div.square35 {
  box-shadow: 0 0 70px #eb4763;
  width: 1050px;
  height: 1050px;
  left: -525px;
  top: -525px;
  -webkit-animation: rotate-animation35 38s ease-in-out 5250ms infinite normal;
          animation: rotate-animation35 38s ease-in-out 5250ms infinite normal;
}
div.square36 {
  box-shadow: 0 0 72px #eb4747;
  width: 1080px;
  height: 1080px;
  left: -540px;
  top: -540px;
  -webkit-animation: rotate-animation36 38s ease-in-out 5400ms infinite normal;
          animation: rotate-animation36 38s ease-in-out 5400ms infinite normal;
}
@-webkit-keyframes rotate-animation0 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation0 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation6 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation6 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation7 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation7 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation9 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation9 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation10 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation10 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation11 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation11 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation12 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation12 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation13 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation13 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation14 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation14 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation15 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation15 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation16 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation16 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation17 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation17 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation18 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation18 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation19 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation19 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation20 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation20 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation21 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation21 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation22 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation22 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation23 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation23 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation24 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation24 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation25 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation25 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation26 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation26 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation27 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation27 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation28 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation28 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation29 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation29 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation30 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation30 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation31 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation31 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation32 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation32 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation33 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation33 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation34 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation34 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation35 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation35 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-animation36 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate-animation36 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}