/*body {
  background: radial-gradient(circle, #24246e, #06051f);
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
}*/
/*body:active div,
body:active div::before,
body:active div::after {
  padding: 40px;
}*/

/*div,
div::before,
div::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.3;
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transition: all 5s linear 0s;
  transition: all 5s linear 0s;
}

.purple {
  -webkit-animation: purple linear 30s alternate infinite;
          animation: purple linear 30s alternate infinite;
  border: 2px solid #241379;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  -webkit-transform: translate3d(94vw, 60vh, 0);
          transform: translate3d(94vw, 60vh, 0);
  z-index: 11;
}

.purple::before {
  -webkit-animation: purple-pseudo linear 15s alternate infinite;
          animation: purple-pseudo linear 15s alternate infinite;
  background: #241379;
  border: 2px solid #241379;
  width: 10px;
  height: 18px;
  -webkit-transform: translate3d(-31vw, 33vh, 0) rotate(269deg);
          transform: translate3d(-31vw, 33vh, 0) rotate(269deg);
}

.purple::after {
  -webkit-animation: purple-pseudo linear 20s alternate infinite;
          animation: purple-pseudo linear 20s alternate infinite;
  border: 2px solid #241379;
  width: 22px;
  height: 24px;
  -webkit-transform: translate3d(-68vw, 33vh, 0) rotate(189deg);
          transform: translate3d(-68vw, 33vh, 0) rotate(189deg);
}

@-webkit-keyframes purple {
  50% {
    -webkit-transform: translate3d(41vw, 42vh, 0);
            transform: translate3d(41vw, 42vh, 0);
  }
  100% {
    -webkit-transform: translate3d(10vw, 66vh, 0);
            transform: translate3d(10vw, 66vh, 0);
  }
}

@keyframes purple {
  50% {
    -webkit-transform: translate3d(41vw, 42vh, 0);
            transform: translate3d(41vw, 42vh, 0);
  }
  100% {
    -webkit-transform: translate3d(10vw, 66vh, 0);
            transform: translate3d(10vw, 66vh, 0);
  }
}
@-webkit-keyframes purple-pseudo {
  33% {
    -webkit-transform: translate3d(8vw, 19vh, 0) rotate(345deg);
            transform: translate3d(8vw, 19vh, 0) rotate(345deg);
  }
  100% {
    -webkit-transform: translate3d(48vw, -4vh, 0) rotate(15deg);
            transform: translate3d(48vw, -4vh, 0) rotate(15deg);
  }
}
@keyframes purple-pseudo {
  33% {
    -webkit-transform: translate3d(8vw, 19vh, 0) rotate(345deg);
            transform: translate3d(8vw, 19vh, 0) rotate(345deg);
  }
  100% {
    -webkit-transform: translate3d(48vw, -4vh, 0) rotate(15deg);
            transform: translate3d(48vw, -4vh, 0) rotate(15deg);
  }
}
.medium-blue {
  -webkit-animation: medium-blue linear 30s alternate infinite;
          animation: medium-blue linear 30s alternate infinite;
  border: 2px solid #2185bf;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  -webkit-transform: translate3d(96vw, 28vh, 0);
          transform: translate3d(96vw, 28vh, 0);
  z-index: 3;
}

.medium-blue::before {
  -webkit-animation: medium-blue-pseudo linear 15s alternate infinite;
          animation: medium-blue-pseudo linear 15s alternate infinite;
  background: #2185bf;
  border: 2px solid #2185bf;
  width: 18px;
  height: 23px;
  -webkit-transform: translate3d(-74vw, -15vh, 0) rotate(43deg);
          transform: translate3d(-74vw, -15vh, 0) rotate(43deg);
}

.medium-blue::after {
  -webkit-animation: medium-blue-pseudo linear 20s alternate infinite;
          animation: medium-blue-pseudo linear 20s alternate infinite;
  border: 2px solid #2185bf;
  width: 23px;
  height: 17px;
  -webkit-transform: translate3d(-22vw, 33vh, 0) rotate(346deg);
          transform: translate3d(-22vw, 33vh, 0) rotate(346deg);
}

@-webkit-keyframes medium-blue {
  50% {
    -webkit-transform: translate3d(85vw, 57vh, 0);
            transform: translate3d(85vw, 57vh, 0);
  }
  100% {
    -webkit-transform: translate3d(70vw, 68vh, 0);
            transform: translate3d(70vw, 68vh, 0);
  }
}

@keyframes medium-blue {
  50% {
    -webkit-transform: translate3d(85vw, 57vh, 0);
            transform: translate3d(85vw, 57vh, 0);
  }
  100% {
    -webkit-transform: translate3d(70vw, 68vh, 0);
            transform: translate3d(70vw, 68vh, 0);
  }
}
@-webkit-keyframes medium-blue-pseudo {
  33% {
    -webkit-transform: translate3d(-16vw, -30vh, 0) rotate(257deg);
            transform: translate3d(-16vw, -30vh, 0) rotate(257deg);
  }
  100% {
    -webkit-transform: translate3d(-24vw, 25vh, 0) rotate(138deg);
            transform: translate3d(-24vw, 25vh, 0) rotate(138deg);
  }
}
@keyframes medium-blue-pseudo {
  33% {
    -webkit-transform: translate3d(-16vw, -30vh, 0) rotate(257deg);
            transform: translate3d(-16vw, -30vh, 0) rotate(257deg);
  }
  100% {
    -webkit-transform: translate3d(-24vw, 25vh, 0) rotate(138deg);
            transform: translate3d(-24vw, 25vh, 0) rotate(138deg);
  }
}
.light-blue {
  -webkit-animation: light-blue linear 30s alternate infinite;
          animation: light-blue linear 30s alternate infinite;
  border: 2px solid #1fbce1;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  -webkit-transform: translate3d(5vw, 95vh, 0);
          transform: translate3d(5vw, 95vh, 0);
  z-index: 6;
}

.light-blue::before {
  -webkit-animation: light-blue-pseudo linear 15s alternate infinite;
          animation: light-blue-pseudo linear 15s alternate infinite;
  background: #1fbce1;
  border: 2px solid #1fbce1;
  width: 41px;
  height: 13px;
  -webkit-transform: translate3d(4vw, -79vh, 0) rotate(19deg);
          transform: translate3d(4vw, -79vh, 0) rotate(19deg);
}

.light-blue::after {
  -webkit-animation: light-blue-pseudo linear 20s alternate infinite;
          animation: light-blue-pseudo linear 20s alternate infinite;
  border: 2px solid #1fbce1;
  width: 25px;
  height: 29px;
  -webkit-transform: translate3d(-5vw, -30vh, 0) rotate(48deg);
          transform: translate3d(-5vw, -30vh, 0) rotate(48deg);
}

@-webkit-keyframes light-blue {
  50% {
    -webkit-transform: translate3d(75vw, 79vh, 0);
            transform: translate3d(75vw, 79vh, 0);
  }
  100% {
    -webkit-transform: translate3d(68vw, 62vh, 0);
            transform: translate3d(68vw, 62vh, 0);
  }
}

@keyframes light-blue {
  50% {
    -webkit-transform: translate3d(75vw, 79vh, 0);
            transform: translate3d(75vw, 79vh, 0);
  }
  100% {
    -webkit-transform: translate3d(68vw, 62vh, 0);
            transform: translate3d(68vw, 62vh, 0);
  }
}
@-webkit-keyframes light-blue-pseudo {
  33% {
    -webkit-transform: translate3d(-55vw, -72vh, 0) rotate(21deg);
            transform: translate3d(-55vw, -72vh, 0) rotate(21deg);
  }
  100% {
    -webkit-transform: translate3d(-16vw, 10vh, 0) rotate(84deg);
            transform: translate3d(-16vw, 10vh, 0) rotate(84deg);
  }
}
@keyframes light-blue-pseudo {
  33% {
    -webkit-transform: translate3d(-55vw, -72vh, 0) rotate(21deg);
            transform: translate3d(-55vw, -72vh, 0) rotate(21deg);
  }
  100% {
    -webkit-transform: translate3d(-16vw, 10vh, 0) rotate(84deg);
            transform: translate3d(-16vw, 10vh, 0) rotate(84deg);
  }
}
.red {
  -webkit-animation: red linear 30s alternate infinite;
          animation: red linear 30s alternate infinite;
  border: 2px solid #b62f56;
  border-radius: 100%;
  width: 18px;
  height: 18px;
  -webkit-transform: translate3d(36vw, 95vh, 0);
          transform: translate3d(36vw, 95vh, 0);
  z-index: 2;
}

.red::before {
  -webkit-animation: red-pseudo linear 15s alternate infinite;
          animation: red-pseudo linear 15s alternate infinite;
  background: #b62f56;
  border: 2px solid #b62f56;
  width: 42px;
  height: 34px;
  -webkit-transform: translate3d(21vw, -51vh, 0) rotate(168deg);
          transform: translate3d(21vw, -51vh, 0) rotate(168deg);
}

.red::after {
  -webkit-animation: red-pseudo linear 20s alternate infinite;
          animation: red-pseudo linear 20s alternate infinite;
  border: 2px solid #b62f56;
  width: 19px;
  height: 6px;
  -webkit-transform: translate3d(54vw, -16vh, 0) rotate(120deg);
          transform: translate3d(54vw, -16vh, 0) rotate(120deg);
}

@-webkit-keyframes red {
  50% {
    -webkit-transform: translate3d(95vw, 48vh, 0);
            transform: translate3d(95vw, 48vh, 0);
  }
  100% {
    -webkit-transform: translate3d(68vw, 54vh, 0);
            transform: translate3d(68vw, 54vh, 0);
  }
}

@keyframes red {
  50% {
    -webkit-transform: translate3d(95vw, 48vh, 0);
            transform: translate3d(95vw, 48vh, 0);
  }
  100% {
    -webkit-transform: translate3d(68vw, 54vh, 0);
            transform: translate3d(68vw, 54vh, 0);
  }
}
@-webkit-keyframes red-pseudo {
  33% {
    -webkit-transform: translate3d(-21vw, 49vh, 0) rotate(219deg);
            transform: translate3d(-21vw, 49vh, 0) rotate(219deg);
  }
  100% {
    -webkit-transform: translate3d(9vw, -45vh, 0) rotate(236deg);
            transform: translate3d(9vw, -45vh, 0) rotate(236deg);
  }
}
@keyframes red-pseudo {
  33% {
    -webkit-transform: translate3d(-21vw, 49vh, 0) rotate(219deg);
            transform: translate3d(-21vw, 49vh, 0) rotate(219deg);
  }
  100% {
    -webkit-transform: translate3d(9vw, -45vh, 0) rotate(236deg);
            transform: translate3d(9vw, -45vh, 0) rotate(236deg);
  }
}
.orange {
  -webkit-animation: orange linear 30s alternate infinite;
          animation: orange linear 30s alternate infinite;
  border: 2px solid #d5764c;
  border-radius: 100%;
  width: 17px;
  height: 17px;
  -webkit-transform: translate3d(65vw, 45vh, 0);
          transform: translate3d(65vw, 45vh, 0);
  z-index: 1;
}

.orange::before {
  -webkit-animation: orange-pseudo linear 15s alternate infinite;
          animation: orange-pseudo linear 15s alternate infinite;
  background: #d5764c;
  border: 2px solid #d5764c;
  width: 19px;
  height: 12px;
  -webkit-transform: translate3d(-53vw, -5vh, 0) rotate(61deg);
          transform: translate3d(-53vw, -5vh, 0) rotate(61deg);
}

.orange::after {
  -webkit-animation: orange-pseudo linear 20s alternate infinite;
          animation: orange-pseudo linear 20s alternate infinite;
  border: 2px solid #d5764c;
  width: 25px;
  height: 22px;
  -webkit-transform: translate3d(9vw, 34vh, 0) rotate(308deg);
          transform: translate3d(9vw, 34vh, 0) rotate(308deg);
}

@-webkit-keyframes orange {
  50% {
    -webkit-transform: translate3d(32vw, 74vh, 0);
            transform: translate3d(32vw, 74vh, 0);
  }
  100% {
    -webkit-transform: translate3d(31vw, 100vh, 0);
            transform: translate3d(31vw, 100vh, 0);
  }
}

@keyframes orange {
  50% {
    -webkit-transform: translate3d(32vw, 74vh, 0);
            transform: translate3d(32vw, 74vh, 0);
  }
  100% {
    -webkit-transform: translate3d(31vw, 100vh, 0);
            transform: translate3d(31vw, 100vh, 0);
  }
}
@-webkit-keyframes orange-pseudo {
  33% {
    -webkit-transform: translate3d(23vw, 9vh, 0) rotate(74deg);
            transform: translate3d(23vw, 9vh, 0) rotate(74deg);
  }
  100% {
    -webkit-transform: translate3d(59vw, -20vh, 0) rotate(182deg);
            transform: translate3d(59vw, -20vh, 0) rotate(182deg);
  }
}
@keyframes orange-pseudo {
  33% {
    -webkit-transform: translate3d(23vw, 9vh, 0) rotate(74deg);
            transform: translate3d(23vw, 9vh, 0) rotate(74deg);
  }
  100% {
    -webkit-transform: translate3d(59vw, -20vh, 0) rotate(182deg);
            transform: translate3d(59vw, -20vh, 0) rotate(182deg);
  }
}
.yellow {
  -webkit-animation: yellow linear 30s alternate infinite;
          animation: yellow linear 30s alternate infinite;
  border: 2px solid #ffd53e;
  border-radius: 100%;
  width: 22px;
  height: 22px;
  -webkit-transform: translate3d(24vw, 2vh, 0);
          transform: translate3d(24vw, 2vh, 0);
  z-index: 1;
}

.yellow::before {
  -webkit-animation: yellow-pseudo linear 15s alternate infinite;
          animation: yellow-pseudo linear 15s alternate infinite;
  background: #ffd53e;
  border: 2px solid #ffd53e;
  width: 42px;
  height: 12px;
  -webkit-transform: translate3d(-1vw, 16vh, 0) rotate(281deg);
          transform: translate3d(-1vw, 16vh, 0) rotate(281deg);
}

.yellow::after {
  -webkit-animation: yellow-pseudo linear 20s alternate infinite;
          animation: yellow-pseudo linear 20s alternate infinite;
  border: 2px solid #ffd53e;
  width: 20px;
  height: 17px;
  -webkit-transform: translate3d(-14vw, 29vh, 0) rotate(195deg);
          transform: translate3d(-14vw, 29vh, 0) rotate(195deg);
}

@-webkit-keyframes yellow {
  50% {
    -webkit-transform: translate3d(72vw, 65vh, 0);
            transform: translate3d(72vw, 65vh, 0);
  }
  100% {
    -webkit-transform: translate3d(82vw, 83vh, 0);
            transform: translate3d(82vw, 83vh, 0);
  }
}

@keyframes yellow {
  50% {
    -webkit-transform: translate3d(72vw, 65vh, 0);
            transform: translate3d(72vw, 65vh, 0);
  }
  100% {
    -webkit-transform: translate3d(82vw, 83vh, 0);
            transform: translate3d(82vw, 83vh, 0);
  }
}
@-webkit-keyframes yellow-pseudo {
  33% {
    -webkit-transform: translate3d(-60vw, -21vh, 0) rotate(231deg);
            transform: translate3d(-60vw, -21vh, 0) rotate(231deg);
  }
  100% {
    -webkit-transform: translate3d(-57vw, -66vh, 0) rotate(50deg);
            transform: translate3d(-57vw, -66vh, 0) rotate(50deg);
  }
}
@keyframes yellow-pseudo {
  33% {
    -webkit-transform: translate3d(-60vw, -21vh, 0) rotate(231deg);
            transform: translate3d(-60vw, -21vh, 0) rotate(231deg);
  }
  100% {
    -webkit-transform: translate3d(-57vw, -66vh, 0) rotate(50deg);
            transform: translate3d(-57vw, -66vh, 0) rotate(50deg);
  }
}
.cyan {
  -webkit-animation: cyan linear 30s alternate infinite;
          animation: cyan linear 30s alternate infinite;
  border: 2px solid #78ffba;
  border-radius: 100%;
  width: 28px;
  height: 28px;
  -webkit-transform: translate3d(51vw, 47vh, 0);
          transform: translate3d(51vw, 47vh, 0);
  z-index: 6;
}

.cyan::before {
  -webkit-animation: cyan-pseudo linear 15s alternate infinite;
          animation: cyan-pseudo linear 15s alternate infinite;
  background: #78ffba;
  border: 2px solid #78ffba;
  width: 26px;
  height: 32px;
  -webkit-transform: translate3d(-17vw, 50vh, 0) rotate(221deg);
          transform: translate3d(-17vw, 50vh, 0) rotate(221deg);
}

.cyan::after {
  -webkit-animation: cyan-pseudo linear 20s alternate infinite;
          animation: cyan-pseudo linear 20s alternate infinite;
  border: 2px solid #78ffba;
  width: 34px;
  height: 15px;
  -webkit-transform: translate3d(33vw, -20vh, 0) rotate(47deg);
          transform: translate3d(33vw, -20vh, 0) rotate(47deg);
}

@-webkit-keyframes cyan {
  50% {
    -webkit-transform: translate3d(59vw, 8vh, 0);
            transform: translate3d(59vw, 8vh, 0);
  }
  100% {
    -webkit-transform: translate3d(12vw, 44vh, 0);
            transform: translate3d(12vw, 44vh, 0);
  }
}

@keyframes cyan {
  50% {
    -webkit-transform: translate3d(59vw, 8vh, 0);
            transform: translate3d(59vw, 8vh, 0);
  }
  100% {
    -webkit-transform: translate3d(12vw, 44vh, 0);
            transform: translate3d(12vw, 44vh, 0);
  }
}
@-webkit-keyframes cyan-pseudo {
  33% {
    -webkit-transform: translate3d(24vw, 39vh, 0) rotate(237deg);
            transform: translate3d(24vw, 39vh, 0) rotate(237deg);
  }
  100% {
    -webkit-transform: translate3d(-6vw, 22vh, 0) rotate(22deg);
            transform: translate3d(-6vw, 22vh, 0) rotate(22deg);
  }
}
@keyframes cyan-pseudo {
  33% {
    -webkit-transform: translate3d(24vw, 39vh, 0) rotate(237deg);
            transform: translate3d(24vw, 39vh, 0) rotate(237deg);
  }
  100% {
    -webkit-transform: translate3d(-6vw, 22vh, 0) rotate(22deg);
            transform: translate3d(-6vw, 22vh, 0) rotate(22deg);
  }
}
.light-green {
  -webkit-animation: light-green linear 30s alternate infinite;
          animation: light-green linear 30s alternate infinite;
  border: 2px solid #98fd85;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  -webkit-transform: translate3d(67vw, 94vh, 0);
          transform: translate3d(67vw, 94vh, 0);
  z-index: 11;
}

.light-green::before {
  -webkit-animation: light-green-pseudo linear 15s alternate infinite;
          animation: light-green-pseudo linear 15s alternate infinite;
  background: #98fd85;
  border: 2px solid #98fd85;
  width: 5px;
  height: 13px;
  -webkit-transform: translate3d(-54vw, -91vh, 0) rotate(322deg);
          transform: translate3d(-54vw, -91vh, 0) rotate(322deg);
}

.light-green::after {
  -webkit-animation: light-green-pseudo linear 20s alternate infinite;
          animation: light-green-pseudo linear 20s alternate infinite;
  border: 2px solid #98fd85;
  width: 17px;
  height: 12px;
  -webkit-transform: translate3d(-61vw, -77vh, 0) rotate(210deg);
          transform: translate3d(-61vw, -77vh, 0) rotate(210deg);
}

@-webkit-keyframes light-green {
  50% {
    -webkit-transform: translate3d(93vw, 44vh, 0);
            transform: translate3d(93vw, 44vh, 0);
  }
  100% {
    -webkit-transform: translate3d(33vw, 3vh, 0);
            transform: translate3d(33vw, 3vh, 0);
  }
}

@keyframes light-green {
  50% {
    -webkit-transform: translate3d(93vw, 44vh, 0);
            transform: translate3d(93vw, 44vh, 0);
  }
  100% {
    -webkit-transform: translate3d(33vw, 3vh, 0);
            transform: translate3d(33vw, 3vh, 0);
  }
}
@-webkit-keyframes light-green-pseudo {
  33% {
    -webkit-transform: translate3d(-53vw, 37vh, 0) rotate(81deg);
            transform: translate3d(-53vw, 37vh, 0) rotate(81deg);
  }
  100% {
    -webkit-transform: translate3d(49vw, 79vh, 0) rotate(211deg);
            transform: translate3d(49vw, 79vh, 0) rotate(211deg);
  }
}
@keyframes light-green-pseudo {
  33% {
    -webkit-transform: translate3d(-53vw, 37vh, 0) rotate(81deg);
            transform: translate3d(-53vw, 37vh, 0) rotate(81deg);
  }
  100% {
    -webkit-transform: translate3d(49vw, 79vh, 0) rotate(211deg);
            transform: translate3d(49vw, 79vh, 0) rotate(211deg);
  }
}
.lime {
  -webkit-animation: lime linear 30s alternate infinite;
          animation: lime linear 30s alternate infinite;
  border: 2px solid #befb46;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  -webkit-transform: translate3d(14vw, 49vh, 0);
          transform: translate3d(14vw, 49vh, 0);
  z-index: 10;
}

.lime::before {
  -webkit-animation: lime-pseudo linear 15s alternate infinite;
          animation: lime-pseudo linear 15s alternate infinite;
  background: #befb46;
  border: 2px solid #befb46;
  width: 40px;
  height: 5px;
  -webkit-transform: translate3d(-6vw, 12vh, 0) rotate(212deg);
          transform: translate3d(-6vw, 12vh, 0) rotate(212deg);
}

.lime::after {
  -webkit-animation: lime-pseudo linear 20s alternate infinite;
          animation: lime-pseudo linear 20s alternate infinite;
  border: 2px solid #befb46;
  width: 12px;
  height: 20px;
  -webkit-transform: translate3d(-14vw, -35vh, 0) rotate(169deg);
          transform: translate3d(-14vw, -35vh, 0) rotate(169deg);
}

@-webkit-keyframes lime {
  50% {
    -webkit-transform: translate3d(45vw, 83vh, 0);
            transform: translate3d(45vw, 83vh, 0);
  }
  100% {
    -webkit-transform: translate3d(84vw, 76vh, 0);
            transform: translate3d(84vw, 76vh, 0);
  }
}

@keyframes lime {
  50% {
    -webkit-transform: translate3d(45vw, 83vh, 0);
            transform: translate3d(45vw, 83vh, 0);
  }
  100% {
    -webkit-transform: translate3d(84vw, 76vh, 0);
            transform: translate3d(84vw, 76vh, 0);
  }
}
@-webkit-keyframes lime-pseudo {
  33% {
    -webkit-transform: translate3d(-23vw, -73vh, 0) rotate(196deg);
            transform: translate3d(-23vw, -73vh, 0) rotate(196deg);
  }
  100% {
    -webkit-transform: translate3d(-25vw, -24vh, 0) rotate(82deg);
            transform: translate3d(-25vw, -24vh, 0) rotate(82deg);
  }
}
@keyframes lime-pseudo {
  33% {
    -webkit-transform: translate3d(-23vw, -73vh, 0) rotate(196deg);
            transform: translate3d(-23vw, -73vh, 0) rotate(196deg);
  }
  100% {
    -webkit-transform: translate3d(-25vw, -24vh, 0) rotate(82deg);
            transform: translate3d(-25vw, -24vh, 0) rotate(82deg);
  }
}
.magenta {
  -webkit-animation: magenta linear 30s alternate infinite;
          animation: magenta linear 30s alternate infinite;
  border: 2px solid #6c046c;
  border-radius: 100%;
  width: 46px;
  height: 46px;
  -webkit-transform: translate3d(57vw, 47vh, 0);
          transform: translate3d(57vw, 47vh, 0);
  z-index: 2;
}

.magenta::before {
  -webkit-animation: magenta-pseudo linear 15s alternate infinite;
          animation: magenta-pseudo linear 15s alternate infinite;
  background: #6c046c;
  border: 2px solid #6c046c;
  width: 47px;
  height: 16px;
  -webkit-transform: translate3d(36vw, 50vh, 0) rotate(214deg);
          transform: translate3d(36vw, 50vh, 0) rotate(214deg);
}

.magenta::after {
  -webkit-animation: magenta-pseudo linear 20s alternate infinite;
          animation: magenta-pseudo linear 20s alternate infinite;
  border: 2px solid #6c046c;
  width: 37px;
  height: 25px;
  -webkit-transform: translate3d(-19vw, 3vh, 0) rotate(53deg);
          transform: translate3d(-19vw, 3vh, 0) rotate(53deg);
}

@-webkit-keyframes magenta {
  50% {
    -webkit-transform: translate3d(84vw, 3vh, 0);
            transform: translate3d(84vw, 3vh, 0);
  }
  100% {
    -webkit-transform: translate3d(48vw, 35vh, 0);
            transform: translate3d(48vw, 35vh, 0);
  }
}

@keyframes magenta {
  50% {
    -webkit-transform: translate3d(84vw, 3vh, 0);
            transform: translate3d(84vw, 3vh, 0);
  }
  100% {
    -webkit-transform: translate3d(48vw, 35vh, 0);
            transform: translate3d(48vw, 35vh, 0);
  }
}
@-webkit-keyframes magenta-pseudo {
  33% {
    -webkit-transform: translate3d(14vw, 95vh, 0) rotate(114deg);
            transform: translate3d(14vw, 95vh, 0) rotate(114deg);
  }
  100% {
    -webkit-transform: translate3d(-33vw, 23vh, 0) rotate(96deg);
            transform: translate3d(-33vw, 23vh, 0) rotate(96deg);
  }
}
@keyframes magenta-pseudo {
  33% {
    -webkit-transform: translate3d(14vw, 95vh, 0) rotate(114deg);
            transform: translate3d(14vw, 95vh, 0) rotate(114deg);
  }
  100% {
    -webkit-transform: translate3d(-33vw, 23vh, 0) rotate(96deg);
            transform: translate3d(-33vw, 23vh, 0) rotate(96deg);
  }
}
.lightish-red {
  -webkit-animation: lightish-red linear 30s alternate infinite;
          animation: lightish-red linear 30s alternate infinite;
  border: 2px solid #f04c81;
  border-radius: 100%;
  width: 48px;
  height: 48px;
  -webkit-transform: translate3d(66vw, 40vh, 0);
          transform: translate3d(66vw, 40vh, 0);
  z-index: 8;
}

.lightish-red::before {
  -webkit-animation: lightish-red-pseudo linear 15s alternate infinite;
          animation: lightish-red-pseudo linear 15s alternate infinite;
  background: #f04c81;
  border: 2px solid #f04c81;
  width: 33px;
  height: 41px;
  -webkit-transform: translate3d(-49vw, 22vh, 0) rotate(54deg);
          transform: translate3d(-49vw, 22vh, 0) rotate(54deg);
}

.lightish-red::after {
  -webkit-animation: lightish-red-pseudo linear 20s alternate infinite;
          animation: lightish-red-pseudo linear 20s alternate infinite;
  border: 2px solid #f04c81;
  width: 44px;
  height: 24px;
  -webkit-transform: translate3d(7vw, 0vh, 0) rotate(293deg);
          transform: translate3d(7vw, 0vh, 0) rotate(293deg);
}

@-webkit-keyframes lightish-red {
  50% {
    -webkit-transform: translate3d(46vw, 49vh, 0);
            transform: translate3d(46vw, 49vh, 0);
  }
  100% {
    -webkit-transform: translate3d(64vw, 88vh, 0);
            transform: translate3d(64vw, 88vh, 0);
  }
}

@keyframes lightish-red {
  50% {
    -webkit-transform: translate3d(46vw, 49vh, 0);
            transform: translate3d(46vw, 49vh, 0);
  }
  100% {
    -webkit-transform: translate3d(64vw, 88vh, 0);
            transform: translate3d(64vw, 88vh, 0);
  }
}
@-webkit-keyframes lightish-red-pseudo {
  33% {
    -webkit-transform: translate3d(-28vw, -45vh, 0) rotate(115deg);
            transform: translate3d(-28vw, -45vh, 0) rotate(115deg);
  }
  100% {
    -webkit-transform: translate3d(-25vw, -77vh, 0) rotate(182deg);
            transform: translate3d(-25vw, -77vh, 0) rotate(182deg);
  }
}
@keyframes lightish-red-pseudo {
  33% {
    -webkit-transform: translate3d(-28vw, -45vh, 0) rotate(115deg);
            transform: translate3d(-28vw, -45vh, 0) rotate(115deg);
  }
  100% {
    -webkit-transform: translate3d(-25vw, -77vh, 0) rotate(182deg);
            transform: translate3d(-25vw, -77vh, 0) rotate(182deg);
  }
}
.pink {
  -webkit-animation: pink linear 30s alternate infinite;
          animation: pink linear 30s alternate infinite;
  border: 2px solid #ff4293;
  border-radius: 100%;
  width: 36px;
  height: 36px;
  -webkit-transform: translate3d(96vw, 33vh, 0);
          transform: translate3d(96vw, 33vh, 0);
  z-index: 4;
}

.pink::before {
  -webkit-animation: pink-pseudo linear 15s alternate infinite;
          animation: pink-pseudo linear 15s alternate infinite;
  background: #ff4293;
  border: 2px solid #ff4293;
  width: 12px;
  height: 12px;
  -webkit-transform: translate3d(-37vw, -26vh, 0) rotate(95deg);
          transform: translate3d(-37vw, -26vh, 0) rotate(95deg);
}

.pink::after {
  -webkit-animation: pink-pseudo linear 20s alternate infinite;
          animation: pink-pseudo linear 20s alternate infinite;
  border: 2px solid #ff4293;
  width: 37px;
  height: 35px;
  -webkit-transform: translate3d(-86vw, 30vh, 0) rotate(320deg);
          transform: translate3d(-86vw, 30vh, 0) rotate(320deg);
}

@-webkit-keyframes pink {
  50% {
    -webkit-transform: translate3d(79vw, 86vh, 0);
            transform: translate3d(79vw, 86vh, 0);
  }
  100% {
    -webkit-transform: translate3d(25vw, 42vh, 0);
            transform: translate3d(25vw, 42vh, 0);
  }
}

@keyframes pink {
  50% {
    -webkit-transform: translate3d(79vw, 86vh, 0);
            transform: translate3d(79vw, 86vh, 0);
  }
  100% {
    -webkit-transform: translate3d(25vw, 42vh, 0);
            transform: translate3d(25vw, 42vh, 0);
  }
}
@-webkit-keyframes pink-pseudo {
  33% {
    -webkit-transform: translate3d(-5vw, -84vh, 0) rotate(3deg);
            transform: translate3d(-5vw, -84vh, 0) rotate(3deg);
  }
  100% {
    -webkit-transform: translate3d(42vw, 51vh, 0) rotate(239deg);
            transform: translate3d(42vw, 51vh, 0) rotate(239deg);
  }
}
@keyframes pink-pseudo {
  33% {
    -webkit-transform: translate3d(-5vw, -84vh, 0) rotate(3deg);
            transform: translate3d(-5vw, -84vh, 0) rotate(3deg);
  }
  100% {
    -webkit-transform: translate3d(42vw, 51vh, 0) rotate(239deg);
            transform: translate3d(42vw, 51vh, 0) rotate(239deg);
  }
}*/



