html, body, #cesiumContainer {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}

/* BACKGROUND */

.auroraWrapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
  background: #181818;
}

@keyframes fly {
  100% { 
      transform: rotate(1turn) translate(100px) rotate(-1turn); 
  }
}

@keyframes flyPlus {
  100% { 
      transform: rotate(-1turn) translate(100px) rotate(1turn); 
  }
}

@keyframes auroraFlow {
  0%   { 
      transform: translateY(0) translateX(0) scaleX(1); 
      opacity: 0.4; 
  }
  50%  { 
      transform: translateY(-80px) translateX(20px) scaleX(1.1); 
      opacity: 0.8; 
  }
  100% { 
      transform: translateY(0) translateX(0) scaleX(1); 
      opacity: 0.4; 
  }
}

.base {
  position: absolute;
  filter: blur(80px);
  opacity: 0.5;
  border-radius: 50%;
  width: 500px;
  height: 700px;
  background: linear-gradient(180deg, rgba(0, 255, 180, 0.9), rgba(0,128,128,0));
  animation: auroraFlow 9s ease-in-out infinite alternate;
}

.one   { 
  left: 5%;   
  top: 10%;  
  width: 450px; 
  height: 650px; 
  animation-delay: 0s; 
  background: linear-gradient(180deg, rgba(0, 255, 200, 0.9), rgba(0,128,128,0)); 
}

.two   { 
  left: 15%;  
  top: 20%; 
  width: 500px; 
  height: 700px; 
  animation-delay: 1s; 
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.938), rgba(0,128,128,0)); 
}

.three { 
  left: 25%;  
  top: 15%; 
  width: 480px; 
  height: 720px; 
  animation-delay: 2s; 
  background: linear-gradient(180deg, rgba(0, 200, 255, 0.8), rgba(0,128,128,0)); 
}

.four  { 
  left: 35%;  
  top: 5%;  
  width: 520px; 
  height: 680px; 
  animation-delay: 3s; 
  background: linear-gradient(180deg, rgba(115, 238, 195, 0.972), rgba(0,128,128,0)); 
}

.five  { 
  left: 45%;  
  top: 25%; 
  width: 500px; 
  height: 720px; 
  animation-delay: 4s; 
  background: linear-gradient(180deg, rgba(235, 255, 247, 0.8), rgba(0,128,128,0)); 
}

.six   { 
  left: 55%;  
  top: 10%; 
  width: 470px; 
  height: 700px; 
  animation-delay: 5s; 
  background: linear-gradient(180deg, rgba(232, 255, 249, 0.85), rgba(0,128,128,0)); 
}

.seven { 
  left: 65%;  
  top: 20%; 
  width: 510px; 
  height: 680px; 
  animation-delay: 6s; 
  background: linear-gradient(180deg, rgba(0, 255, 221, 0.945), rgba(0,128,128,0)); 
}

.eight { 
  left: 75%;  
  top: 15%; 
  width: 480px; 
  height: 700px; 
  animation-delay: 7s; 
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.972), rgba(0,128,128,0)); 
}

.nine  { 
  left: 85%;  
  top: 5%;  
  width: 500px; 
  height: 720px; 
  animation-delay: 8s; 
  background: linear-gradient(180deg, rgba(133, 228, 133, 0.9), rgba(0,128,128,0)); 
}

.ten   { 
  left: 90%;  
  top: 25%; 
  width: 520px; 
  height: 700px; 
  animation-delay: 6s; 
  background: linear-gradient(180deg, rgba(100, 255, 255, 0.8), rgba(0,128,128,0)); 
}


.stars {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  border-radius: 50%;
  filter: blur(0.8px);
  box-shadow:
    42px 56px white, 130px 240px white, 250px 70px white, 320px 180px white,
    480px 220px white, 550px 150px white, 700px 300px white, 810px 100px white,
    950px 350px white, 1200px 200px white, 1340px 400px white, 1450px 50px white,
    1570px 180px white, 1700px 300px white, 1820px 120px white;
}
.stars::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: white;
  border-radius: 50%;
  filter: blur(0.8px);
  box-shadow: inherit;
  transform: translateY(-100vh);
}

.stars2 {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  filter: blur(1px);
  box-shadow:
    50px 400px white, 150px 100px white, 280px 300px white, 350px 50px white,
    520px 180px white, 640px 400px white, 750px 130px white, 890px 250px white,
    1020px 370px white, 1160px 140px white, 1300px 60px white, 1420px 320px white;
}
.stars2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  filter: blur(1px);
  box-shadow: inherit;
  transform: translateY(-100vh);
}

.stars3 {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  filter: blur(1.2px);
  box-shadow:
    90px 200px white, 200px 60px white, 400px 250px white, 580px 80px white,
    770px 300px white, 900px 150px white, 1100px 50px white, 1250px 280px white;
}
.stars3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  filter: blur(1.2px);
  box-shadow: inherit;
  transform: translateY(-100vh);
}


/* CESIUM GENERAL */

.credit {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 15px;
}

.cesium-credit-wrapper img {
  display: none !important;
}

/* Popup styling */
.cesium-popup {
  position: absolute;
  background: rgba(255, 255, 255, 0.65);
  color: #000000;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.4;
  max-width: 60vw;
  width:300px;
  z-index: 1000;
  backdrop-filter: blur(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}

/* Hidden state */
.cesium-popup.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.cesium-popup.above::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255, 255, 255, 0.85);
  z-index:-1!important;
}

.cesium-popup.below::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(255, 255, 255, 0.85);
  z-index: -1 !important;;
}

/* Close button */
.cesium-popup .close-btn {
  float: right;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  margin-left: 8px;
  color: #aaa;
  transition: color 0.2s ease;
}

.cesium-popup .close-btn:hover {
  color: #000000;
}


.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  border-radius: 8px;
  z-index: 99999 !important;
}