:root {
  --size: 110vh;
  --s: calc(var(--size) / 300);
  --bor: calc(var(--size) / 30);
  --boxShadow: calc(var(--size) / 12);
}
main {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
}

.starField {
  position: absolute;
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.cloud {
  height: 275px;
  border-radius: 50%;
  position: absolute;
  filter: url(#filter-mid);
  animation: glow 6s infinite;
  z-index: 2;
}

.stars {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  z-index: 3;
}

.emptyStar {
  position: absolute;
  box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.1),
    0 0 4px 4px rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 255, 255, 0.65);
  z-index: 4;
}
.navStar {
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute;
  background-color: rgb(255, 240, 34);
  box-shadow: 0px 0px 8px 8px rgba(255, 255, 255, 0.1),
    0 0 12px 12px rgba(255, 255, 255, 0.1);
  z-index: 5;
}

.navStarHasArrive-white {
  filter: url(#wavy) blur(1px);
}
.navStarHasArrive-white:before {
  content: "";
  position: absolute;
  top: var(--s);
  left: var(--s);
  right: var(--s);
  bottom: var(--s);
  border-radius: 50%;
  box-shadow: 0 0 var(--boxShadow) #fff, inset 0 0 var(--boxShadow) #fff;
}

.navStarHasArrive-blue {
  filter: url(#wavy) blur(1px);
}
.navStarHasArrive-blue:before {
  content: "";
  position: absolute;
  top: var(--s);
  left: var(--s);
  right: var(--s);
  bottom: var(--s);
  border-radius: 50%;
  box-shadow: 0 0 var(--boxShadow) #63a4ff, inset 0 0 var(--boxShadow) #63a4ff;
}

.navStarHasArrive-green {
  filter: url(#wavy) blur(1px);
}
.navStarHasArrive-green:before {
  content: "";
  position: absolute;
  top: var(--s);
  left: var(--s);
  right: var(--s);
  bottom: var(--s);
  border-radius: 50%;
  box-shadow: 0 0 var(--boxShadow) #00b712, inset 0 0 var(--boxShadow) #00b712;
}

.navStarHasArrive-orange {
  filter: url(#wavy) blur(1px);
}
.navStarHasArrive-orange:before {
  content: "";
  position: absolute;
  top: var(--s);
  left: var(--s);
  right: var(--s);
  bottom: var(--s);
  border-radius: 50%;
  box-shadow: 0 0 var(--boxShadow) #fbb034, inset 0 0 var(--boxShadow) #fbb034;
}

@keyframes glow {
  0% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.55;
  }
  100% {
    opacity: 0.35;
  }
}

@keyframes glowingStars {
  50% {
    opacity: 1;
  }
}