html, body {
  margin: 0;
  padding: 0;
  
}
a {
  text-decoration: none;
  color: inherit; /* prevents default blue links globally */
}
.popup a:visited {
  color: #fff;
}

h2 {
  color: rgb(212, 212, 215);
  font-size: 24px;
  text-align: center;
  text-decoration: none;
}

h2 a,
h2 a:visited,
h2 a:hover,
h2 a:active {
  color: inherit;
  text-decoration: none;
}
#legend h3 {
  font-family: "Host Grotesk", sans-serif;
  font-weight: light;
  color: rgba(255, 255, 255, 0.862);
  font-size: 20px;
  text-align: center;
  margin: 10px 0;
}
.loader-wrapper {
  position: fixed;
  inset: 0;
  background: #000; 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden; /* Disables background scrolling */
}

/* STAR */
.star-loader {
  width: 320px;
}

.star-bg {
  fill: #111;
  stroke: #000000;
  stroke-width: 2;
}

.progress-fill {
  fill: rgb(100, 148, 185);
  transition: y 0.2s ease;
}

.popup button {
  background: hsl(0, 0%, 0%);
  color: #fff;
  border: none;
  padding: 10px 10px;
  cursor: pointer;
    font-family: "Host Grotesk", sans-serif;
    font-size: large;
    
}

.progress-text {
  position: absolute;
  color: white;
  font-family: "Host Grotesk", sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin-top: 10px;
}

body {
  font-size: x-large;
  font-family: "Host Grotesk", sans-serif;
  opacity: '50%';
   background-color: #000000;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
   height: 100;
   cursor: grabbing;  
   overflow: hidden; /* Disables background scrolling */
}

canvas {
  display: block;
}

.message {
  color: rgba(255, 255, 255, 0.862);
  block-size: 80px;
  position: absolute;
  bottom: 30px;
  left: 50%;
 transform: translateX(-50%);
 padding: 20px 20px;
 background-color: #000000;
 font-size: 130%;
 border-radius: 5px;
 width: 100%;
 display: none;
 width: 90%;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  max-width: 1500px;
  background: #000000;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;
  visibility: hidden; 
  overflow: hidden; /* Disables background scrolling */
}




.close-btn {
  position: absolute;
  top: 18px;
  right: 19px;
  background: transparent;
  border: none;
  color: rgb(118, 118, 118);
  font-size: 40px;
  cursor: pointer;

 
}

#starClose {
  position: absolute;
  font-size: 45px;
  color: rgb(118, 118, 118);
  transform: scale(1.2);
  font-family: "Host Grotesk", sans-serif;
}

#starClose:hover {
  color: rgb(185, 185, 185);
  transform: scale(1.2);
  
}
#popup .close-btn {
  position: absolute;
  top: -22px;
  right: 5px;
  background: transparent;
  color: rgb(118, 118, 118);
  font-size: 32px;
}

#popup .close-btn:hover {
  color: rgb(185, 185, 185);
  transform: scale(1.2);
  overflow: hidden; /* Disables background scrolling */
}


  #celestial-map {
  width: 100%;
  size: 500px;
  height: 900px;
  background: url('https://cdn.pixabay.com/photo/2016/11/21/15/06/star-1840580_1280.jpg') center/cover;
  border-radius: 1px;
  display:-moz-inline-stack;
  position: relative;
  overflow: hidden; /* Disables background scrolling */
  
  #celestial-zoomin, 
#celestial-zoomout { width:32px; height:32px; left:838px; bottom:0px; background: rgba(255,255,255,0.5); border:1px solid #000; border-radius:3px; position:absolute; font: normal bold 24px/1 Consolas, Courier, 'Courier New', monospace; cursor:pointer; }
#celestial-zoomout {width:32px; height:32px; left:808px; bottom:0px; background: rgba(255,255,255,0.5); border:1px solid #000; border-radius:3px; position:absolute; font: normal bold 24px/1 Consolas, Courier, 'Courier New', monospace; cursor:pointer; }
#celestial-zoomin:hover, 
#celestial-zoomout:hover { background: rgba(255,255,255,0.7); }
#celestial-zoomin:disabled, 
#celestial-zoomout:disabled { background: rgba(255,255,255,0.0); border:1px solid rgba(153,153,153,0.7); color:rgba(153,153,153,0.7); cursor:default; }
}

.grabbable:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.side-label {
  position: fixed;
  right: 0;
  padding-left: 800px;
  bottom: 0;
  height: 190vh;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  cursor: pointer;  
  text-decoration: none;
  overflow: hidden; /* Disables background scrolling */
  
}

.side-label:hover {
  color: rgb(118, 118, 118);
  overflow: hidden; /* Disables background scrolling */
}

#starPopup {
    color: rgba(255, 255, 255, 0.862);
text-align: left;
text-decoration: none;
overflow: hidden; /* Disables background scrolling */

}
.starPopup:hover {
  color: rgb(118, 118, 118);
  transform: scale(1.2);
  overflow: hidden; /* Disables background scrolling */

}




/* Rotated text */
.side-label span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Host Grotesk", sans-serif;
  font-size: 40px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.637);
    pointer-events: auto;
    cursor: pointer;  
    text-decoration: none;
    overflow: hidden; /* Disables background scrolling */
}

.side-label span:hover {
  color: rgb(118, 118, 118);
  overflow: hidden; /* Disables background scrolling */
}


.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 800;
  overflow: hidden; /* Disables background scrolling */
}


.popup.hidden {
  visibility: hidden;
  pointer-events: none;
  overflow: hidden; /* Disables background scrolling */
}