/* Space-themed "Ad Space" Button */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap");

.space-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9rem;
  overflow: hidden;
  height: 2.5rem;
  background-size: 300% 300%;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 3px transparent;
  background-image: linear-gradient(#161a25, #161a25),
    linear-gradient(
      137.48deg,
      #f5434f 10%,
      #631e29 45%,
      #000000 67%,
      #161a25 87%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-family: "Orbitron", sans-serif;
  text-decoration: none;
  position: relative;
  z-index: 10;
}

.space-btn-container {
  position: relative;
  display: inline-block;
}

#container-stars {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  top: 0;
  left: 0;
  pointer-events: none;
}

.space-btn strong {
  position: relative;
  z-index: 10;
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 0 4px white;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

#glow {
  position: absolute;
  display: flex;
  width: 9rem;
  height: 2.5rem;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}

.circle-container {
  position: relative;
  width: 100%;
  height: 100%;
  animation: orbit 5s linear infinite;
}

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  filter: blur(1.5rem);
}

.circle:nth-of-type(1) {
  background: rgba(245, 67, 79, 0.636);
  animation: orbit 8s linear infinite;
}

.circle:nth-of-type(2) {
  background: rgba(99, 30, 41, 0.704);
  animation: orbit 10s linear infinite;
}

.space-btn:hover #container-stars {
  z-index: 1;
  background-color: rgba(22, 26, 37, 0.8);
}

.space-btn:hover {
  transform: scale(1.05);
}

.space-btn:hover strong {
  z-index: 15;
  text-shadow: 0 0 8px white;
}

.space-btn:active {
  border: double 3px #631e29;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.space-btn:active .circle {
  background: #631e29;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(60px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(60px) rotate(-360deg);
  }
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
  pointer-events: none;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}

@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .space-btn {
    width: 8rem;
    height: 2.2rem;
  }
  
  .space-btn strong {
    font-size: 9px;
    letter-spacing: 1px;
  }
  
  #glow {
    width: 8rem;
    height: 2.2rem;
  }
  
  /* Mobile alignment fix */
  .space-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
  }
  
  .nav-links .space-btn-container {
    margin: 0;
    text-align: center;
  }
}

/* Integration with existing nav styles */
.nav-links .space-btn-container {
  margin-left: 1rem;
}

.nav-links .space-btn:hover {
  color: #ffffff;
}

/* Additional mobile nav alignment - stronger specificity */
@media (max-width: 768px) {
  .nav-links li {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  
  .nav-links .space-btn-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem 0 !important;
  }
  
  /* Ensure the mobile menu appears properly */
  .nav-links {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background-color: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    display: none !important;
    flex-direction: column !important;
    z-index: 1000 !important;
  }
  
  body.menu-active .nav-links {
    display: flex !important;
  }
  
  .menu-toggle {
    display: flex !important;
    position: relative !important;
    z-index: 1001 !important;
  }
  
  .header .nav {
    position: relative !important;
  }
  
  /* Fix viewport issues */
  html {
    overflow-x: hidden !important;
  }
  
  body {
    overflow-x: hidden !important;
  }
}