body {
  background: linear-gradient(#000 0%, #1b1e33 100%);
  margin: 0;
  height: 100vh;
  overflow: hidden;
}


.star {
  background: white;
  box-shadow: 0 0 2px 1px blue;
  height: 2px;
  width: 2px;
  position: absolute;
  z-index: -1;
  opacity: 0.3;
  animation-name: twinkle;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
.star:nth-of-type(1) {
  animation-delay: -2s;
  top: 91vh;
  left: 42vw;
}
.star:nth-of-type(2) {
  animation-delay: -8s;
  top: 36vh;
  left: 64vw;
}
.star:nth-of-type(3) {
  animation-delay: -20s;
  top: 1vh;
  left: 74vw;
}
.star:nth-of-type(4) {
  animation-delay: -17s;
  top: 61vh;
  left: 86vw;
}
.star:nth-of-type(5) {
  animation-delay: -4s;
  top: 51vh;
  left: 34vw;
}
.star:nth-of-type(6) {
  animation-delay: -4s;
  top: 70vh;
  left: 61vw;
}
.star:nth-of-type(7) {
  animation-delay: -14s;
  top: 24vh;
  left: 48vw;
}
.star:nth-of-type(8) {
  animation-delay: -2s;
  top: 85vh;
  left: 87vw;
}
.star:nth-of-type(9) {
  animation-delay: -6s;
  top: 20vh;
  left: 38vw;
}
.star:nth-of-type(10) {
  animation-delay: -13s;
  top: 16vh;
  left: 58vw;
}
.star:nth-of-type(11) {
  animation-delay: -14s;
  top: 81vh;
  left: 43vw;
}
.star:nth-of-type(12) {
  animation-delay: -20s;
  top: 10vh;
  left: 32vw;
}
.star:nth-of-type(13) {
  animation-delay: -13s;
  top: 75vh;
  left: 51vw;
}
.star:nth-of-type(14) {
  animation-delay: -19s;
  top: 50vh;
  left: 43vw;
}
.star:nth-of-type(15) {
  animation-delay: -18s;
  top: 94vh;
  left: 33vw;
}
.star:nth-of-type(16) {
  animation-delay: -16s;
  top: 85vh;
  left: 17vw;
}
.star:nth-of-type(17) {
  animation-delay: -3s;
  top: 22vh;
  left: 52vw;
}
.star:nth-of-type(18) {
  animation-delay: -12s;
  top: 19vh;
  left: 42vw;
}
.star:nth-of-type(19) {
  animation-delay: -12s;
  top: 74vh;
  left: 9vw;
}
.star:nth-of-type(20) {
  animation-delay: -15s;
  top: 17vh;
  left: 35vw;
}
.star:nth-of-type(21) {
  animation-delay: -15s;
  top: 57vh;
  left: 25vw;
}
.star:nth-of-type(22) {
  animation-delay: -5s;
  top: 45vh;
  left: 29vw;
}
.star:nth-of-type(23) {
  animation-delay: -16s;
  top: 91vh;
  left: 67vw;
}
.star:nth-of-type(24) {
  animation-delay: -18s;
  top: 86vh;
  left: 72vw;
}
.star:nth-of-type(25) {
  animation-delay: -17s;
  top: 38vh;
  left: 96vw;
}
.star:nth-of-type(26) {
  animation-delay: -15s;
  top: 73vh;
  left: 7vw;
}
.star:nth-of-type(27) {
  animation-delay: -3s;
  top: 97vh;
  left: 41vw;
}
.star:nth-of-type(28) {
  animation-delay: -13s;
  top: 86vh;
  left: 34vw;
}
.star:nth-of-type(29) {
  animation-delay: -10s;
  top: 97vh;
  left: 86vw;
}
.star:nth-of-type(30) {
  animation-delay: -11s;
  top: 68vh;
  left: 8vw;
}
.star:nth-of-type(31) {
  animation-delay: -7s;
  top: 25vh;
  left: 5vw;
}
.star:nth-of-type(32) {
  animation-delay: -13s;
  top: 48vh;
  left: 71vw;
}
.star:nth-of-type(33) {
  animation-delay: -10s;
  top: 23vh;
  left: 19vw;
}
.star:nth-of-type(34) {
  animation-delay: -5s;
  top: 30vh;
  left: 58vw;
}
.star:nth-of-type(35) {
  animation-delay: -15s;
  top: 1vh;
  left: 7vw;
}
.star:nth-of-type(36) {
  animation-delay: -3s;
  top: 12vh;
  left: 5vw;
}
.star:nth-of-type(37) {
  animation-delay: -10s;
  top: 28vh;
  left: 53vw;
}
.star:nth-of-type(38) {
  animation-delay: -18s;
  top: 24vh;
  left: 17vw;
}
.star:nth-of-type(39) {
  animation-delay: -5s;
  top: 81vh;
  left: 8vw;
}
.star:nth-of-type(40) {
  animation-delay: -19s;
  top: 52vh;
  left: 23vw;
}
.star:nth-of-type(41) {
  animation-delay: -4s;
  top: 50vh;
  left: 29vw;
}
.star:nth-of-type(42) {
  animation-delay: -13s;
  top: 2vh;
  left: 47vw;
}
.star:nth-of-type(43) {
  animation-delay: -18s;
  top: 20vh;
  left: 96vw;
}
.star:nth-of-type(44) {
  animation-delay: -2s;
  top: 19vh;
  left: 27vw;
}
.star:nth-of-type(45) {
  animation-delay: -1s;
  top: 16vh;
  left: 81vw;
}
.star:nth-of-type(46) {
  animation-delay: -20s;
  top: 43vh;
  left: 95vw;
}
.star:nth-of-type(47) {
  animation-delay: -5s;
  top: 34vh;
  left: 9vw;
}
.star:nth-of-type(48) {
  animation-delay: -15s;
  top: 70vh;
  left: 96vw;
}
.star:nth-of-type(49) {
  animation-delay: -14s;
  top: 29vh;
  left: 14vw;
}
.star:nth-of-type(50) {
  animation-delay: -6s;
  top: 25vh;
  left: 82vw;
}
.star:nth-of-type(51) {
  animation-delay: -19s;
  top: 24vh;
  left: 27vw;
}
.star:nth-of-type(52) {
  animation-delay: -4s;
  top: 86vh;
  left: 24vw;
}
.star:nth-of-type(53) {
  animation-delay: -10s;
  top: 74vh;
  left: 33vw;
}
.star:nth-of-type(54) {
  animation-delay: -20s;
  top: 47vh;
  left: 4vw;
}
.star:nth-of-type(55) {
  animation-delay: -1s;
  top: 95vh;
  left: 56vw;
}
.star:nth-of-type(56) {
  animation-delay: -8s;
  top: 43vh;
  left: 35vw;
}
.star:nth-of-type(57) {
  animation-delay: -3s;
  top: 59vh;
  left: 99vw;
}
.star:nth-of-type(58) {
  animation-delay: -3s;
  top: 12vh;
  left: 79vw;
}
.star:nth-of-type(59) {
  animation-delay: -10s;
  top: 29vh;
  left: 72vw;
}
.star:nth-of-type(60) {
  animation-delay: -10s;
  top: 7vh;
  left: 60vw;
}
.star:nth-of-type(61) {
  animation-delay: -12s;
  top: 95vh;
  left: 17vw;
}
.star:nth-of-type(62) {
  animation-delay: -11s;
  top: 83vh;
  left: 17vw;
}
.star:nth-of-type(63) {
  animation-delay: -2s;
  top: 33vh;
  left: 15vw;
}
.star:nth-of-type(64) {
  animation-delay: -7s;
  top: 29vh;
  left: 86vw;
}
.star:nth-of-type(65) {
  animation-delay: -11s;
  top: 82vh;
  left: 14vw;
}
.star:nth-of-type(66) {
  animation-delay: -6s;
  top: 50vh;
  left: 39vw;
}
.star:nth-of-type(67) {
  animation-delay: -13s;
  top: 29vh;
  left: 86vw;
}
.star:nth-of-type(68) {
  animation-delay: -1s;
  top: 18vh;
  left: 12vw;
}
.star:nth-of-type(69) {
  animation-delay: -16s;
  top: 36vh;
  left: 40vw;
}
.star:nth-of-type(70) {
  animation-delay: -16s;
  top: 90vh;
  left: 37vw;
}
.star:nth-of-type(71) {
  animation-delay: -9s;
  top: 54vh;
  left: 24vw;
}
.star:nth-of-type(72) {
  animation-delay: -4s;
  top: 97vh;
  left: 29vw;
}
.star:nth-of-type(73) {
  animation-delay: -16s;
  top: 32vh;
  left: 39vw;
}
.star:nth-of-type(74) {
  animation-delay: -5s;
  top: 66vh;
  left: 81vw;
}
.star:nth-of-type(75) {
  animation-delay: -9s;
  top: 32vh;
  left: 28vw;
}
.star:nth-of-type(76) {
  animation-delay: -20s;
  top: 89vh;
  left: 36vw;
}
.star:nth-of-type(77) {
  animation-delay: -13s;
  top: 31vh;
  left: 5vw;
}
.star:nth-of-type(78) {
  animation-delay: -16s;
  top: 68vh;
  left: 5vw;
}
.star:nth-of-type(79) {
  animation-delay: -15s;
  top: 6vh;
  left: 15vw;
}
.star:nth-of-type(80) {
  animation-delay: -14s;
  top: 45vh;
  left: 2vw;
}
.star:nth-of-type(81) {
  animation-delay: -17s;
  top: 89vh;
  left: 6vw;
}
.star:nth-of-type(82) {
  animation-delay: -19s;
  top: 88vh;
  left: 66vw;
}
.star:nth-of-type(83) {
  animation-delay: -9s;
  top: 59vh;
  left: 16vw;
}
.star:nth-of-type(84) {
  animation-delay: -13s;
  top: 11vh;
  left: 3vw;
}
.star:nth-of-type(85) {
  animation-delay: -15s;
  top: 35vh;
  left: 46vw;
}
.star:nth-of-type(86) {
  animation-delay: -10s;
  top: 17vh;
  left: 16vw;
}
.star:nth-of-type(87) {
  animation-delay: -7s;
  top: 22vh;
  left: 9vw;
}
.star:nth-of-type(88) {
  animation-delay: -11s;
  top: 69vh;
  left: 84vw;
}
.star:nth-of-type(89) {
  animation-delay: -5s;
  top: 11vh;
  left: 39vw;
}
.star:nth-of-type(90) {
  animation-delay: -1s;
  top: 51vh;
  left: 99vw;
}
.star:nth-of-type(91) {
  animation-delay: -11s;
  top: 41vh;
  left: 4vw;
}
.star:nth-of-type(92) {
  animation-delay: -3s;
  top: 45vh;
  left: 7vw;
}
.star:nth-of-type(93) {
  animation-delay: -8s;
  top: 51vh;
  left: 29vw;
}
.star:nth-of-type(94) {
  animation-delay: -19s;
  top: 81vh;
  left: 8vw;
}
.star:nth-of-type(95) {
  animation-delay: -13s;
  top: 19vh;
  left: 73vw;
}
.star:nth-of-type(96) {
  animation-delay: -19s;
  top: 10vh;
  left: 72vw;
}
.star:nth-of-type(97) {
  animation-delay: -19s;
  top: 18vh;
  left: 56vw;
}
.star:nth-of-type(98) {
  animation-delay: -18s;
  top: 44vh;
  left: 76vw;
}
.star:nth-of-type(99) {
  animation-delay: -2s;
  top: 31vh;
  left: 16vw;
}
.star:nth-of-type(100) {
  animation-delay: -12s;
  top: 8vh;
  left: 63vw;
}
.star:nth-of-type(101) {
  animation-delay: -18s;
  top: 84vh;
  left: 88vw;
}
.star:nth-of-type(102) {
  animation-delay: -11s;
  top: 53vh;
  left: 77vw;
}
.star:nth-of-type(103) {
  animation-delay: -5s;
  top: 34vh;
  left: 18vw;
}
.star:nth-of-type(104) {
  animation-delay: -13s;
  top: 68vh;
  left: 44vw;
}
.star:nth-of-type(105) {
  animation-delay: -20s;
  top: 26vh;
  left: 30vw;
}
.star:nth-of-type(106) {
  animation-delay: -20s;
  top: 27vh;
  left: 35vw;
}
.star:nth-of-type(107) {
  animation-delay: -7s;
  top: 40vh;
  left: 5vw;
}
.star:nth-of-type(108) {
  animation-delay: -5s;
  top: 78vh;
  left: 95vw;
}
.star:nth-of-type(109) {
  animation-delay: -5s;
  top: 11vh;
  left: 37vw;
}
.star:nth-of-type(110) {
  animation-delay: -16s;
  top: 31vh;
  left: 24vw;
}
.star:nth-of-type(111) {
  animation-delay: -10s;
  top: 62vh;
  left: 77vw;
}
.star:nth-of-type(112) {
  animation-delay: -6s;
  top: 32vh;
  left: 36vw;
}
.star:nth-of-type(113) {
  animation-delay: -3s;
  top: 98vh;
  left: 37vw;
}
.star:nth-of-type(114) {
  animation-delay: -10s;
  top: 98vh;
  left: 40vw;
}
.star:nth-of-type(115) {
  animation-delay: -7s;
  top: 8vh;
  left: 83vw;
}
.star:nth-of-type(116) {
  animation-delay: -17s;
  top: 55vh;
  left: 32vw;
}
.star:nth-of-type(117) {
  animation-delay: -17s;
  top: 82vh;
  left: 62vw;
}
.star:nth-of-type(118) {
  animation-delay: -14s;
  top: 62vh;
  left: 49vw;
}
.star:nth-of-type(119) {
  animation-delay: -11s;
  top: 97vh;
  left: 83vw;
}
.star:nth-of-type(120) {
  animation-delay: -20s;
  top: 34vh;
  left: 57vw;
}
.star:nth-of-type(121) {
  animation-delay: -14s;
  top: 18vh;
  left: 75vw;
}
.star:nth-of-type(122) {
  animation-delay: -5s;
  top: 58vh;
  left: 18vw;
}
.star:nth-of-type(123) {
  animation-delay: -4s;
  top: 70vh;
  left: 13vw;
}
.star:nth-of-type(124) {
  animation-delay: -7s;
  top: 38vh;
  left: 32vw;
}
.star:nth-of-type(125) {
  animation-delay: -7s;
  top: 77vh;
  left: 14vw;
}
.star:nth-of-type(126) {
  animation-delay: -7s;
  top: 11vh;
  left: 2vw;
}
.star:nth-of-type(127) {
  animation-delay: -1s;
  top: 36vh;
  left: 84vw;
}
.star:nth-of-type(128) {
  animation-delay: -6s;
  top: 60vh;
  left: 10vw;
}
.star:nth-of-type(129) {
  animation-delay: -16s;
  top: 98vh;
  left: 44vw;
}
.star:nth-of-type(130) {
  animation-delay: -15s;
  top: 20vh;
  left: 46vw;
}
.star:nth-of-type(131) {
  animation-delay: -9s;
  top: 99vh;
  left: 41vw;
}
.star:nth-of-type(132) {
  animation-delay: -17s;
  top: 42vh;
  left: 58vw;
}
.star:nth-of-type(133) {
  animation-delay: -1s;
  top: 57vh;
  left: 95vw;
}
.star:nth-of-type(134) {
  animation-delay: -15s;
  top: 74vh;
  left: 62vw;
}
.star:nth-of-type(135) {
  animation-delay: -20s;
  top: 61vh;
  left: 17vw;
}
.star:nth-of-type(136) {
  animation-delay: -20s;
  top: 47vh;
  left: 82vw;
}
.star:nth-of-type(137) {
  animation-delay: -6s;
  top: 68vh;
  left: 40vw;
}
.star:nth-of-type(138) {
  animation-delay: -14s;
  top: 17vh;
  left: 1vw;
}
.star:nth-of-type(139) {
  animation-delay: -14s;
  top: 51vh;
  left: 17vw;
}
.star:nth-of-type(140) {
  animation-delay: -12s;
  top: 78vh;
  left: 69vw;
}
.star:nth-of-type(141) {
  animation-delay: -19s;
  top: 21vh;
  left: 74vw;
}
.star:nth-of-type(142) {
  animation-delay: -9s;
  top: 58vh;
  left: 11vw;
}
.star:nth-of-type(143) {
  animation-delay: -17s;
  top: 49vh;
  left: 15vw;
}
.star:nth-of-type(144) {
  animation-delay: -3s;
  top: 15vh;
  left: 92vw;
}
.star:nth-of-type(145) {
  animation-delay: -18s;
  top: 27vh;
  left: 77vw;
}
.star:nth-of-type(146) {
  animation-delay: -9s;
  top: 67vh;
  left: 84vw;
}
.star:nth-of-type(147) {
  animation-delay: -13s;
  top: 6vh;
  left: 57vw;
}
.star:nth-of-type(148) {
  animation-delay: -17s;
  top: 48vh;
  left: 96vw;
}
.star:nth-of-type(149) {
  animation-delay: -14s;
  top: 21vh;
  left: 17vw;
}
.star:nth-of-type(150) {
  animation-delay: -5s;
  top: 79vh;
  left: 48vw;
}
.star:nth-of-type(151) {
  animation-delay: -6s;
  top: 29vh;
  left: 91vw;
}
.star:nth-of-type(152) {
  animation-delay: -1s;
  top: 60vh;
  left: 59vw;
}
.star:nth-of-type(153) {
  animation-delay: -20s;
  top: 99vh;
  left: 63vw;
}
.star:nth-of-type(154) {
  animation-delay: -12s;
  top: 26vh;
  left: 35vw;
}
.star:nth-of-type(155) {
  animation-delay: -1s;
  top: 3vh;
  left: 25vw;
}
.star:nth-of-type(156) {
  animation-delay: -6s;
  top: 18vh;
  left: 83vw;
}
.star:nth-of-type(157) {
  animation-delay: -15s;
  top: 25vh;
  left: 17vw;
}
.star:nth-of-type(158) {
  animation-delay: -12s;
  top: 27vh;
  left: 81vw;
}
.star:nth-of-type(159) {
  animation-delay: -18s;
  top: 95vh;
  left: 84vw;
}
.star:nth-of-type(160) {
  animation-delay: -8s;
  top: 33vh;
  left: 80vw;
}
.star:nth-of-type(161) {
  animation-delay: -20s;
  top: 52vh;
  left: 26vw;
}
.star:nth-of-type(162) {
  animation-delay: -3s;
  top: 68vh;
  left: 80vw;
}
.star:nth-of-type(163) {
  animation-delay: -20s;
  top: 54vh;
  left: 90vw;
}
.star:nth-of-type(164) {
  animation-delay: -3s;
  top: 92vh;
  left: 68vw;
}
.star:nth-of-type(165) {
  animation-delay: -1s;
  top: 27vh;
  left: 37vw;
}
.star:nth-of-type(166) {
  animation-delay: -14s;
  top: 3vh;
  left: 31vw;
}
.star:nth-of-type(167) {
  animation-delay: -19s;
  top: 42vh;
  left: 92vw;
}
.star:nth-of-type(168) {
  animation-delay: -18s;
  top: 33vh;
  left: 30vw;
}
.star:nth-of-type(169) {
  animation-delay: -1s;
  top: 55vh;
  left: 32vw;
}
.star:nth-of-type(170) {
  animation-delay: -14s;
  top: 71vh;
  left: 5vw;
}
.star:nth-of-type(171) {
  animation-delay: -11s;
  top: 30vh;
  left: 15vw;
}
.star:nth-of-type(172) {
  animation-delay: -3s;
  top: 16vh;
  left: 12vw;
}
.star:nth-of-type(173) {
  animation-delay: -14s;
  top: 93vh;
  left: 90vw;
}
.star:nth-of-type(174) {
  animation-delay: -13s;
  top: 52vh;
  left: 25vw;
}
.star:nth-of-type(175) {
  animation-delay: -1s;
  top: 69vh;
  left: 72vw;
}
.star:nth-of-type(176) {
  animation-delay: -9s;
  top: 67vh;
  left: 51vw;
}
.star:nth-of-type(177) {
  animation-delay: -3s;
  top: 66vh;
  left: 98vw;
}
.star:nth-of-type(178) {
  animation-delay: -6s;
  top: 50vh;
  left: 32vw;
}
.star:nth-of-type(179) {
  animation-delay: -7s;
  top: 10vh;
  left: 70vw;
}
.star:nth-of-type(180) {
  animation-delay: -1s;
  top: 52vh;
  left: 85vw;
}
.star:nth-of-type(181) {
  animation-delay: -14s;
  top: 14vh;
  left: 90vw;
}
.star:nth-of-type(182) {
  animation-delay: -9s;
  top: 21vh;
  left: 59vw;
}
.star:nth-of-type(183) {
  animation-delay: -19s;
  top: 62vh;
  left: 72vw;
}
.star:nth-of-type(184) {
  animation-delay: -10s;
  top: 16vh;
  left: 36vw;
}
.star:nth-of-type(185) {
  animation-delay: -12s;
  top: 28vh;
  left: 53vw;
}
.star:nth-of-type(186) {
  animation-delay: -9s;
  top: 48vh;
  left: 85vw;
}
.star:nth-of-type(187) {
  animation-delay: -18s;
  top: 10vh;
  left: 54vw;
}
.star:nth-of-type(188) {
  animation-delay: -11s;
  top: 59vh;
  left: 61vw;
}
.star:nth-of-type(189) {
  animation-delay: -4s;
  top: 75vh;
  left: 58vw;
}
.star:nth-of-type(190) {
  animation-delay: -6s;
  top: 60vh;
  left: 90vw;
}
.star:nth-of-type(191) {
  animation-delay: -1s;
  top: 97vh;
  left: 80vw;
}
.star:nth-of-type(192) {
  animation-delay: -2s;
  top: 50vh;
  left: 2vw;
}
.star:nth-of-type(193) {
  animation-delay: -4s;
  top: 7vh;
  left: 65vw;
}
.star:nth-of-type(194) {
  animation-delay: -17s;
  top: 30vh;
  left: 30vw;
}
.star:nth-of-type(195) {
  animation-delay: -15s;
  top: 21vh;
  left: 77vw;
}
.star:nth-of-type(196) {
  animation-delay: -1s;
  top: 78vh;
  left: 82vw;
}
.star:nth-of-type(197) {
  animation-delay: -8s;
  top: 11vh;
  left: 4vw;
}
.star:nth-of-type(198) {
  animation-delay: -4s;
  top: 28vh;
  left: 5vw;
}
.star:nth-of-type(199) {
  animation-delay: -13s;
  top: 74vh;
  left: 37vw;
}
.star:nth-of-type(200) {
  animation-delay: -18s;
  top: 69vh;
  left: 17vw;
}

@keyframes eclipse {
  from {
    transform: translateX(-45vh);
  }
  to {
    transform: translateX(45vh);
  }
}
@keyframes twinkle {
  5% {
    opacity: 1;
  }
  15% {
    opacity: 0.3;
  }
  68% {
    opacity: 0.3;
  }
  74% {
    opacity: 1;
  }
  78% {
    opacity: 0.3;
  }
}