:root {
    --bg-color: #111;
    --text-color: #f0f0f0;
    --navbar-bg: #222;
    --nav-link-color: #f0f0f0;
    --nav-link-hover: #ffb347;
    --hero-bg: url('./src/img/background.png');
    --btn-bg: #ffb347;
    --btn-color: #000;
    --features-bg: #1c1c1c;
    --feature-card-bg: #2a2a2a;
    --footer-bg: #222;
    --footer-color: #aaa;
    --ip-bg: #1b1b1b;
    --ip-border: #333;
    --ip-heading: #ffb347;
    --code-bg: #2c2c2c;
    --code-color: #00ff88;
    --ip-text: #ccc;
    --a-color: #ffb347;
    --image-invertion: 1;
    --hero-color: #b652dd;
}

body.light {
    --bg-color: #fdfdfd;
    --text-color: #111;
    --navbar-bg: #f0f0f0;
    --nav-link-color: #111;
    --nav-link-hover: #ff6600;
    --hero-bg: url('./src/img/background.png');
    --btn-bg: #ff6600;
    --btn-color: #fff;
    --features-bg: #f1f1f1;
    --feature-card-bg: #e0e0e0;
    --footer-bg: #f0f0f0;
    --footer-color: #555;
    --ip-bg: #eee;
    --ip-border: #ccc;
    --ip-heading: #ff6600;
    --code-bg: #ddd;
    --code-color: #008800;
    --ip-text: #333;
    --a-color: #ff6600;
    --image-invertion: 0;
    --hero-color: #c20cc2;
}

body {
    margin: 0;
    font-family: 'Bahnschrift', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    transition: background 0.3s, color 0.3s;
}

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

.navbar {
    background: var(--navbar-bg);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-links img {
    filter: invert(var(--image-invertion));
}

.nav-links a {
    text-decoration: none;
    color: var(--nav-link-color);
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--nav-link-hover);
}

.theme-toggle {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--nav-link-color);
}

.theme-toggle img {
    width: 2rem;
    transition: transform 0.1s ease;
}

.theme-toggle img:hover {
  transform: scale(1.1);
}

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hero-color);
  text-shadow: 1px 1px 2rem black, 0 0 1rem black, 0 0 1rem black;
}

.btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--btn-bg);
    color: var(--btn-color);
    text-decoration: none;
    font-weight: bold;
    border-radius: 0.2604vw;
    transition: transform 0.3s ease;
    text-shadow: none;
}

.btn:hover {
  transform: scale(1.1);
}

/* Keep your existing styles */
.features {
  padding: 2rem;
  background: var(--features-bg);
  text-align: center;
}

.feature-grid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.feature-card {
    flex: 1 1 13.0208vw;
    background: var(--feature-card-bg);
    padding: 1.5rem;
    border-radius: 0.5208vw;
    text-align: center;
}

.slide-in {
  animation: slideIn 0.5s forwards ease;
}

.slide-out {
  animation: slideOut 0.5s forwards ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

footer {
    text-align: center;
    padding: 1rem;
    background: var(--footer-bg);
    color: var(--footer-color);
}

.ip-section {
    background: var(--ip-bg);
    padding: 2rem;
    text-align: center;
    border-top: 2px solid var(--ip-border);
    border-bottom: 2px solid var(--ip-border);
    margin-top: 2rem;
}

.ip-section h2 {
    font-size: 2rem;
    color: var(--ip-heading);
    margin-bottom: 0.5rem;
}

.ip-section code {
    font-size: 1.5rem;
    background: var(--code-bg);
    padding: 0.5rem 1rem;
    border-radius: 0.3125vw;
    color: var(--code-color);
    display: block;
    margin: 0.5rem auto;
    width: fit-content;
    cursor: pointer;
}

.ip-section p {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    color: var(--ip-text);
}

.dev-team {
    padding: 3rem 2rem;
    text-align: center;
    background: var(--features-bg);
}

.dev-team h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--accent-color);
}

