body {
  margin: 0;
  background: black;
  color: white;
  overflow: hidden;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 108.3333333333vw;
  height: 108.3333333333vw;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.square {
  position: relative;
}
.square::before, .square::after {
  content: '';
  position: absolute;
  display: white;
  background: white;
  border-radius: 4px;
}
.square:before {
  top: 0rem;
  left: 2.375vw;
  width: calc(100% - 1.75vw - 3vw);
  height: 2px;
  transform: translateY(-50%) rotate(0deg);
  animation: lineYpulse 2.5s infinite alternate-reverse ease-in;
}
.square:after {
  top: 2.375vw;
  left: 0rem;
  width: 2px;
  height: calc(100% - 1.75vw - 3vw);
  transform: translateX(-50%) rotate(0deg);
  animation: lineXpulse 2.5s infinite alternate-reverse ease-in;
}

.dot {
  position: absolute;
  width: 1.75vw;
  height: 1.75vw;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: dotPulse 2.5s infinite alternate ease-in;
}
.dot:last-child {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  animation-direction: alternate-reverse;
}

.square:nth-child(1)::before, .square:nth-child(1)::after,
.square:nth-child(1) .dot {
  opacity: 0.125;
  animation-delay: -0.125s;
}

.square:nth-child(2)::before, .square:nth-child(2)::after,
.square:nth-child(2) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(3)::before, .square:nth-child(3)::after,
.square:nth-child(3) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(4)::before, .square:nth-child(4)::after,
.square:nth-child(4) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(5)::before, .square:nth-child(5)::after,
.square:nth-child(5) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(6)::before, .square:nth-child(6)::after,
.square:nth-child(6) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(7)::before, .square:nth-child(7)::after,
.square:nth-child(7) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(8)::before, .square:nth-child(8)::after,
.square:nth-child(8) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(9)::before, .square:nth-child(9)::after,
.square:nth-child(9) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(10)::before, .square:nth-child(10)::after,
.square:nth-child(10) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(11)::before, .square:nth-child(11)::after,
.square:nth-child(11) .dot {
  opacity: 0.125;
  animation-delay: -0.125s;
}

.square:nth-child(12)::before, .square:nth-child(12)::after,
.square:nth-child(12) .dot {
  opacity: 0;
  animation-delay: 0s;
}

.square:nth-child(13)::before, .square:nth-child(13)::after,
.square:nth-child(13) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(14)::before, .square:nth-child(14)::after,
.square:nth-child(14) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(15)::before, .square:nth-child(15)::after,
.square:nth-child(15) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(16)::before, .square:nth-child(16)::after,
.square:nth-child(16) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(17)::before, .square:nth-child(17)::after,
.square:nth-child(17) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(18)::before, .square:nth-child(18)::after,
.square:nth-child(18) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(19)::before, .square:nth-child(19)::after,
.square:nth-child(19) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(20)::before, .square:nth-child(20)::after,
.square:nth-child(20) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(21)::before, .square:nth-child(21)::after,
.square:nth-child(21) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(22)::before, .square:nth-child(22)::after,
.square:nth-child(22) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(23)::before, .square:nth-child(23)::after,
.square:nth-child(23) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(24)::before, .square:nth-child(24)::after,
.square:nth-child(24) .dot {
  opacity: 0.125;
  animation-delay: -0.125s;
}

.square:nth-child(25)::before, .square:nth-child(25)::after,
.square:nth-child(25) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(26)::before, .square:nth-child(26)::after,
.square:nth-child(26) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(27)::before, .square:nth-child(27)::after,
.square:nth-child(27) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(28)::before, .square:nth-child(28)::after,
.square:nth-child(28) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(29)::before, .square:nth-child(29)::after,
.square:nth-child(29) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(30)::before, .square:nth-child(30)::after,
.square:nth-child(30) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(31)::before, .square:nth-child(31)::after,
.square:nth-child(31) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(32)::before, .square:nth-child(32)::after,
.square:nth-child(32) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(33)::before, .square:nth-child(33)::after,
.square:nth-child(33) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(34)::before, .square:nth-child(34)::after,
.square:nth-child(34) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(35)::before, .square:nth-child(35)::after,
.square:nth-child(35) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(36)::before, .square:nth-child(36)::after,
.square:nth-child(36) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(37)::before, .square:nth-child(37)::after,
.square:nth-child(37) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(38)::before, .square:nth-child(38)::after,
.square:nth-child(38) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(39)::before, .square:nth-child(39)::after,
.square:nth-child(39) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(40)::before, .square:nth-child(40)::after,
.square:nth-child(40) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(41)::before, .square:nth-child(41)::after,
.square:nth-child(41) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(42)::before, .square:nth-child(42)::after,
.square:nth-child(42) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(43)::before, .square:nth-child(43)::after,
.square:nth-child(43) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(44)::before, .square:nth-child(44)::after,
.square:nth-child(44) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(45)::before, .square:nth-child(45)::after,
.square:nth-child(45) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(46)::before, .square:nth-child(46)::after,
.square:nth-child(46) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(47)::before, .square:nth-child(47)::after,
.square:nth-child(47) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(48)::before, .square:nth-child(48)::after,
.square:nth-child(48) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(49)::before, .square:nth-child(49)::after,
.square:nth-child(49) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(50)::before, .square:nth-child(50)::after,
.square:nth-child(50) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(51)::before, .square:nth-child(51)::after,
.square:nth-child(51) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(52)::before, .square:nth-child(52)::after,
.square:nth-child(52) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(53)::before, .square:nth-child(53)::after,
.square:nth-child(53) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(54)::before, .square:nth-child(54)::after,
.square:nth-child(54) .dot {
  opacity: 1.25;
  animation-delay: -1.25s;
}

.square:nth-child(55)::before, .square:nth-child(55)::after,
.square:nth-child(55) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(56)::before, .square:nth-child(56)::after,
.square:nth-child(56) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(57)::before, .square:nth-child(57)::after,
.square:nth-child(57) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(58)::before, .square:nth-child(58)::after,
.square:nth-child(58) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(59)::before, .square:nth-child(59)::after,
.square:nth-child(59) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(60)::before, .square:nth-child(60)::after,
.square:nth-child(60) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(61)::before, .square:nth-child(61)::after,
.square:nth-child(61) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(62)::before, .square:nth-child(62)::after,
.square:nth-child(62) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(63)::before, .square:nth-child(63)::after,
.square:nth-child(63) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(64)::before, .square:nth-child(64)::after,
.square:nth-child(64) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(65)::before, .square:nth-child(65)::after,
.square:nth-child(65) .dot {
  opacity: 1.25;
  animation-delay: -1.25s;
}

.square:nth-child(66)::before, .square:nth-child(66)::after,
.square:nth-child(66) .dot {
  opacity: 1.375;
  animation-delay: -1.375s;
}

.square:nth-child(67)::before, .square:nth-child(67)::after,
.square:nth-child(67) .dot {
  opacity: 1.25;
  animation-delay: -1.25s;
}

.square:nth-child(68)::before, .square:nth-child(68)::after,
.square:nth-child(68) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(69)::before, .square:nth-child(69)::after,
.square:nth-child(69) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(70)::before, .square:nth-child(70)::after,
.square:nth-child(70) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(71)::before, .square:nth-child(71)::after,
.square:nth-child(71) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(72)::before, .square:nth-child(72)::after,
.square:nth-child(72) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(73)::before, .square:nth-child(73)::after,
.square:nth-child(73) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(74)::before, .square:nth-child(74)::after,
.square:nth-child(74) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(75)::before, .square:nth-child(75)::after,
.square:nth-child(75) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(76)::before, .square:nth-child(76)::after,
.square:nth-child(76) .dot {
  opacity: 1.25;
  animation-delay: -1.25s;
}

.square:nth-child(77)::before, .square:nth-child(77)::after,
.square:nth-child(77) .dot {
  opacity: 1.375;
  animation-delay: -1.375s;
}

.square:nth-child(78)::before, .square:nth-child(78)::after,
.square:nth-child(78) .dot {
  opacity: 1.5;
  animation-delay: -1.5s;
}

.square:nth-child(79)::before, .square:nth-child(79)::after,
.square:nth-child(79) .dot {
  opacity: 1.375;
  animation-delay: -1.375s;
}

.square:nth-child(80)::before, .square:nth-child(80)::after,
.square:nth-child(80) .dot {
  opacity: 1.25;
  animation-delay: -1.25s;
}

.square:nth-child(81)::before, .square:nth-child(81)::after,
.square:nth-child(81) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(82)::before, .square:nth-child(82)::after,
.square:nth-child(82) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(83)::before, .square:nth-child(83)::after,
.square:nth-child(83) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(84)::before, .square:nth-child(84)::after,
.square:nth-child(84) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(85)::before, .square:nth-child(85)::after,
.square:nth-child(85) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(86)::before, .square:nth-child(86)::after,
.square:nth-child(86) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(87)::before, .square:nth-child(87)::after,
.square:nth-child(87) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(88)::before, .square:nth-child(88)::after,
.square:nth-child(88) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(89)::before, .square:nth-child(89)::after,
.square:nth-child(89) .dot {
  opacity: 1.25;
  animation-delay: -1.25s;
}

.square:nth-child(90)::before, .square:nth-child(90)::after,
.square:nth-child(90) .dot {
  opacity: 1.375;
  animation-delay: -1.375s;
}

.square:nth-child(91)::before, .square:nth-child(91)::after,
.square:nth-child(91) .dot {
  opacity: 1.25;
  animation-delay: -1.25s;
}

.square:nth-child(92)::before, .square:nth-child(92)::after,
.square:nth-child(92) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(93)::before, .square:nth-child(93)::after,
.square:nth-child(93) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(94)::before, .square:nth-child(94)::after,
.square:nth-child(94) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(95)::before, .square:nth-child(95)::after,
.square:nth-child(95) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(96)::before, .square:nth-child(96)::after,
.square:nth-child(96) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(97)::before, .square:nth-child(97)::after,
.square:nth-child(97) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(98)::before, .square:nth-child(98)::after,
.square:nth-child(98) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(99)::before, .square:nth-child(99)::after,
.square:nth-child(99) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(100)::before, .square:nth-child(100)::after,
.square:nth-child(100) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(101)::before, .square:nth-child(101)::after,
.square:nth-child(101) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(102)::before, .square:nth-child(102)::after,
.square:nth-child(102) .dot {
  opacity: 1.25;
  animation-delay: -1.25s;
}

.square:nth-child(103)::before, .square:nth-child(103)::after,
.square:nth-child(103) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(104)::before, .square:nth-child(104)::after,
.square:nth-child(104) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(105)::before, .square:nth-child(105)::after,
.square:nth-child(105) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(106)::before, .square:nth-child(106)::after,
.square:nth-child(106) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(107)::before, .square:nth-child(107)::after,
.square:nth-child(107) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(108)::before, .square:nth-child(108)::after,
.square:nth-child(108) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(109)::before, .square:nth-child(109)::after,
.square:nth-child(109) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(110)::before, .square:nth-child(110)::after,
.square:nth-child(110) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(111)::before, .square:nth-child(111)::after,
.square:nth-child(111) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(112)::before, .square:nth-child(112)::after,
.square:nth-child(112) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(113)::before, .square:nth-child(113)::after,
.square:nth-child(113) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(114)::before, .square:nth-child(114)::after,
.square:nth-child(114) .dot {
  opacity: 1.125;
  animation-delay: -1.125s;
}

.square:nth-child(115)::before, .square:nth-child(115)::after,
.square:nth-child(115) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(116)::before, .square:nth-child(116)::after,
.square:nth-child(116) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(117)::before, .square:nth-child(117)::after,
.square:nth-child(117) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(118)::before, .square:nth-child(118)::after,
.square:nth-child(118) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(119)::before, .square:nth-child(119)::after,
.square:nth-child(119) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(120)::before, .square:nth-child(120)::after,
.square:nth-child(120) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(121)::before, .square:nth-child(121)::after,
.square:nth-child(121) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(122)::before, .square:nth-child(122)::after,
.square:nth-child(122) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(123)::before, .square:nth-child(123)::after,
.square:nth-child(123) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(124)::before, .square:nth-child(124)::after,
.square:nth-child(124) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(125)::before, .square:nth-child(125)::after,
.square:nth-child(125) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(126)::before, .square:nth-child(126)::after,
.square:nth-child(126) .dot {
  opacity: 1;
  animation-delay: -1s;
}

.square:nth-child(127)::before, .square:nth-child(127)::after,
.square:nth-child(127) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(128)::before, .square:nth-child(128)::after,
.square:nth-child(128) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(129)::before, .square:nth-child(129)::after,
.square:nth-child(129) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(130)::before, .square:nth-child(130)::after,
.square:nth-child(130) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(131)::before, .square:nth-child(131)::after,
.square:nth-child(131) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(132)::before, .square:nth-child(132)::after,
.square:nth-child(132) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(133)::before, .square:nth-child(133)::after,
.square:nth-child(133) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(134)::before, .square:nth-child(134)::after,
.square:nth-child(134) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(135)::before, .square:nth-child(135)::after,
.square:nth-child(135) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(136)::before, .square:nth-child(136)::after,
.square:nth-child(136) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(137)::before, .square:nth-child(137)::after,
.square:nth-child(137) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(138)::before, .square:nth-child(138)::after,
.square:nth-child(138) .dot {
  opacity: 0.875;
  animation-delay: -0.875s;
}

.square:nth-child(139)::before, .square:nth-child(139)::after,
.square:nth-child(139) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(140)::before, .square:nth-child(140)::after,
.square:nth-child(140) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(141)::before, .square:nth-child(141)::after,
.square:nth-child(141) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(142)::before, .square:nth-child(142)::after,
.square:nth-child(142) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(143)::before, .square:nth-child(143)::after,
.square:nth-child(143) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(144)::before, .square:nth-child(144)::after,
.square:nth-child(144) .dot {
  opacity: 0.125;
  animation-delay: -0.125s;
}

.square:nth-child(145)::before, .square:nth-child(145)::after,
.square:nth-child(145) .dot {
  opacity: 0.125;
  animation-delay: -0.125s;
}

.square:nth-child(146)::before, .square:nth-child(146)::after,
.square:nth-child(146) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(147)::before, .square:nth-child(147)::after,
.square:nth-child(147) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(148)::before, .square:nth-child(148)::after,
.square:nth-child(148) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(149)::before, .square:nth-child(149)::after,
.square:nth-child(149) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(150)::before, .square:nth-child(150)::after,
.square:nth-child(150) .dot {
  opacity: 0.75;
  animation-delay: -0.75s;
}

.square:nth-child(151)::before, .square:nth-child(151)::after,
.square:nth-child(151) .dot {
  opacity: 0.625;
  animation-delay: -0.625s;
}

.square:nth-child(152)::before, .square:nth-child(152)::after,
.square:nth-child(152) .dot {
  opacity: 0.5;
  animation-delay: -0.5s;
}

.square:nth-child(153)::before, .square:nth-child(153)::after,
.square:nth-child(153) .dot {
  opacity: 0.375;
  animation-delay: -0.375s;
}

.square:nth-child(154)::before, .square:nth-child(154)::after,
.square:nth-child(154) .dot {
  opacity: 0.25;
  animation-delay: -0.25s;
}

.square:nth-child(155)::before, .square:nth-child(155)::after,
.square:nth-child(155) .dot {
  opacity: 0.125;
  animation-delay: -0.125s;
}

.square:nth-child(156)::before, .square:nth-child(156)::after,
.square:nth-child(156) .dot {
  opacity: 0;
  animation-delay: 0s;
}

@keyframes dotPulse {
  0%, 35% {
    transform: translate3d(-50%, -50%, 0) scale(0);
  }
  65%, 100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}
@keyframes lineXpulse {
  0%, 35% {
    transform: translate3d(-50%, 0, 0) rotate(0deg);
  }
  65%, 100% {
    transform: translate3d(-50%, 0, 0) rotate(90deg);
  }
}
@keyframes lineYpulse {
  0%, 35% {
    transform: translate3d(0, -50%, 0) rotate(0deg);
  }
  65%, 100% {
    transform: translate3d(0, -50%, 0) rotate(90deg);
  }
}
