@charset "UTF-8";

/* — ENSURE FULL VIEWPORT HEIGHT — */
html, body {
  height: 100%;
  margin: 0;
}

/* — GLOBAL PAGE STYLES — */
body {
  background: #000;
  color: #d4d4d4;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  position: relative;
  overflow-x: hidden;
}

.starfield {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.star-layer {
  position: absolute;
  inset: -6vh -6vw;
  will-change: transform;
}

.layer-1 {
  animation: drift-slow 70s ease-in-out infinite alternate;
}

.layer-2 {
  animation: drift-mid 42s ease-in-out infinite alternate;
}

.layer-3 {
  animation: drift-fast 26s ease-in-out infinite alternate;
}

.star {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fff;
  opacity: var(--base-opacity, 0.7);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  animation: pulse var(--pulse-duration, 3s) steps(4, end) infinite;
  animation-delay: var(--pulse-delay, 0s);
}

@keyframes pulse {
  0% { opacity: calc(var(--base-opacity, 0.7) * 0.25); transform: scale(0.85); }
  20% { opacity: var(--base-opacity, 0.7); transform: scale(1); }
  35% { opacity: calc(var(--base-opacity, 0.7) * 0.45); transform: scale(0.9); }
  65% { opacity: 1; transform: scale(1.25); }
  100% { opacity: calc(var(--base-opacity, 0.7) * 0.2); transform: scale(0.8); }
}

@keyframes drift-slow {
  0% { transform: translate3d(-1vw, 1vh, 0); }
  100% { transform: translate3d(1vw, -1.5vh, 0); }
}

@keyframes drift-mid {
  0% { transform: translate3d(1vw, -1vh, 0); }
  100% { transform: translate3d(-1.5vw, 1.8vh, 0); }
}

@keyframes drift-fast {
  0% { transform: translate3d(-1.2vw, -1.2vh, 0); }
  100% { transform: translate3d(1.8vw, 1.7vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .star-layer,
  .star {
    animation: none !important;
  }
}

/* — MAIN COLUMN STYLES — */
.main-container {
  background: rgba(21, 21, 33, 0.9);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  width: min(1000px, 92vw);
  margin: 0 auto;
  padding: 2rem 2.5rem;
  min-height: 100vh;
  position: relative;
}

/* — HEADER STYLES — */
header {
  text-align: center;
  margin-bottom: 1rem;
}

/* — FLEX LAYOUT — */
.layout-row {
  position: static;
}

/* IMPORTANT FIX */
.content {
  width: 100%;
  min-width: 0;
}

/* — LINKS — */
a {
  color: #7587A6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* — SECTION HEADERS — */
.section h2 {
  font-size: 1.6rem;
  border-bottom: 1px solid #555;
  padding-bottom: 0.2rem;
  margin-bottom: 1rem;
}

/* — IMAGE FIX — */
.image-grid {
  width: 100%;
}

.image-grid img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* — SOCIAL ICONS — */
.social-icons {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}

.social-icons a {
  color: #7587A6;
  display: inline-flex;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-icons a:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* — FOOTER — */
footer {
  text-align: center;
  margin-top: 2rem;
}

/* ---- 88x31 BUTTON ZONE ---- */

.buttons {
  margin-top: 2rem;
  text-align: center;
}

.button-grid {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.button-grid img {
  width: 88px;
  height: 31px;
  image-rendering: pixelated; /* crisp retro gifs */
  transition: transform 0.15s ease;
}

.button-grid img:hover {
  transform: scale(1.05);
}

@media (max-width: 900px) {
  .main-container {
    width: auto;
    padding: 1.4rem;
  }

  .layout-row {
    display: block;
  }
}