@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Nunito:wght@400;700;900&family=Pacifico&family=Permanent+Marker&display=swap');

:root {
  --pink: #ff2bd6;
  --hot-pink: #ff3b8d;
  --yellow: #fff447;
  --blue: #29f6ff;
  --cyan: #29f6ff;
  --green: #b6ff38;
  --purple: #a65cff;
  --orange: #ff8a1f;
  --white: #fffdf7;
  --dark: #09051a;
  --panel: #17103d;
  --panel-2: #241052;
  --shadow-pink: 0 0 10px #ff2bd6, 0 0 28px rgba(255, 43, 214, .75), 0 0 58px rgba(255, 43, 214, .28);
  --shadow-yellow: 0 0 10px #fff447, 0 0 28px rgba(255, 244, 71, .68);
  --shadow-blue: 0 0 10px #29f6ff, 0 0 28px rgba(41, 246, 255, .7), 0 0 58px rgba(41, 246, 255, .24);
  --shadow-green: 0 0 10px #b6ff38, 0 0 28px rgba(182, 255, 56, .62);
  --shadow-purple: 0 0 10px #a65cff, 0 0 30px rgba(166, 92, 255, .7);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--white);
  font-family: 'Nunito', sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 43, 214, .34), transparent 27rem),
    radial-gradient(circle at 91% 9%, rgba(41, 246, 255, .30), transparent 28rem),
    radial-gradient(circle at 72% 82%, rgba(182, 255, 56, .18), transparent 25rem),
    linear-gradient(145deg, #070315 0%, #15052f 42%, #071933 72%, #09051a 100%);
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .28;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .18) 3px 4px);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(35deg, transparent 46%, rgba(255, 244, 71, .11) 47% 49%, transparent 50%) 0 0 / 130px 130px,
    linear-gradient(-35deg, transparent 46%, rgba(255, 43, 214, .10) 47% 49%, transparent 50%) 65px 35px / 150px 150px;
}

::selection {
  color: var(--dark);
  background: var(--yellow);
}

.retro-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(41, 246, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 246, 255, .10) 1px, transparent 1px),
    radial-gradient(ellipse 85% 60% at 50% 110%, rgba(255, 43, 214, .48), transparent 66%),
    radial-gradient(ellipse 55% 42% at 102% -2%, rgba(41, 246, 255, .36), transparent 65%);
  background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%;
  filter: saturate(1.35);
}

a {
  color: var(--cyan);
}

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .9rem clamp(1rem, 4vw, 3rem);
  border-bottom: 3px solid var(--pink);
  background: linear-gradient(100deg, rgba(9, 5, 26, .97), rgba(41, 13, 81, .94), rgba(5, 36, 64, .96));
  box-shadow: var(--shadow-pink), inset 0 -1px 0 rgba(255, 255, 255, .24);
  backdrop-filter: blur(14px);
}

.nav-logo {
  flex: 0 1 auto;
  color: var(--yellow);
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.05rem, 2.4vw, 1.65rem);
  letter-spacing: .03em;
  text-decoration: none;
  text-shadow: var(--shadow-yellow);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.nav-links a {
  display: inline-block;
  padding: .42rem .72rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cyan);
  font-family: 'Boogaloo', cursive;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-decoration: none;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active {
  color: var(--dark);
  border-color: var(--pink);
  background: var(--pink);
  box-shadow: var(--shadow-pink);
  transform: translateY(-2px) rotate(-1deg);
}

h1, h2 {
  font-family: 'Permanent Marker', cursive;
}

h3, h4 {
  font-family: 'Boogaloo', cursive;
  letter-spacing: .035em;
}

header,
.hero,
.game-hero,
.store-hero,
.cv-hero,
.greenland-hero {
  position: relative;
  isolation: isolate;
}

header {
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem;
  color: var(--white);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255, 43, 214, .34), transparent 42%),
    linear-gradient(-135deg, rgba(41, 246, 255, .30), transparent 45%),
    linear-gradient(110deg, #170633, #10275a 58%, #2e0b53);
  border-bottom: 4px solid var(--cyan);
  box-shadow: var(--shadow-blue);
}

header::before,
.greenland-hero::before {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  top: -125px;
  right: -70px;
  z-index: -1;
  border: 22px solid var(--yellow);
  border-radius: 48% 52% 62% 38%;
  opacity: .62;
  transform: rotate(18deg);
  box-shadow: var(--shadow-yellow);
}