html,
body {
  margin: 0;
  padding: 0;
}
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  font-size: 62.5%;
}
body {
  font-size: 1.6em;
  line-height: 1.4;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
.pjln{
  letter-spacing: 7px;
  margin-top: 4px;
  font-size: 2rem;
  color: #ffffff;
}
footer,
header,
main {
  display: block;
}
a {
  text-decoration: none;
  border-bottom: solid transparent 1px;
}
a:active,
a:hover {
  outline: 0;
}
b,
strong {
  font-weight: bold;
}
small {
  font-size: 80%;
}
input {
  font: inherit;
  margin: 0;
  line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
dl dt,
dl dd {
  margin: 0;
  padding: 0;
}
/*html {
  min-height: 100%;
  background-image: -moz-linear-gradient(-60deg, #f7ad0b 0%, #f3741b 80%);
  background-image: -webkit-linear-gradient(-60deg, #f7ad0b 0%, #f3741b 80%);
  background-image: linear-gradient(120deg, #ecfdff 0%, #03A9F4 80%);
  color: #fff;
}*/
body {
  font-family: 'Montserrat', sans-serif;
  width: 90%;
  margin: 45px auto;
  /*margin: 70px 0px 0px 90px !important;*/
}
body > * {
  font-size: 1.4rem;
  font-weight: 400;
  text-shadow: 0 -1px 0 #000000;
}
header p,
footer p,
header h1,
footer h1 {
  margin: 0;
  padding: 4px 0;
  font-size: 12px;
  color: rgb(255 255 255);
  /*background-image: linear-gradient( 90deg, #00000000 19%, #014da3 19%);*/
}
header h1,
footer h1 {
  font-weight: bolder;
  font-size: 3.0rem;
  letter-spacing: 1rem;
}
header {
  /*border-bottom: dotted #525252 1px;*/
}
footer {
  /*border-top: dotted #f9be3c 1px;*/
    border-top: dotted #ee6b1e 1px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #014da3;
    color: white;
    text-align: center;
}
main {
  padding: 4rem 0;
}

#input_container { 
    position:relative;
    padding:0;
    margin:0;
  }
  #password { 
    /*height:20px;*/
    margin:0;
    padding-left:30px;
  }
  #togglePassword {
    position: absolute;
    bottom: 15px;
    left: 10px;
    width: 15px;
    height: 15px;
    color: #525252;
  }
