body {
  margin: 0;
  overflow: hidden;
  font-family: "Arial", sans-serif;
  color: White;
  text-align: center;
  background: radial-gradient(
    circle at center,
    rgba(10, 10, 40, 1),
    /* Dark cosmic blue */ rgba(0, 0, 20, 1),
    /* Deep space blackish-blue */ rgba(0, 0, 0, 1)
      /* Black for deep space effect */
  );
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1; /*Push canvas behind the content*/
}

/* Constellation */
#constellation {
  position: relative;
  transform-origin: center center; /* Scale from the center */
  transform: scale(1); /* Default scale for larger screens */
  width: 100vw;
  height: 100vh;
}

/* Responsiveness for smaller screens */
@media screen and (max-width: 1200px) {
  #constellation {
    transform: scale(0.9);
  }
}

@media screen and (max-width: 900px) {
  #constellation {
    transform: scale(0.75);
  }
}

@media screen and (max-width: 600px) {
  #constellation {
    transform: scale(0.6);
  }
}

.navStars {
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 77%;
  left: -34%;
  font-size: 1.5rem;
}
.starHover {
  border-radius: 50%;
  z-index: 1;
  text-shadow: 0 0 4px rgba(255, 255, 255, 1);
  transition: 0.4s ease;
}
.stars {
  width: 20px;
  height: 20px;
  background-color: transparent;
}
.navStars:nth-of-type(2) {
  font-size: 1rem;
  top: 42%;
  left: -18%;
}
.navStars:nth-of-type(3) {
  font-size: 1rem;
  top: 60%;
  left: -14%;
}
.navStars:nth-of-type(4) {
  font-size: 1.1rem;
  top: 23%;
  left: 20%;
}
.navStars:nth-of-type(5) {
  font-size: 1.3rem;
  top: 28%;
  left: 28%;
}
.navStars:nth-of-type(6) {
  top: 50%;
  left: 31%;
}
.navStars:nth-of-type(7) {
  font-size: 1.3rem;
  top: -12.5%;
  left: 19.5%;
}
.navStars:nth-of-type(8) {
  font-size: 1.3rem;
  top: -32%;
  left: 29%;
}
.navStars:nth-of-type(9) {
  font-size: 1.6rem;
  top: -28%;
  left: 33%;
}
.starHover i {
  color: inherit;
  background-color: inherit;
  text-shadow: inherit;
}

#zosma:hover,
#chertan:hover {
  transform: scale(1.5);
  cursor: pointer;
  text-shadow: 0 0 20px rgba(255, 255, 255, 1);
}
#denebola:hover {
  transform: scale(1.2);
  cursor: pointer;
  text-shadow: 0 0 20px rgba(255, 255, 255, 1);
}

#algieba:hover {
  transform: scale(1.4);
  cursor: pointer;
  text-shadow: 0 0 20px yellow;
  color: gold;
}
#eta:hover {
  transform: scale(1.3);
  cursor: pointer;
  text-shadow: 0 0 20px blue;
  color: rgb(85, 21, 224);
}
#regulus:hover {
  transform: scale(1.2);
  cursor: pointer;
  text-shadow: 0 0 20px skyblue;
  color: skyblue;
}
#adhafera:hover {
  transform: scale(1.3);
  cursor: pointer;
  text-shadow: 0 0 20px rgb(223, 223, 140);
  color: rgb(228, 228, 141);
}
#rasalas:hover {
  transform: scale(1.3);
  cursor: pointer;
  text-shadow: 0 0 20px orange;
  color: orange;
}
#algenubi:hover {
  transform: scale(1.2);
  cursor: pointer;
  text-shadow: 0 0 20px #ffdf00;
  color: #ffdf00;
}
/* Active styles (on click) */
#zosma:active {
  transform: scale(1.4);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.501);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.501);
}

#chertan:active {
  transform: scale(1.4); /* Slightly smaller on click */
  color: rgba(255, 255, 255, 0.501);
  cursor: pointer;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.501);
}

#denebola:active {
  transform: scale(1.1); /* Slightly smaller scale for active */
  cursor: pointer;
  color: rgba(255, 255, 255, 0.501);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.501);
}

#algieba:active {
  transform: scale(1.3); /* Slightly larger on active */
  cursor: pointer;
  text-shadow: 0 0 30px rgba(255, 255, 0, 0.501);
  color: rgba(255, 217, 0, 0.501);
}

#eta:active {
  transform: scale(1.2); /* Slightly smaller scale on active */
  cursor: pointer;
  text-shadow: 0 0 30px rgba(0, 0, 255, 0.501);
  color: rgba(85, 21, 224, 0.501);
}