.dev-cards {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.dev-cards ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.dev-cards ul li {
  margin: 0;
}

.honorable-mentions {
    font-family: "Momo Signature", cursive;
}

.dev-card {
    background: var(--feature-card-bg);
    padding: 1.5rem;
    border-radius: 0.625vw;
    text-align: center;
    width: 10.42vw;
    box-shadow: 0 0 0.5208vw rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.dev-cards > div {
  margin-bottom: 2rem; /* spacing between sections */
  width: 100%;
}

.dev-cards h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}

.dev-card .skin {
    width: 5.2083vw;
    height: auto;
    margin: 0 auto 1rem;
    background: var(--img-url) center/cover no-repeat;
    transform-style: preserve-3d;
    transition: transform 0s ease;
    border-radius: 8px;
    perspective: 52.083vw;
}

.dev-card h3 {
    margin: 0.5rem 0;
    font-size: 1.2rem;
    color: var(--text-color);
}

.dev-card .rank {
    font-size: 0.9rem;
    color: var(--ip-text);
}

.page-header {
    text-align: center;
}

.dev-card .skin:hover {
    cursor: pointer;
}

.logo a {
    text-decoration: none;
    color: var(--nav-link-color);
    transition: color 0.2s;
    font-weight: bolder;
}

.logo a:hover {
    color: var(--nav-link-hover);
}

.home {
    width: 2rem;
}

.rules {
    max-width: 41.67vw;
    margin: 2rem auto;
    padding: 0 2rem;
    color: var(--text-color);
    background: var(--features-bg);
}

.rule-block {
    background: var(--feature-card-bg);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.rule-block h2 {
    color: var(--ip-heading);
    margin-bottom: 0.75rem;
}

.rule-block ul {
    padding-left: 1.25rem;
}

.rule-block li {
    margin-bottom: 0.5rem;
}

.punishment {
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--ip-text);
}

.updates {
  padding: 2rem;
  background: var(--features-bg);
}

.update-grid {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    text-align: center;
}

.update-card {
    flex: 1 1 13.02vw;
    background: var(--feature-card-bg);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.socials-section {
  padding: 1.5rem;
  text-align: center;
  background: var(--features-bg);
}

.socials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; /* Smaller gap between items */
  justify-items: center;
  max-width: 52.083vw; /* Optional: limits how wide the grid can grow */
  margin: 2rem auto 0 auto; /* Center the grid horizontally */
  padding: 0 1rem;
}

@media (max-width: 900px) {
  .socials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .socials-grid {
    grid-template-columns: 1fr;
  }
}

.social-card {
  position: relative;          /* for overlay */
  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  width: 10.42vw;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  overflow: hidden;            /* ensures overlay stays inside */
  z-index: 0;
}

/* Transparent background overlay */
.social-card::before {
  content: "";
  position: absolute;
  inset: 0;                     /* top:0; right:0; bottom:0; left:0 */
  background-color: var(--feature-card-bg);
  opacity: 0.5;                 /* adjust transparency here */
  border-radius: 12px;          /* match card */
  z-index: -1;                   /* behind content */
}

/* Hover effect */
.social-card:hover {
  transform: scale(1.05);
}

.social-card img,
.social-card h3,
.social-card a {
  position: relative;            /* keep above overlay */
  z-index: 1;
}

.social-card img {
  height: 2.6vw;
  margin-bottom: 0.5rem;
}

.social-card h3 {
  margin-bottom: 0.5rem;
}

.social-card a {
  text-decoration: none;
  font-weight: bold;
}

.social-card a:hover {
  text-decoration: underline;
}



.home-image-two {
  width: 8rem;
}

.fullhomething {
  transition: transform 0.3s ease; /* You can adjust the duration and easing */
}

.fullhomething:hover {
  transform: scale(1.2);
}

.crate {
  transition: transform 0.3s ease; /* You can adjust the duration and easing */
}

.crate:hover {
  transform: scale(1.1);
}

.hero img {
  transition: transform 0.3s ease; /* You can adjust the duration and easing */
}

.hero img:hover {
  transform: scale(1.1);
}

/* -------------------- MOBILE STYLES -------------------- */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
  }

  .nav-links a {
    padding: 0.5rem 0;
    width: 100%;
  }

  .hero {
    padding: 2rem 1rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .btn {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }

  .feature-grid,
  .dev-cards ul {
    flex-direction: column;
    align-items: center;
  }

  .feature-card,
  .dev-card,
  .update-card,
  .social-card {
    width: 90%;
    margin: 1rem 0;
  }

  .dev-card .skin {
    width: 80px;
  }

  .ip-section {
    padding: 1.5rem 1rem;
  }

  .ip-section h2 {
    font-size: 1.5rem;
  }

  .ip-section code {
    font-size: 1.2rem;
  }

  .rules {
    padding: 0 1rem;
  }

  .rule-block {
    padding: 1rem;
  }

  .socials-grid {
    grid-template-columns: 1fr;
  }

  .social-card {
    width: 90%;
  }

  .home-image-two {
    width: 6rem;
  }

  .logo a {
    font-size: 1.2rem;
  }

  .hero img {
    max-width: 60%;
  }
  
  .earthmap {
    height: 60vh;
    border-radius: 8px;
  }
}

.earthmap {
  width: 100%;                     /* full width of container */
  height: 80vh;                    /* tall but leaves some space */
  border: none;                    /* remove default border */
  border-radius: 12px;             /* match your card style */
  box-shadow: 0 0 15px rgba(0,0,0,0.3); /* subtle shadow */
  margin: 2rem auto;               /* spacing above and below */
  display: block;                  /* centers with margin auto */
}