.anime {
  background: radial-gradient(ellipse at bottom, #49183a 0%, #000000 100%);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 200px;
  z-index: -1;
}
.animation {
  width: 516px;
  height: 511px;
  /* position: relative; */
  display: flex;
  flex-wrap: wrap;
  transform: rotate(90deg) rotateY(290deg);
  transform-style: preserve-3d;
}
.animation .kvad {
  width: 57px;
  height: 57px;
  position: relative;
  margin: 2px;
  transform-style: preserve-3d;
}
.animation .kvad .top,
.animation .kvad .right,
.animation .kvad .bottom,
.animation .kvad .left {
  position: absolute;
  height: 1px;
  transform-origin: center;
}
.animation .kvad .top:nth-of-type(1),
.animation .kvad .right:nth-of-type(1),
.animation .kvad .bottom:nth-of-type(1),
.animation .kvad .left:nth-of-type(1) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(66deg);
}
.animation .kvad .top:nth-of-type(2),
.animation .kvad .right:nth-of-type(2),
.animation .kvad .bottom:nth-of-type(2),
.animation .kvad .left:nth-of-type(2) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(132deg);
}
.animation .kvad .top:nth-of-type(3),
.animation .kvad .right:nth-of-type(3),
.animation .kvad .bottom:nth-of-type(3),
.animation .kvad .left:nth-of-type(3) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(198deg);
}
.animation .kvad .top:nth-of-type(4),
.animation .kvad .right:nth-of-type(4),
.animation .kvad .bottom:nth-of-type(4),
.animation .kvad .left:nth-of-type(4) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(264deg);
}
.animation .kvad .top:nth-of-type(5),
.animation .kvad .right:nth-of-type(5),
.animation .kvad .bottom:nth-of-type(5),
.animation .kvad .left:nth-of-type(5) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(330deg);
}
.animation .kvad .top:nth-of-type(6),
.animation .kvad .right:nth-of-type(6),
.animation .kvad .bottom:nth-of-type(6),
.animation .kvad .left:nth-of-type(6) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(396deg);
}
.animation .kvad .top:nth-of-type(7),
.animation .kvad .right:nth-of-type(7),
.animation .kvad .bottom:nth-of-type(7),
.animation .kvad .left:nth-of-type(7) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(462deg);
}
.animation .kvad .top:nth-of-type(8),
.animation .kvad .right:nth-of-type(8),
.animation .kvad .bottom:nth-of-type(8),
.animation .kvad .left:nth-of-type(8) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(528deg);
}
.animation .kvad .top:nth-of-type(9),
.animation .kvad .right:nth-of-type(9),
.animation .kvad .bottom:nth-of-type(9),
.animation .kvad .left:nth-of-type(9) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(594deg);
}
.animation .kvad .top:nth-of-type(10),
.animation .kvad .right:nth-of-type(10),
.animation .kvad .bottom:nth-of-type(10),
.animation .kvad .left:nth-of-type(10) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(660deg);
}
.animation .kvad .top:nth-of-type(11),
.animation .kvad .right:nth-of-type(11),
.animation .kvad .bottom:nth-of-type(11),
.animation .kvad .left:nth-of-type(11) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(726deg);
}
.animation .kvad .top:nth-of-type(12),
.animation .kvad .right:nth-of-type(12),
.animation .kvad .bottom:nth-of-type(12),
.animation .kvad .left:nth-of-type(12) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(792deg);
}
.animation .kvad .top:nth-of-type(13),
.animation .kvad .right:nth-of-type(13),
.animation .kvad .bottom:nth-of-type(13),
.animation .kvad .left:nth-of-type(13) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(858deg);
}
.animation .kvad .top:nth-of-type(14),
.animation .kvad .right:nth-of-type(14),
.animation .kvad .bottom:nth-of-type(14),
.animation .kvad .left:nth-of-type(14) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(924deg);
}
.animation .kvad .top:nth-of-type(15),
.animation .kvad .right:nth-of-type(15),
.animation .kvad .bottom:nth-of-type(15),
.animation .kvad .left:nth-of-type(15) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(990deg);
}
.animation .kvad .top:nth-of-type(16),
.animation .kvad .right:nth-of-type(16),
.animation .kvad .bottom:nth-of-type(16),
.animation .kvad .left:nth-of-type(16) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1056deg);
}
.animation .kvad .top:nth-of-type(17),
.animation .kvad .right:nth-of-type(17),
.animation .kvad .bottom:nth-of-type(17),
.animation .kvad .left:nth-of-type(17) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1122deg);
}
.animation .kvad .top:nth-of-type(18),
.animation .kvad .right:nth-of-type(18),
.animation .kvad .bottom:nth-of-type(18),
.animation .kvad .left:nth-of-type(18) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1188deg);
}
.animation .kvad .top:nth-of-type(19),
.animation .kvad .right:nth-of-type(19),
.animation .kvad .bottom:nth-of-type(19),
.animation .kvad .left:nth-of-type(19) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1254deg);
}
.animation .kvad .top:nth-of-type(20),
.animation .kvad .right:nth-of-type(20),
.animation .kvad .bottom:nth-of-type(20),
.animation .kvad .left:nth-of-type(20) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1320deg);
}
.animation .kvad .top:nth-of-type(21),
.animation .kvad .right:nth-of-type(21),
.animation .kvad .bottom:nth-of-type(21),
.animation .kvad .left:nth-of-type(21) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1386deg);
}
.animation .kvad .top:nth-of-type(22),
.animation .kvad .right:nth-of-type(22),
.animation .kvad .bottom:nth-of-type(22),
.animation .kvad .left:nth-of-type(22) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1452deg);
}
.animation .kvad .top:nth-of-type(23),
.animation .kvad .right:nth-of-type(23),
.animation .kvad .bottom:nth-of-type(23),
.animation .kvad .left:nth-of-type(23) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1518deg);
}
.animation .kvad .top:nth-of-type(24),
.animation .kvad .right:nth-of-type(24),
.animation .kvad .bottom:nth-of-type(24),
.animation .kvad .left:nth-of-type(24) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1584deg);
}
.animation .kvad .top:nth-of-type(25),
.animation .kvad .right:nth-of-type(25),
.animation .kvad .bottom:nth-of-type(25),
.animation .kvad .left:nth-of-type(25) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1650deg);
}
.animation .kvad .top:nth-of-type(26),
.animation .kvad .right:nth-of-type(26),
.animation .kvad .bottom:nth-of-type(26),
.animation .kvad .left:nth-of-type(26) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1716deg);
}
.animation .kvad .top:nth-of-type(27),
.animation .kvad .right:nth-of-type(27),
.animation .kvad .bottom:nth-of-type(27),
.animation .kvad .left:nth-of-type(27) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1782deg);
}
.animation .kvad .top:nth-of-type(28),
.animation .kvad .right:nth-of-type(28),
.animation .kvad .bottom:nth-of-type(28),
.animation .kvad .left:nth-of-type(28) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1848deg);
}
.animation .kvad .top:nth-of-type(29),
.animation .kvad .right:nth-of-type(29),
.animation .kvad .bottom:nth-of-type(29),
.animation .kvad .left:nth-of-type(29) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1914deg);
}
.animation .kvad .top:nth-of-type(30),
.animation .kvad .right:nth-of-type(30),
.animation .kvad .bottom:nth-of-type(30),
.animation .kvad .left:nth-of-type(30) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(1980deg);
}
.animation .kvad .top:nth-of-type(31),
.animation .kvad .right:nth-of-type(31),
.animation .kvad .bottom:nth-of-type(31),
.animation .kvad .left:nth-of-type(31) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2046deg);
}
.animation .kvad .top:nth-of-type(32),
.animation .kvad .right:nth-of-type(32),
.animation .kvad .bottom:nth-of-type(32),
.animation .kvad .left:nth-of-type(32) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2112deg);
}
.animation .kvad .top:nth-of-type(33),
.animation .kvad .right:nth-of-type(33),
.animation .kvad .bottom:nth-of-type(33),
.animation .kvad .left:nth-of-type(33) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2178deg);
}
.animation .kvad .top:nth-of-type(34),
.animation .kvad .right:nth-of-type(34),
.animation .kvad .bottom:nth-of-type(34),
.animation .kvad .left:nth-of-type(34) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2244deg);
}
.animation .kvad .top:nth-of-type(35),
.animation .kvad .right:nth-of-type(35),
.animation .kvad .bottom:nth-of-type(35),
.animation .kvad .left:nth-of-type(35) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2310deg);
}
.animation .kvad .top:nth-of-type(36),
.animation .kvad .right:nth-of-type(36),
.animation .kvad .bottom:nth-of-type(36),
.animation .kvad .left:nth-of-type(36) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2376deg);
}
.animation .kvad .top:nth-of-type(37),
.animation .kvad .right:nth-of-type(37),
.animation .kvad .bottom:nth-of-type(37),
.animation .kvad .left:nth-of-type(37) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2442deg);
}
.animation .kvad .top:nth-of-type(38),
.animation .kvad .right:nth-of-type(38),
.animation .kvad .bottom:nth-of-type(38),
.animation .kvad .left:nth-of-type(38) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2508deg);
}
.animation .kvad .top:nth-of-type(39),
.animation .kvad .right:nth-of-type(39),
.animation .kvad .bottom:nth-of-type(39),
.animation .kvad .left:nth-of-type(39) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2574deg);
}
.animation .kvad .top:nth-of-type(40),
.animation .kvad .right:nth-of-type(40),
.animation .kvad .bottom:nth-of-type(40),
.animation .kvad .left:nth-of-type(40) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2640deg);
}
.animation .kvad .top:nth-of-type(41),
.animation .kvad .right:nth-of-type(41),
.animation .kvad .bottom:nth-of-type(41),
.animation .kvad .left:nth-of-type(41) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2706deg);
}
.animation .kvad .top:nth-of-type(42),
.animation .kvad .right:nth-of-type(42),
.animation .kvad .bottom:nth-of-type(42),
.animation .kvad .left:nth-of-type(42) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2772deg);
}
.animation .kvad .top:nth-of-type(43),
.animation .kvad .right:nth-of-type(43),
.animation .kvad .bottom:nth-of-type(43),
.animation .kvad .left:nth-of-type(43) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2838deg);
}
.animation .kvad .top:nth-of-type(44),
.animation .kvad .right:nth-of-type(44),
.animation .kvad .bottom:nth-of-type(44),
.animation .kvad .left:nth-of-type(44) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2904deg);
}
.animation .kvad .top:nth-of-type(45),
.animation .kvad .right:nth-of-type(45),
.animation .kvad .bottom:nth-of-type(45),
.animation .kvad .left:nth-of-type(45) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(2970deg);
}
.animation .kvad .top:nth-of-type(46),
.animation .kvad .right:nth-of-type(46),
.animation .kvad .bottom:nth-of-type(46),
.animation .kvad .left:nth-of-type(46) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3036deg);
}
.animation .kvad .top:nth-of-type(47),
.animation .kvad .right:nth-of-type(47),
.animation .kvad .bottom:nth-of-type(47),
.animation .kvad .left:nth-of-type(47) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3102deg);
}
.animation .kvad .top:nth-of-type(48),
.animation .kvad .right:nth-of-type(48),
.animation .kvad .bottom:nth-of-type(48),
.animation .kvad .left:nth-of-type(48) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3168deg);
}
.animation .kvad .top:nth-of-type(49),
.animation .kvad .right:nth-of-type(49),
.animation .kvad .bottom:nth-of-type(49),
.animation .kvad .left:nth-of-type(49) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3234deg);
}
.animation .kvad .top:nth-of-type(50),
.animation .kvad .right:nth-of-type(50),
.animation .kvad .bottom:nth-of-type(50),
.animation .kvad .left:nth-of-type(50) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3300deg);
}
.animation .kvad .top:nth-of-type(51),
.animation .kvad .right:nth-of-type(51),
.animation .kvad .bottom:nth-of-type(51),
.animation .kvad .left:nth-of-type(51) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3366deg);
}
.animation .kvad .top:nth-of-type(52),
.animation .kvad .right:nth-of-type(52),
.animation .kvad .bottom:nth-of-type(52),
.animation .kvad .left:nth-of-type(52) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3432deg);
}
.animation .kvad .top:nth-of-type(53),
.animation .kvad .right:nth-of-type(53),
.animation .kvad .bottom:nth-of-type(53),
.animation .kvad .left:nth-of-type(53) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3498deg);
}
.animation .kvad .top:nth-of-type(54),
.animation .kvad .right:nth-of-type(54),
.animation .kvad .bottom:nth-of-type(54),
.animation .kvad .left:nth-of-type(54) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3564deg);
}
.animation .kvad .top:nth-of-type(55),
.animation .kvad .right:nth-of-type(55),
.animation .kvad .bottom:nth-of-type(55),
.animation .kvad .left:nth-of-type(55) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3630deg);
}
.animation .kvad .top:nth-of-type(56),
.animation .kvad .right:nth-of-type(56),
.animation .kvad .bottom:nth-of-type(56),
.animation .kvad .left:nth-of-type(56) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3696deg);
}
.animation .kvad .top:nth-of-type(57),
.animation .kvad .right:nth-of-type(57),
.animation .kvad .bottom:nth-of-type(57),
.animation .kvad .left:nth-of-type(57) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3762deg);
}
.animation .kvad .top:nth-of-type(58),
.animation .kvad .right:nth-of-type(58),
.animation .kvad .bottom:nth-of-type(58),
.animation .kvad .left:nth-of-type(58) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3828deg);
}
.animation .kvad .top:nth-of-type(59),
.animation .kvad .right:nth-of-type(59),
.animation .kvad .bottom:nth-of-type(59),
.animation .kvad .left:nth-of-type(59) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3894deg);
}
.animation .kvad .top:nth-of-type(60),
.animation .kvad .right:nth-of-type(60),
.animation .kvad .bottom:nth-of-type(60),
.animation .kvad .left:nth-of-type(60) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(3960deg);
}
.animation .kvad .top:nth-of-type(61),
.animation .kvad .right:nth-of-type(61),
.animation .kvad .bottom:nth-of-type(61),
.animation .kvad .left:nth-of-type(61) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(4026deg);
}
.animation .kvad .top:nth-of-type(62),
.animation .kvad .right:nth-of-type(62),
.animation .kvad .bottom:nth-of-type(62),
.animation .kvad .left:nth-of-type(62) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(4092deg);
}
.animation .kvad .top:nth-of-type(63),
.animation .kvad .right:nth-of-type(63),
.animation .kvad .bottom:nth-of-type(63),
.animation .kvad .left:nth-of-type(63) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(4158deg);
}
.animation .kvad .top:nth-of-type(64),
.animation .kvad .right:nth-of-type(64),
.animation .kvad .bottom:nth-of-type(64),
.animation .kvad .left:nth-of-type(64) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(4224deg);
}
.animation .kvad .top:nth-of-type(65),
.animation .kvad .right:nth-of-type(65),
.animation .kvad .bottom:nth-of-type(65),
.animation .kvad .left:nth-of-type(65) {
  box-shadow: 0 0 10px 3px green;
  background: greenyellow;
  filter: hue-rotate(4290deg);
}
.animation .kvad .top {
  width: 100%;
}
.animation .kvad .right {
  height: 100%;
  width: 1px;
  right: 0;
}
.animation .kvad .left {
  height: 100%;
  width: 1px;
  left: 0;
}
.animation .kvad .bottom {
  bottom: 0;
  width: 100%;
}