header::after,
.greenland-hero::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 42px;
  left: -70px;
  bottom: 28px;
  z-index: -1;
  background: repeating-linear-gradient(90deg, var(--pink) 0 28px, transparent 28px 45px);
  opacity: .72;
  transform: rotate(-12deg);
  filter: drop-shadow(0 0 12px var(--pink));
}

header h1,
.hero-title,
.game-hero h1,
.store-hero h1,
.cv-hero h1,
.greenland-hero h1 {
  margin: 0;
  color: var(--pink);
  font-size: clamp(2.7rem, 8vw, 6.8rem);
  line-height: .98;
  text-shadow: var(--shadow-pink), 4px 4px 0 var(--yellow), -2px -2px 0 var(--cyan);
}

header p,
.hero-sub,
.game-hero p,
.store-hero p,
.cv-hero p,
.greenland-hero p {
  color: rgba(255, 253, 247, .92);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.65;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .72);
}

.hero-title {
  animation: hero-burst 1.25s cubic-bezier(.2, 1, .3, 1) both, neon-flicker 6s infinite 1.3s;
}

.hero-title span {
  color: var(--cyan);
  text-shadow: var(--shadow-blue), 4px 4px 0 var(--pink);
}

.btn,
.ctaButton,
.joinConversation,
.refreshComments,
.card button {
  border: 3px solid currentColor;
  border-radius: 8px;
  padding: .72rem 1.5rem;
  color: var(--yellow);
  background: rgba(9, 5, 26, .78);
  font-family: 'Boogaloo', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(255, 43, 214, .65);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.btn:hover,
.btn:focus-visible,
.ctaButton:hover,
.ctaButton:focus-visible,
.joinConversation:hover,
.joinConversation:focus-visible,
.refreshComments:hover,
.refreshComments:focus-visible,
.card button:hover,
.card button:focus-visible {
  color: var(--dark);
  background: var(--yellow);
  box-shadow: var(--shadow-yellow), 7px 7px 0 var(--pink);
  transform: translate(-2px, -3px) rotate(-1deg);
}

.btn-pink { color: var(--pink); }
.btn-yellow { color: var(--yellow); }
.btn-blue { color: var(--cyan); }
.btn-green { color: var(--green); }

.card,
.product-card,
.tip-card,
.dropzone,
.cv-preview,
.game-instructions,
.satelliteCard,
.forecastCard,
.commentsCard,
.certificateSample,
#programDetails {
  color: var(--white);
  background:
    linear-gradient(145deg, rgba(255, 43, 214, .16), transparent 45%),
    linear-gradient(-35deg, rgba(41, 246, 255, .14), transparent 48%),
    rgba(23, 16, 61, .94);
  border: 2px solid var(--cyan);
  box-shadow: var(--shadow-blue), inset 0 0 32px rgba(166, 92, 255, .15);
}

.card,
.product-card,
.tip-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card:nth-child(3n + 1),
.product-card:nth-child(3n + 1),
.tip-card:nth-child(3n + 1) {
  border-color: var(--pink);
  box-shadow: var(--shadow-pink);
}

.card:nth-child(3n + 2),
.product-card:nth-child(3n + 2),
.tip-card:nth-child(3n + 2) {
  border-color: var(--yellow);
  box-shadow: var(--shadow-yellow);
}

.card:nth-child(3n),
.product-card:nth-child(3n),
.tip-card:nth-child(3n) {
  border-color: var(--green);
  box-shadow: var(--shadow-green);
}

.card:hover,
.product-card:hover,
.tip-card:hover {
  transform: translateY(-8px) rotate(-.7deg) scale(1.015);
}

.card p,
.product-info p,
.tip-card p,
.commentsDescription,
.commentBody,
#forecastText,
#programDetails {
  color: rgba(255, 253, 247, .86);
}

.product-img {
  background:
    repeating-linear-gradient(45deg, rgba(255, 43, 214, .3) 0 14px, transparent 14px 28px),
    linear-gradient(135deg, rgba(41, 246, 255, .30), rgba(166, 92, 255, .36));
}

.filter-btn {
  border: 2px solid var(--cyan);
  color: var(--cyan);
  background: rgba(9, 5, 26, .8);
}

