/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ========== Base ========== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Verdana, Arial, sans-serif;
  color: #2a2a2a;

  /* Cute soft background (replace with an image if you want) */
  background:
    radial-gradient(circle at 20% 10%, rgba(255,180,220,.35), transparent 35%),
    radial-gradient(circle at 85% 25%, rgba(170,220,255,.40), transparent 35%),
    radial-gradient(circle at 40% 90%, rgba(255,240,180,.35), transparent 35%),
    #fff;
}

.page {
  width: min(980px, 94vw);
  margin: 18px auto 40px;
}

/* ========== Top nav blocks ========== */
.topnav {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.navblock {
  padding: 10px 12px;
  background: rgba(255,255,255,0.75);
  border: 2px solid rgba(255,160,210,0.6);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.navblock h2 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: capitalize;
}

.navrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.navrow a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  text-decoration: none;
  color: #2a2a2a;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(170,220,255,0.7);
}

.navrow a:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.95);
}

.navrow img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

/* ========== Hero ========== */
.hero {
  text-align: center;
  padding: 14px 10px 6px;
}

.hero h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.brace { color: rgba(255,120,190,0.95); }

.subtitle {
  margin: 8px 0 10px;
  font-size: 13px;
}

.hero-stickers {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 4px;
}
.hero-stickers img {
  width: 90px;
  height: auto;
  opacity: 0.95;
}

/* ========== Grid/cards ========== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

/* Card spans: tweak to your taste */
.grid .card:nth-child(1) { grid-column: span 6; }
.grid .card:nth-child(2) { grid-column: span 6; }
.grid .card:nth-child(3) { grid-column: span 6; }
.grid .card:nth-child(4) { grid-column: span 6; }
.grid .card:nth-child(5) { grid-column: span 6; }
.grid .card:nth-child(6) { grid-column: span 6; }
.grid .card:nth-child(7) { grid-column: span 12; }

@media (max-width: 860px) {
  .grid .card { grid-column: span 12 !important; }
}

.card {
  background: rgba(255,255,255,0.78);
  border: 2px solid rgba(170,220,255,0.8);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.07);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.card h4.small {
  margin: 12px 0 6px;
  font-size: 13px;
}

.tiny { font-size: 12px; }
.divider {
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin: 12px 0;
}

/* Facts list */
.facts {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.facts li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
.facts img { width: 14px; height: 14px; }

/* 88x31 buttons */
.buttons88 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.buttons88 img {
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.10);
}

/* Lists */
.list { margin: 0; padding-left: 18px; }
.list li { margin: 6px 0; }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { margin: 8px 0; display: flex; gap: 8px; align-items: center; }

/* Embeds (poll/chatbox placeholders) */
.embed {
  border: 1px dashed rgba(0,0,0,0.25);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.6);
}

/* 400x400 media box */
.media-box { margin-top: 10px; }
.square400 {
  width: 400px;
  height: 400px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
}

/* Footer */
.footer {
  margin-top: 14px;
  text-align: center;
  opacity: 0.85;
}