html, body {
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, a, p {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.hacker-text {
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: #1aff00;
}

.starry-background {
  background: radial-gradient(ellipse at bottom, #14375c 0%, #000000 100%);
  width: 100vw;
  height: 100vh;
  position: relative;
  /*overflow: hidden;*/
}

/* Star layers container */
.stars-layer {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: -1;
}

/* Generic star styling */
.stars-layer::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  top: 0;
  left: 0;
  box-shadow: /* overridden in each layer */;
  opacity: 1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Star layers with distinct stars, twinkle speeds, and drifting */

/* Layer 1 */
.stars1::after {
  animation-name: twinkle1, drift1;
  animation-duration: 2.2s, 90s;
  box-shadow:
    1vw 10vh white, 3vw 45vh white, 10vw 80vh white, 15vw 55vh white,
    18vw 90vh white, 21vw 73vh white, 26vw 50vh white, 30vw 60vh white,
    34vw 85vh white, 38vw 70vh white, 42vw 17vh white, 46vw 90vh white,
    50vw 95vh white, 54vw 70vh white, 58vw 80vh white, 62vw 90vh white,
    66vw 85vh white, 70vw 75vh white, 74vw 40vh white, 78vw 95vh white,
    82vw 70vh white, 86vw 50vh white, 90vw 80vh white, 94vw 60vh white,
    98vw 40vh white;
}

/* Layer 2 */
.stars2::after {
  animation-name: twinkle2, drift2;
  animation-duration: 3.7s, 130s;
  opacity: 0.7;
  box-shadow:
    2.5vw 70vh white, 7.5vw 80vh white, 18vw 10vh white, 26vw 95vh white,
    34vw 30vh white, 41vw 80vh white, 49vw 60vh white, 57vw 90vh white,
    64vw 24vh white, 71vw 95vh white, 79vw 70vh white, 87vw 75vh white,
    95vw 90vh white, 3vw 80vh white, 11vw 70vh white, 19vw 95vh white;
}

/* Layer 3 */
.stars3::after {
  animation-name: twinkle3, drift3;
  animation-duration: 5.5s, 180s;
  opacity: 0.4;
  box-shadow:
    5vw 50vh white, 12vw 15vh white, 22vw 70vh white, 32vw 95vh white,
    42vw 40vh white, 52vw 90vh white, 62vw 25vh white, 72vw 70vh white,
    82vw 80vh white, 92vw 10vh white, 102vw 90vh white, 112vw 80vh white,
    122vw 95vh white, 132vw 100vh white;
}

/* Layer 4 */
.stars4::after {
  animation-name: twinkle1, drift4;
  animation-duration: 2.7s, 100s;
  opacity: 0.6;
  box-shadow:
    10vw 20vh white, 20vw 90vh white, 35vw 40vh white, 50vw 60vh white,
    65vw 80vh white, 80vw 30vh white, 95vw 85vh white, 110vw 20vh white,
    125vw 75vh white, 140vw 10vh white;
}

/* Layer 5 */
.stars5::after {
  animation-name: twinkle2, drift5;
  animation-duration: 4s, 150s;
  opacity: 0.5;
  box-shadow:
    5vw 35vh white, 15vw 60vh white, 25vw 25vh white, 40vw 70vh white,
    55vw 85vh white, 70vw 20vh white, 85vw 95vh white, 100vw 40vh white;
}

/* Layer 6 */
.stars6::after {
  animation-name: twinkle3, drift6;
  animation-duration: 5.8s, 200s;
  opacity: 0.45;
  box-shadow:
    12vw 10vh white, 27vw 50vh white, 42vw 90vh white, 57vw 60vh white,
    72vw 30vh white, 87vw 80vh white, 102vw 45vh white, 117vw 70vh white;
}

/* Layer 7 */
.stars7::after {
  animation-name: twinkle1, drift7;
  animation-duration: 2.4s, 110s;
  opacity: 0.55;
  box-shadow:
    8vw 75vh white, 23vw 25vh white, 38vw 85vh white, 53vw 35vh white,
    68vw 70vh white, 83vw 45vh white, 98vw 95vh white;
}

/* Layer 8 */
.stars8::after {
  animation-name: twinkle2, drift8;
  animation-duration: 3.9s, 140s;
  opacity: 0.5;
  box-shadow:
    10vw 15vh white, 30vw 50vh white, 50vw 85vh white, 70vw 20vh white,
    90vw 60vh white, 110vw 25vh white;
}

/* Layer 9 */
.stars9::after {
  animation-name: twinkle3, drift9;
  animation-duration: 6s, 190s;
  opacity: 0.4;
  box-shadow:
    5vw 10vh white, 25vw 60vh white, 45vw 30vh white, 65vw 80vh white,
    85vw 50vh white, 105vw 90vh white;
}

/* Layer 10 */
.stars10::after {
  animation-name: twinkle1, drift10;
  animation-duration: 2.5s, 120s;
  opacity: 0.5;
  box-shadow:
    12vw 20vh white, 32vw 45vh white, 52vw 75vh white, 72vw 40vh white,
    92vw 85vh white;
}

/* Twinkle animations */
@keyframes twinkle1 {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@keyframes twinkle2 {
  0%, 100% {
    opacity: 0.1;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.5);
  }
}

@keyframes twinkle3 {
  0%, 100% {
    opacity: 0.15;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.4);
  }
}

/* Slow drifting animations - small random floating */

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, 5px); }
}

@keyframes drift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 7px); }
}

@keyframes drift3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -6px); }
}

@keyframes drift4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10px, -4px); }
}

@keyframes drift5 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(7px, -8px); }
}

@keyframes drift6 {
   0%, 100% { transform: translate(0, 0); }
   50% { transform: translate(-9px, 9px); }
}

@keyframes drift7 {
   0%, 100% { transform: translate(0, 0); }
   50% { transform: translate(5px, -10px); }
}

@keyframes drift8 {
   0%, 100% { transform: translate(0, 0); }
   50% { transform: translate(-7px, 6px); }
}

@keyframes drift9 {
   0%, 100% { transform: translate(0, 0); }
   50% { transform: translate(6px, -7px); }
}

@keyframes drift10 {
   0%, 100% { transform: translate(0, 0); }
   50% { transform: translate(-5px, 8px); }
}

/* Rotating sky container for subtle rotation */
.stars-layer {
  animation: rotateSky 600s linear infinite;
  transform-origin: 50% 50%;
}

/* Rotation animation */
@keyframes rotateSky {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* Foreground content */
.content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  top: 40%;
}

.accordion-button::after {
  filter: invert(1); /* Invert dark arrow to light */
}

#accordionGroup1 .accordion-header {
  border-bottom: 2px solid #ffffff;
  box-shadow: 0 2px 5px #ffffff; /* subtle glow */
}

#accordionGroup2 .accordion-header {
  border-bottom: 2px solid #fcb103;
  box-shadow: 0 2px 5px #fcb103; /* subtle glow */
}

#accordionGroup3 .accordion-header {
  border-bottom: 2px solid #0dbdd1;
  box-shadow: 0 2px 5px #0dbdd1; /* subtle glow */
}

#accordionGroup1 .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -2px 0 #ffffff; /* Your custom color */
}

#accordionGroup2 .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -2px 0 #fcb103; /* Your custom color */
}

#accordionGroup3 .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -2px 0 #0dbdd1; /* Your custom color */
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* STRETCH to fit both width and height */
  display: block;
}