/* ------------- GLOBAL PAGE STYLES ------------- */

body {
  background-image: url("clouds.jpeg");
  background-repeat: repeat;        /* tiles the image */
  background-size: auto;            /* keeps the original pixel-art vibe */
  color: #f0f0ff;
  font-family: "Verdana", "Tahoma", sans-serif;
  margin: 0;
  padding: 20px;
}

/* (Currently not used, but kept if you ever re-wrap the page) */
.page {
  max-width: 900px;
  margin: 0 auto;                      /* center horizontally */
  background-color: #FFD6E7;
  border: 3px solid #ff66cc;           /* bright pink border */
  padding: 15px;
  box-shadow: 0 0 10px #000000;
}

/* ------------- TOP HEADER ------------- */

.top-header {
  margin-top: 40px;       /* pushes the header down from the very top */
  margin-bottom: 20px;    /* space between header and navigation */
  text-align: center;     /* centers text + image */
}

.site-title {
  font-family: "Courier New", monospace;
  font-size: 55px;
  letter-spacing: 2px;
  color: #ff0088;
  text-transform: lowercase;          /* makes it look soft + 90s */
  text-shadow: 2px 2px 0 white;       /* retro glow */
  margin-bottom: 10px;                /* space between title and gif */
}

.banner-image {
  max-width: 70%;                     /* reduce size but keep proportion */
  height: auto;
  border: 3px solid #ff66cc;          /* cute retro border */
  box-shadow: 0 0 10px #000000;       /* dramatic shadow like your cards */
}

/* ------------- NAVIGATION BAR ------------- */

.top-nav ul {
  list-style: none;                    /* remove bullets */
  margin: 0;
  padding: 0;
  display: flex;                       /* put items in a row */
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.top-nav li {
  /* little “pill” around each link */
  background-color: #FF0000;
  border: 2px solid #990000;
  padding: 4px 8px;
}

.top-nav a {
  text-decoration: none;               /* remove underline */
  color: #FFD6E7;
  font-size: 20px;
  text-transform: uppercase;
}

/* ------------- MARQUEE BANNER ------------- */

.marquee-wrapper {
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 4px;
  background-color: #FF99DD;       /* light pink strip */
  border: 2px dashed #FF0000;      /* 90s dashed red border */
}

.marquee-text {
  font-size: 13px;
  font-weight: bold;
  color: #660000;                  /* dark red text */
}

/* ------------- MAIN CONTENT ------------- */

main {
  margin-top: 15px;
}

/* Card-like sections */
.card {
  background-color: #FF66CC;
  border: 2px solid #99ccff;
  padding: 10px;
  margin-bottom: 10px;
}

/* Section headings */
.card h2 {
  margin-top: 0;
  font-size: 18px;
  color: #ffccff;
  text-shadow: 1px 1px 0 #000000;
}

/* Tiny helper text */
.tiny {
  font-size: 11px;
  opacity: 0.8;
}

/* ------------- THREE-COLUMN LAYOUT (HOME PAGE) ------------- */

.three-col {
  display: flex;                /* three things next to each other: left, middle, right */
  gap: 10px;
  max-width: 900px;             /* controls overall width (tweak to taste) */
  margin: 20px auto 0;          /* center the whole layout on the page */
  align-items: flex-start;      /* keep tops aligned */
}

/* Main center column: takes up the most space */
.main-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;                    /* space between cards inside main column */
  text-align: left;             /* keep text readable and left-aligned */
}

/* Extra safety if you ever use .middle-col on a card */
.middle-col {
  text-align: left;
}

/* Sidebars (left + right) */
.sidebar {
  flex: 0 0 180px;              /* fixed-ish width sidebars */
  max-width: 180px;
  background-color: #FF99DD;    /* a bit lighter/different than main .card */
}

/* ------------- MOBILE LAYOUT ------------- */

@media (max-width: 800px) {
  .three-col {
    flex-direction: column;     /* stack sidebars and main on small screens */
  }

  .sidebar {
    max-width: 100%;
    flex: 1 1 auto;             /* let sidebars grow full width on mobile */
  }
}

/* ------------- LINK BUTTON GRID ------------- */

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.button-link {
  display: inline-block;
  text-align: center;
  padding: 6px;
  background-color: #330066;
  border: 2px outset #ffcc00;
  color: #ffcc00;
  text-decoration: none;
  font-size: 13px;
}

/* “Webring” / other sites bar */
.button-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.button-bar span {
  background-color: #330033;
  border: 1px solid #ff66cc;
  padding: 2px 4px;
  font-size: 11px;
}

/* ------------- LISTS (Sitemap) ------------- */

.card ul {
  padding-left: 20px;
}

/* ------------- FOOTER ------------- */

footer {
  margin-top: 10px;
  text-align: center;
}

/* ---------------- Link to mini blog ----------- */

.retro-link {
  color: #990033;
  background-color: #ff99dd;
  padding: 3px 6px;
  border: 2px solid #ff66cc;
  font-size: 12px;
  text-decoration: none;
}

.retro-link:hover {
  background-color: #ff66cc;
  color: white;
}

/* ------------- POLLCODE EMBED (if you switch back to class version) ------------- */
/* (Your current poll uses inline styles; this is here if you ever re-wire it.) */