form input {
  width: 100%;
  height: 28px;
  margin-bottom: 15px;
  padding: 5px;
}
form {
  width: 100%;
  max-width: 500px;
  margin: 50px auto;
  background:#fafafa;
  -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
  min-height: 250px;
      padding: 20px;
    border-radius: 5px;
}
main form {
  width: 100%;
  max-width: 35rem;
  margin: 0 auto;
}
main form label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1rem 0 0.5rem 0;
  color: #ffffff;
}
main form input[type="text"],
main form input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
  padding: 0.5rem 1rem;
  height: 4.6rem;
  /*width: 60%;*/
  border: solid #f7ad0b 1px;
  border-top: solid #f3741b 1px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}
main form input[type="text"]:focus,
main form input[type="password"]:focus {
  outline: 0;
  border: solid #f3741b 1px;
  background: #ffffff;
}

.tahun-input{
  webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
  padding: 0.5rem 1rem;
  height: 4.6rem;
  /*width: 60%;*/
  border: solid #f7ad0b 1px;
  border-top: solid #f3741b 1px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}
main form input[type="submit"] {
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
  padding: 0;
  height: 4.6rem;
  line-height: 4.6rem;
  border-radius: 4px;
  /*width: 41%;*/
  background: #292571;
  color: #ffffff;
  border: solid #f7ad0b 1px;
  box-shadow: 0 0 0 2px rgba(184, 81, 10, 0.15);
  font-size: 90%;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
main form input[type="submit"]:hover,
main form input[type="submit"]:focus {
  color: #fff;
  background: #ee6b1e;
  border: solid #f7ad0b 1px;
  outline: 0;
}
/*main form input {
  width: 100%;
  max-width: 48rem;
}
@media all and (min-width: 860px) {
  main form {
    max-width: 70rem;
  }
  main form dl {
    overflow: auto;
  }
  main form dl dt {
    float: left;
    clear: left;
    width: 22rem;
    text-align: right;
    padding: 0 0 1.5rem 0;
  }
  main form dl dt label {
    padding: 0 2rem 0 0;
    line-height: 4.6rem;
  }
  main form dl dd {
    float: left;
    width: 48rem;
    padding: 0 0 1.5rem 0;
  }
  main form p {
    padding-left: 0rem;
  }
}*/
.error-msg {
  display: block;
  color: #c00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  overflow: hidden;
  margin: 0;
  height: 0;
}
.error-msg.open {
  margin: 0.5rem 0 0 0;
  height: auto;
}