* {
  font-family: Arial, Helvetica, sans-serif;
}

html,
body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #fff;
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

main {
  margin: auto;
  width: 50%;
  padding: 20px;
}

main > h1 {
  text-align: center;
  font-size: 3.5em;
}

#stars,
#stars2,
#stars3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

#blob {
  background-color: white;
  height: 34vmax;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(to right, aquamarine, mediumpurple);
  animation: rotate 20s infinite;
  opacity: 0.8;
}

#blur {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
  backdrop-filter: blur(12vmax);
}

#stars {
  width: 1px;
  height: 1px;
  box-shadow: 293px 487px #fff, 1287px 774px #fff, 890px 1360px #fff,
    1333px 1529px #fff, 1810px 1742px #fff, 719px 442px #fff, 1325px 1299px #fff,
    1636px 1939px #fff, 885px 1572px #fff;
  animation: animStar 50s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 293px 487px #fff, 1287px 774px #fff, 890px 1360px #fff,
    1333px 1529px #fff, 1810px 1742px #fff, 719px 442px #fff, 1325px 1299px #fff,
    1636px 1939px #fff, 885px 1572px #fff;
}

#stars2 {
  width: 2px;
  height: 2px;
  box-shadow: 432px 923px #fff, 679px 1612px #fff, 237px 1404px #fff,
    1228px 1992px #fff, 765px 1093px #fff, 1416px 313px #fff, 113px 1752px #fff,
    1605px 988px #fff, 1939px 1170px #fff;
  animation: animStar 100s linear infinite;
}

#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 432px 923px #fff, 679px 1612px #fff, 237px 1404px #fff,
    1228px 1992px #fff, 765px 1093px #fff, 1416px 313px #fff, 113px 1752px #fff,
    1605px 988px #fff, 1939px 1170px #fff;
}

#stars3 {
  width: 3px;
  height: 3px;
  box-shadow: 1254px 130px #fff, 876px 1434px #fff, 1423px 536px #fff,
    734px 1514px #fff, 1390px 1538px #fff, 329px 1803px #fff, 493px 1220px #fff,
    1006px 1938px #fff, 1927px 160px #fff;
  animation: animStar 150s linear infinite;
}

#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 1254px 130px #fff, 876px 1434px #fff, 1423px 536px #fff,
    734px 1514px #fff, 1390px 1538px #fff, 329px 1803px #fff, 493px 1220px #fff,
    1006px 1938px #fff, 1927px 160px #fff;
}

#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  margin-top: -60px;
  padding-left: 10px;
}

#title span {
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}