* {
  box-sizing: border-box;
}
.center {display: flex; justify-content: center;}
/* Mobile-first responsive overrides */
html { font-size: 16px; }
body { font-size: 1rem; line-height: 1.6; margin: 0; }

/* Improve tap targets and readability */
.nav .link { display: inline-block; padding: 10px 12px; font-size: 1rem; }

/* Bright, larger main buttons */
.main-menu .btn,
.btn-asteroid, .btn-meteor, .btn-rocket, .btn-moon, .btn-star {
  padding: 12px 16px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff !important;
  border-radius: 12px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

/* Ensure navbar links are bright and readable */
.nav .link { color: #ffffff !important; text-shadow: 0 1px 1px rgba(0,0,0,0.4); }

/* Cards and layout tweaks */
.cards { gap: 24px; }
.card { max-width: 720px; }
.card-content { margin-top: 4px; margin-bottom: 42px; }
.card, .carde { font-size: 1rem; }

/* Feed compact (home) */
.feed-compact .title { font-size: 20px; line-height: 1.3; }
.feed-compact .excerpt { font-size: 16px; line-height: 1.4; }
.feed-compact .thumb { width: 100px; height: 100px; }
button, .button { font-size: 1rem; padding: 12px 14px; }

/* Tablet */
@media (max-width: 1024px) {
  html { font-size: 17px; }
  .main-menu .btn,
  .btn-asteroid, .btn-meteor, .btn-rocket, .btn-moon, .btn-star {
    font-size: 1.2rem;
  }
}

/* Phones */
@media (max-width: 768px) {
  html { font-size: 18px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card, .carde { max-width: 100%; padding: 14px; box-shadow: 6px 6px 0 #383227; }
  .card-content { margin: 6px 4px 28px 6px; }
  .nav { padding: 12px; }
  .nav .link { padding: 10px 10px; font-size: 1.1rem; }
  .main-menu { gap: 10px; }
  .main-menu .btn,
  .btn-asteroid, .btn-meteor, .btn-rocket, .btn-moon, .btn-star {
    padding: 12px 14px;
    font-size: 1.25rem;
  }
  .feed-compact .item { padding: 10px; gap: 10px; }
  .feed-compact .title { font-size: 21px; }
  .feed-compact .excerpt { font-size: 16px; -webkit-line-clamp: 4; }
  .feed-compact .thumb { width: 88px; height: 88px; }
}

/* Small phones */
@media (max-width: 480px) {
  html { font-size: 19px; }
  .nav .link { display: inline-block; padding: 12px 12px; }
  .main-menu { flex-direction: row; flex-wrap: wrap; }
  .main-menu .btn,
  .btn-asteroid, .btn-meteor, .btn-rocket, .btn-moon, .btn-star {
    flex: 1 1 auto; min-width: 46%; text-align: center; font-size: 1.28rem;
  }
  .feed-compact .thumb { width: 80px; height: 80px; }
  .button, button { width: 100%; position: static; margin-top: 8px; }
}