body {
  color: white;
  font-family: NickFont;
  flex-direction: column;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  background-image: url("./images/starsbg.gif");
  background-repeat: repeat;
  image-rendering: pixelated;
  background-size: 600px 600px;
  animation: starMove 80s linear infinite, starZoom 10s ease-in-out infinite alternate;
}

@keyframes starMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2048px 0;
  }
}

@keyframes starZoom {
  0% {
    background-size: 600px 600px;
  }
  100% {
    background-size: 700px 700px;
  }
}

.earth-container {
  position: relative;
  width: 315px;
  height: 355px;
}

.glow {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.glow.radial {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 100, 0.7) 0%,
    rgba(255, 255, 100, 0.1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

.glow.star {
  width: 160px;
  height: 160px;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 100, 1) 0deg 15deg,
    transparent 15deg 30deg,
    rgba(255, 255, 100, 1) 30deg 45deg,
    transparent 45deg 60deg,
    rgba(255, 255, 100, 1) 60deg 75deg,
    transparent 75deg 90deg,
    rgba(255, 255, 100, 1) 90deg 105deg,
    transparent 105deg 120deg,
    rgba(255, 255, 100, 1) 120deg 135deg,
    transparent 135deg 150deg,
    rgba(255, 255, 100, 1) 150deg 165deg,
    transparent 165deg 180deg,
    rgba(255, 255, 100, 1) 180deg 195deg,
    transparent 195deg 210deg,
    rgba(255, 255, 100, 1) 210deg 225deg,
    transparent 225deg 240deg,
    rgba(255, 255, 100, 1) 240deg 255deg,
    transparent 255deg 270deg,
    rgba(255, 255, 100, 1) 270deg 285deg,
    transparent 285deg 300deg,
    rgba(255, 255, 100, 1) 300deg 315deg,
    transparent 315deg 330deg,
    rgba(255, 255, 100, 1) 330deg 345deg,
    transparent 345deg 360deg
  );
  border-radius: 50%;
  mix-blend-mode: screen;
}

.glow.active {
  opacity: 1;
  animation: pulse 1.6s ease-in-out infinite, spin 6s linear infinite;
}

.glow.fade-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: none;
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.earth-layer {
  position: absolute;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.outline {
  z-index: 0;
  top: 0;
  left: 0;
}

.base {
  z-index: 1;
  top: 80px;
  left: 15px;
}

.na-button, .sa-button, .cross {
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  transform-origin: center;
}

.na-button {
  top: 116px;
  left: 17px;
}

.sa-button {
  top: 198px;
  left: 16px;
}

.cross {
  top: 14px;
  left: 123px;
}

.na-button:hover,
.sa-button:hover,
.cross:hover {
  transform: scale(1.2);
  z-index: 3;
}

.earth-text {
  margin-top: 25px;
  font-size: 2.3em;
  text-shadow: 0 0 10px rgba(255, 255, 100, 0.5);
  transition: opacity 0.3s ease;
}

.vistawin {
  image-rendering: pixelated;
  border-image-source: url('./images/shegonebudvistawindow9slicefull.png');
  border-image-slice: 11 11 11 11 fill;
  border-image-width: 50px;
  border-image-repeat: repeat;
  width: 100%;
  color: black;
  
  text-align: center;
}

@font-face {
  font-family: NickFont;
  src: url('./images/NicksFlashFont-Regular.ttf');
}

#a1{
  image-rendering: smooth;
  position: relative;
  top: 30%;
  left: -25%;
  rotate: 28deg;
  width: 35%;
}

#a2{
  image-rendering: smooth;
  position: fixed;
  top: 50%;
  left: 25%;
  rotate: 0deg;
  width: 10%;
}

#a3{
  image-rendering: smooth;
  position: fixed;
  top: 20%;
  left: 55%;
  rotate: 175deg;
  width: 10%;
}