.filter-btn:hover,
.filter-btn.active {
  color: var(--dark);
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: var(--shadow-yellow);
}

.cart-badge {
  background: linear-gradient(135deg, var(--pink), var(--yellow));
  box-shadow: var(--shadow-pink), var(--shadow-yellow);
}

.dropzone {
  border-color: var(--purple);
  background:
    repeating-linear-gradient(-45deg, rgba(166, 92, 255, .12) 0 16px, transparent 16px 32px),
    rgba(23, 16, 61, .95);
  box-shadow: var(--shadow-purple);
}

.dropzone h3,
.cv-preview-header h3 {
  color: var(--purple);
  text-shadow: var(--shadow-purple);
}

.game-canvas-wrap {
  border-color: var(--green);
  box-shadow: var(--shadow-green), 0 0 65px rgba(41, 246, 255, .20);
}

.satelliteCard,
.forecastCard,
.commentsCard,
.hero,
.certificate,
#programs,
#details {
  width: min(92%, 1120px);
}

.satelliteCard,
.forecastCard,
.commentsCard {
  margin: 2rem auto;
  padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: 18px;
}

.satelliteCard { border-color: var(--cyan); }
.forecastCard { border-color: var(--pink); box-shadow: var(--shadow-pink); }
.commentsCard { border-color: var(--green); box-shadow: var(--shadow-green); }

.satelliteCard h2,
.forecastCard h2,
.commentsCard h2,
#programs > h2,
.certificate h2,
#details h2 {
  color: var(--cyan);
  text-shadow: var(--shadow-blue);
}

.forecastCard h2,
.commentsCard h2:nth-child(even) {
  color: var(--pink);
  text-shadow: var(--shadow-pink);
}

#goesImage {
  border: 3px solid var(--yellow);
  border-radius: 12px;
  box-shadow: var(--shadow-yellow);
}

.commentCount {
  color: var(--dark);
  background: var(--green);
  box-shadow: var(--shadow-green);
}

.commentItem {
  border-color: rgba(41, 246, 255, .35);
}

.commentAuthor,
.commentPermalink,
.eyebrow,
.commentStatus {
  color: var(--cyan);
}

.commentAvatar {
  border: 2px solid var(--pink);
  box-shadow: var(--shadow-pink);
}

.programGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}

#programs .card {
  min-width: 0;
  padding: 1.6rem;
  border-radius: 16px;
}

#programs .card h3 {
  color: var(--yellow);
  font-size: 1.55rem;
  text-shadow: var(--shadow-yellow);
}

.certificateSample {
  border: 5px double var(--yellow);
  color: var(--yellow);
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  line-height: 1.6;
  text-shadow: var(--shadow-yellow);
  transform: rotate(-1deg);
}

#programDetails {
  min-height: 90px;
  padding: 1.5rem;
  border-radius: 14px;
  line-height: 1.7;
}

.greenland-hero {
  display: grid;
  place-items: center;
  min-height: 66vh;
  padding: 5rem 1.5rem;
  overflow: hidden;
  text-align: center;
}

.greenland-hero-inner {
  width: min(760px, 100%);
}

.greenland-hero h1 {
  color: var(--cyan);
  text-shadow: var(--shadow-blue), 4px 4px 0 var(--pink);
}

.greenland-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  width: min(1000px, calc(100% - 2rem));
  margin: 0 auto 5rem;
}

.greenland-grid .card {
  padding: 2rem;
  border-radius: 18px;
}

footer {
  margin-top: 4rem;
  padding: 2.5rem 1rem;
  color: var(--cyan);
  font-family: 'Boogaloo', cursive;
  letter-spacing: .12em;
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 43, 214, .18), rgba(41, 246, 255, .13), rgba(182, 255, 56, .14));
  border-top: 3px solid var(--pink);
  box-shadow: 0 -8px 30px rgba(255, 43, 214, .28);
}

@media (max-width: 860px) {
  nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-links {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  nav {
    position: relative;
  }

  .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .nav-links a {
    width: 100%;
    text-align: center;
  }

  header::before,
  .greenland-hero::before {
    opacity: .34;
  }

  .hero,
  .game-hero,
  .store-hero,
  .cv-hero,
  .greenland-hero {
    padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}