.poll-inner {
  background-color: #EEE083;         /* their original yellow */
  padding: 6px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: #FF3686;                    /* their original hot pink */
  box-shadow: 0px 0px 5px #888;
  border: 2px solid #FF66CC;         /* matches your site's palette */
}

.poll-inner label {
  display: block;
  padding-left: 4px;
  margin-bottom: 4px;
}

.poll-buttons {
  text-align: center;
  margin-top: 6px;
}

.poll-buttons input {
  margin: 2px;
  padding: 2px 6px;
  font-family: "Courier New", monospace;
}

.poll-credit {
  font-size: 10px;
  text-align: right;
  margin-top: 6px;
}

/* ------------- GUESTBOOK PAGE ------------- */

.guestbook-card {
  max-width: 700px;          /* width of guestbook box */
  margin: 0 auto;            /* center the card on the page */
  padding: 20px;             /* add breathing room */
  text-align: center;        /* center all text inside */
}

.guestbook-frame {
  width: 100%;
  height: 600px;             /* make the iframe bigger */
  border: 3px solid #ff66cc;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px #000;
  margin-top: 20px;
}

/* On small screens, let it breathe */
@media (max-width: 800px) {
  .guestbook-frame {
    height: 400px;
  }
}

/* Guestbook image button (home page card) */

.guestbook-gif-button {
  max-width: 100%;
  height: auto;
  border: 2px solid #ff66cc;
  box-shadow: 0 0 5px #000;
  image-rendering: pixelated;
}

/* ----------- Guestbook page big link ----------- */

.guestbook-link-wrapper {
  width: 100%;
  text-align: center;
  display: block;
  margin: 25px 0;                  /* space above and below */
}

.guestbook-biglink {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 28px;                  /* bigger text */
  font-weight: bold;
  background-color: #ff99dd;
  color: #660033;
  padding: 10px 20px;
  border: 4px ridge #ff66cc;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: lowercase;
  box-shadow: 0 0 10px #000;
  margin: 0 auto;                   /* force horizontal centering */
}

.guestbook-biglink:hover {
  background-color: #ff66cc;
  color: white;
  border-color: #ff0099;
}


/* ------------- ABOUT PAGE ------------- */

.about-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}
/* ---- ABOUT PAGE PHOTO AS PIXEL SPEECH BUBBLE ---- */

.about-photo-bubble {
  display: block;                 /* was inline-block */
  width: fit-content;             /* shrink wrap around the photo */
  margin: 10px auto 20px;         /* center horizontally */
  padding: 6px;
  background-color: #ffccf5;
  border: 3px solid #ff66cc;
  box-shadow: 0 0 10px #000;
  position: relative;
}

.about-photo {
  display: block;
  width: 140px;                  /* adjust size to taste */
  height: auto;
}


/* ---- ABOUT PAGE Q&A ---- */

.faq-card {
  text-align: left; /* keep Q&A text aligned left even though card is centered */
}

/* ---- GLITTERY Q&A HEADER (HEAVY-EQUIPMENT VIBE) ---- */

.qa-title {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 32px;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 6px 14px;
  margin-bottom: 18px;

  /* glittery, neon-ish text */
  color: #ffe6f7;
  text-shadow:
    0 0 4px #ff66cc,
    0 0 8px #ff66cc,
    0 0 12px #ff0088,
    2px 2px 0 #000;

  /* “caution tape but pink” background */
  background: linear-gradient(
    135deg,
    #ff99dd 0%,
    #ffe6f7 25%,
    #ff99dd 50%,
    #ffe6f7 75%,
    #ff99dd 100%
  );
  border: 3px ridge #ff66cc;
  box-shadow: 0 0 10px #000;
}


.qa-item {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #ff99dd;
  border: 2px dashed #ff66cc;
}

.question {
  font-weight: bold;
  color: #660033;
  margin: 0 0 4px 0;
  font-family: "Courier New", monospace;
}

.answer {
  margin: 0;
}


/* ---- TRUE FLOATING DOOR ---- */

.floating-door-wrapper {
  text-align: center;
  margin: 40px 0;
}

.magic-door {
  position: relative;
  display: inline-block;
  width: 90px;      /* adjust if you want it bigger */
  height: 150px;
  cursor: pointer;
}

/* hover animation rules stay the same */
.magic-door .door {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.magic-door .open {
  opacity: 0;
  transition: opacity .15s ease-out;
}

.magic-door:hover .open {
  opacity: 1;
}

/* --- SECRET PAGE: full-screen cloud center + float --- */

.secret-page {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  min-height: 100vh;         /* full viewport height */
  padding: 0;                /* override body padding for this page only */
}

.secret-floating {
  text-align: center;
}

/* gentle bobbing animation */
.secret-img {
  width: 400px;
  height: auto;
  animation: floaty 3.5s ease-in-out infinite;
}

@keyframes floaty {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);     /* how high it floats */
  }
  100% {
    transform: translateY(0);
  }
}


/* --- FLOATING FLAG COUNTER (bottom-right corner) --- */

.flagcounter-wrapper {
  position: fixed;         /* stays in place even when scrolling */
  bottom: 12px;            /* distance from bottom */
  right: 12px;             /* distance from right */
  z-index: 9999;           /* keeps it above everything */
  pointer-events: auto;    /* clickable */
}

.flagcounter-wrapper img {
  box-shadow: none;            /* no card / no border */
  border: none;
  background: transparent;
}