#regulus:active {
  transform: scale(1.1); /* Slightly smaller scale on active */
  cursor: pointer;
  text-shadow: 0 0 30px rgba(135, 207, 235, 0.501);
  color: rgba(135, 207, 235, 0.501);
}

#adhafera:active {
  transform: scale(1.2); /* Slightly larger on active */
  cursor: pointer;
  text-shadow: 0 0 30px rgba(223, 223, 140, 0.501);
  color: rgba(228, 228, 141, 0.501);
}

#rasalas:active {
  transform: scale(1.2); /* Slightly smaller scale on active */
  cursor: pointer;
  text-shadow: 0 0 30px rgba(255, 166, 0, 0.501);
  color: rgba(255, 166, 0, 0.501);
}

#algenubi:active {
  transform: scale(1.1); /* Slightly smaller scale on active */
  cursor: pointer;
  text-shadow: 0 0 30px #ffdd0084;
  color: #ffdd0084;
}
/*Planet Navigation*/
#planetNav {
  position: fixed;
  top: 100px;
  left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
}

#starLinks {
  margin-top: 12px;
  box-shadow: 0 0 8px rgba(143, 143, 143, 0.865);
  background-color: rgba(62, 63, 63, 0.24);
  border-radius: 50px;
  height: 605px;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
  animation: sideBar 1s linear;
  align-items: center;
  transform-origin: 100px 20px;
}
@keyframes sideBar {
  from {
    transform: scaleY(0%);
  }
  to {
    transform: scaleY(100%);
  }
}
#planetContainer {
  position: fixed;
  top: 10px;
  left: 20px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  transition: 0.2s ease;
}
.hidden {
  display: none;
}
.show {
  display: flex;
}

/*SIDE BAR*/
.navStar {
  color: lavender;
  text-shadow: 0 0 rgb(255, 255, 255, 0.5);
  font-size: 1.2rem;
  animation: sideBar 1.5s ease;
}
.navStar:hover {
  transition: 0.2s ease;
  transform: scale(1.15);
  cursor: pointer;
}

#zosmaN:hover,
#chertanN:hover {
  text-shadow: 0 0 20px rgba(255, 255, 255, 1);
}
#denebolaN:hover {
  text-shadow: 0 0 20px rgba(255, 255, 255, 1);
}

#algiebaN:hover {
  text-shadow: 0 0 20px yellow;
  color: gold;
}
#etaN:hover {
  text-shadow: 0 0 20px blue;
  color: rgb(85, 21, 224);
}
#regulusN:hover {
  text-shadow: 0 0 20px skyblue;
  color: skyblue;
}
#adhaferaN:hover {
  text-shadow: 0 0 20px rgb(223, 223, 140);
  color: rgb(228, 228, 141);
}
#rasalasN:hover {
  text-shadow: 0 0 20px orange;
  color: orange;
}
#algenubiN:hover {
  text-shadow: 0 0 20px #ffdf00;
  color: #ffdf00;
}
/* Active styles (on click) */
#zosmaN:active {
  color: rgba(255, 255, 255, 0.501);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.501);
}

#chertanN:active {
  color: rgba(255, 255, 255, 0.501);

  text-shadow: 0 0 30px rgba(255, 255, 255, 0.501);
}

#denebolaN:active {
  color: rgba(255, 255, 255, 0.501);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.501);
}

#algiebaN:active {
  text-shadow: 0 0 30px rgba(255, 255, 0, 0.501);
  color: rgba(255, 217, 0, 0.501);
}

#etaN:active {
  text-shadow: 0 0 30px rgba(0, 0, 255, 0.501);
  color: rgba(85, 21, 224, 0.501);
}

#regulusN:active {
  text-shadow: 0 0 30px rgba(135, 207, 235, 0.501);
  color: rgba(135, 207, 235, 0.501);
}

#adhaferaN:active {
  text-shadow: 0 0 30px rgba(223, 223, 140, 0.501);
  color: rgba(228, 228, 141, 0.501);
}

#rasalasN:active {
  text-shadow: 0 0 30px rgba(255, 166, 0, 0.501);
  color: rgba(255, 166, 0, 0.501);
}

#algenubiN:active {
  text-shadow: 0 0 30px #ffdd0084;
  color: #ffdd0084;
}
#planetContainer:hover {
  transform: scale(1.35);
  transition: 0.2s ease;
}
#planetContainer:active {
  transform: scale(1);
  transition: 0.2s ease-out;
}