body { margin: 0;
  overflow: hidden; 
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
}

  canvas { display: block; 
}
    
  #labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}

  .planet-label {
  position: absolute;
  color: white;
  margin-left: 5px;
  font-size: 10px;
  pointer-events: none;
  transform: translate(10px, -50%); /* Center the label */
  z-index: 1;
}

  .solarsys {
  position:absolute;
  font: white;
  font-size: 50px;
  margin-left: 10px;
}

 .title {   
  position: absolute;
  opacity: 0.8;
  top: 5px;
  left: 17%;
  transform: translateX(-50%);
  font-size: 50px;
  color: white;
  z-index: 10;
  text-align: center;
  user-select: none;
}


.semititle {
  position: absolute;
  opacity: 0.8;
  top: 160px; /* slightly lower than the title */
  left: 17%;
  transform: translateX(-50%);
  font-size: 25px;
  color: white;
  z-index: 10;
  text-align: center;
  user-select: none;
}

.semititle1 {
  position: absolute;
  opacity: 0.8;
  bottom: 415px; /* slightly lower than the title */
  left:17%;
  transform: translateX(-50%);
  font-size: 21px;
  color: white;
  z-index: 10;
  text-align: center;
  user-select: none;
}

#threeCanvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.9;
}

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px 20px;
  z-index: 1000;
  display: flex;
  gap: 20px;
  opacity: 0.9;
  user-select: none;
}