@charset "utf-8";

/* =========================================================
   GLOBAL PAGE SETUP
   These rules apply to the whole site.
   ========================================================= */

/* MAKE SIZING EASIER TO MANAGE EVERYWHERE.
   PADDING AND BORDERS WILL BE INCLUDED INSIDE ELEMENT WIDTHS. */
* {
  box-sizing: border-box;
}

/* REMOVE DEFAULT BROWSER SPACING AND ALLOW NORMAL VERTICAL SCROLL.
   THIS HELPS YOUR FULL-PAGE LAYOUT BEHAVE CONSISTENTLY. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* Prevent sideways scrolling */
  overflow-y: auto;     /* Allow up/down scrolling */
}

/* PREVENT SOME BROWSERS FROM AUTO-ENLARGING TEXT UNEXPECTEDLY. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* SET THE MAIN PAGE BACKGROUND COLOR */
body {
  background-color: lightcyan;
}

/* MAKE IMAGES RESPONSIVE BY DEFAULT. */
img {
  border: none;
  max-width: 100%;
  height: auto;
}


/* =========================================================
   GENERAL LAYOUT HELPERS
   Shared layout classes used across pages.
   ========================================================= */

/* THIS WRAPPER LETS THE FOOTER SIT NICELY AT THE BOTTOM WHEN NEEDED. */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* MAIN CONTENT CONTAINER USED ON THE LAYERED PAGES.
   'position: relative' is important because absolutely-positioned
   creatures/arrows/layers use this as their reference box. */
.container {
  position: relative;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

/* HEADER BANNER IMAGE. */
.imgLogo {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 1170px;
  height: auto;
  padding-left: 5%;
  padding-right: 5%;
}

/* HOME PAGE ROW OF CLICKABLE IMAGES/DOORS. */
.image-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 25px;
  flex-wrap: wrap;   /* Allows stacking on smaller screens */
}

.image-row img {
  width: 400px;
  max-width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.image-row img:hover {
  transform: scale(1.05);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  background-color: lightcyan;
  text-align: center;
  padding: 15px 0;
  color: lightslategray;
  font-size: 12px;
  line-height: 1.2;
}

.footer h6 {
  margin: 0;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.2;
}



/* =========================================================
   LAYERED ART PAGES
   These control the background/midground/foreground artwork.
   ========================================================= */

/* GIVE ALL LAYER WRAPPERS A PREDICTABLE BASE STATE. */
.layer.background,
.layer.middle,
.layer.foreground,
.layer.front {
  width: 100%;
  top: 0;
  pointer-events: none;   /* Prevent background art from blocking clicks */
}

/* BACKGROUNDS STAYS IN NORMAL PAGE FLOW. */
.layer.background {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
}

/* OTHER LAYERS SIT ON TOP OF THE BACKGROUND. */
.layer.middle {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: auto;
  top: 0;
}

.layer.foreground {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: auto;
  max-width: 100%;
  top: 0;
}

.layer.front {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: auto;
  max-width: 100%;
  top: 0;
}

/* MAKE SURE THE BACKGROUND IMAGE BEHAVES LIKE A BLOCK,
   WHICH HELPS AVOID ODD SPACING.*/
.layer.background img {
  display: block;
}

/* LAYER IMAGES FILL THEIR CONTAINER WIDTH. */
.layer img {
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* =========================================================
   MONSTERS
   Clickable monster artwork on scary pages.
   ========================================================= */

.monster {
  position: absolute;
  display: block;
  pointer-events: all;   /* Re-enable clicks for the monsters */
  z-index: 9999;
  transform: translateX(-50%);
}

.monster img {
  width: 100%;
  height: auto;
  display: block;
  min-width: 40px;
  transition: transform 0.3s;
}

.monster img:hover {
  transform: scale(1.05);
}

/* ========================================================= */
/* MONSTER POSITIONS ON SCARY2 PAGE                         */
/* ========================================================= */
/*  */
.monster.monster1 { z-index: 14; top: 66%; left: 82%; width: 17%; }  
/*  */
.monster.monster5 { z-index: 16; top: 44%; left: 36%; width: 22%; } */
/*  */
/*.monster.monster2 { z-index: 15; top: 26%; left: 92%; width: 10%; } */
/*  */
/*.monster.monster3 { z-index: 16; top: 44%; left: 20%; width: 11%; } */

/*  */
/*.monster.monster4 { z-index: 17; top: 75%; left: 90%; width: 18%; } */

/*  */
/*.monster.monster6 { z-index: 12; top: 42%; left: 37%; width: 17%; } */
/*  */
/*.monster.monster7 { z-index: 13; top: 51%; left: 60%; width: 18%; } */
/*  */
.monster.monster8 { z-index: 10; top: 53%; left: 92%; width: 15%; }  

/* ========================================================= */
/* MONSTER POSITIONS ON SCARY1 PAGE                         */
/* ========================================================= */
/* Crawlie Bug */
.monster.monster11 { z-index: 14; top: 72%; left: 22%; width: 17%; } 
/* Spot */
.monster.monster12 { z-index: 15; top: 26%; left: 92%; width: 10%; } 
/* Blarp */
.monster.monster13 { z-index: 16; top: 44%; left: 20%; width: 11%; } 
/* Alien Slug */
.monster.monster14 { z-index: 17; top: 75%; left: 90%; width: 18%; } 
/* Misty F'eyed */
.monster.monster15 { z-index: 11; top: 48%; left: 74%; width: 16%; } 
/* Ms. Boo */
.monster.monster16 { z-index: 12; top: 42%; left: 37%; width: 17%; } 
/* The Singer */
.monster.monster17 { z-index: 13; top: 51%; left: 60%; width: 18%; } 
/* Blu */
.monster.monster18 { z-index: 10; top: 53%; left: 92%; width: 15%; } 

/* =========================================================
   CREATURES
   Clickable creature artwork on sweet pages.
   ========================================================= */

.creature {
  position: absolute;
  display: block;
  pointer-events: all;   /* Re-enable clicks */
  z-index: 9999;
  transform: translateX(-50%);
}

.creature img {
  width: 100%;
  height: auto;
  display: block;
  min-width: 40px;
  transition: transform 0.3s;
}

.creature img:hover {
  transform: scale(1.05);
}

/* ========================================================= */
/* CREATURE POSITIONS ON SWEET1 PAGE                         */
/* ========================================================= */
/* piglet */
.creature.creature1 { z-index: 14; top: 56%; left: 19%; width: 15%; } 
/* skunk */
.creature.creature2 { z-index: 15; top: 68%; left: 66%; width: 17%; } 
/* porcupine  */
.creature.creature3 { z-index: 16; top: 65%; left: 42%; width: 17%; } 
/* raccoon */
.creature.creature4 { z-index: 17; top: 59%; left: 80%; width: 12%; } 
/* giraffe */
.creature.creature5 { z-index: 10; top: 41%; left: 51%; width: 16%; } 
/* zebra */
.creature.creature6 { z-index: 11; top: 44%; left: 72%; width: 17%; } 
/* owl */
.creature.creature7 { z-index: 12; top: -1.65%; left: 69.2%; width: 8.7%; } 
/* butterfly */
.creature.creature8 { z-index: 13; top: 31%; left: 22%; width: 8%; } 
/* puppy */
.creature.creature9 { z-index: 18; top: 56%; left: 59%; width: 15%; } 
/* panda */
.creature.creature10 { z-index: 19; top: 47%; left: 36%; width: 12%; } 
/* rhino */
.creature.creature20 { z-index: 19; top:48%; left:92%; width: 20%; } 

/* ========================================================= */
/* CREATURE POSITIONS ON SWEET2 PAGE                         */
/* ========================================================= */
/* elephant */
.creature.creature11 { z-index: 14; top: 47%; left: 11%; width: 23%; } 
/* beaver */
.creature.creature12 { z-index: 15; top: 72%; left: 71%; width: 14%; } 
/* cow */
.creature.creature13 { z-index: 16; top: 63%; left: 37%; width: 20%; } 
/* duckling */
.creature.creature14 { z-index: 17; top: 59%; left: 80%; width: 12%; } 
/* lion */
.creature.creature15 { z-index: 10; top: 50%; left: 60%; width: 13%; } 
/* hippo */
.creature.creature16 { z-index: 11; top: 45%; left: 29%; width: 14%; } 
/* tiger */
.creature.creature17 { z-index: 12; top: 44%; left: 84%; width: 10%; } 
/* polar bear */
.creature.creature18 { z-index: 13; top: 42%; left: 50%; width: 15%; } 
/* warthog */
.creature.creature19 { z-index: 13; top: 59%; left: 50%; width: 17%; } 


/* =========================================================
   ARROWS
   ========================================================= */

.arrow {
  position: absolute;
  display: block;
  pointer-events: all;
  z-index: 8888;
  transform: translateX(-50%);
}

.arrow img {
  width: 100%;
  height: auto;
  display: block;
  min-width: 40px;
  transition: transform 0.3s;
}

.arrow img:hover {
  transform: scale(1.05);
}

/* ARROW POSITIONS */
.arrow.right { z-index: 200; top: -0.1%; left: 94%; width: 10%; }
.arrow.left  { z-index: 210; top: -0.1%; left: 6%;  width: 10%; }
.scary.arrow.right  { z-index: 300; top: 12.5%; left: 93%;  width: 13%; }
.scary.arrow.left   { z-index: 310; top: 6.5%; left: 7%;  width: 13%; }


/* =========================================================
   TOP NAV MENU
   MOBILE-FIRST VERSION
   Base rules are for small screens first.
   ========================================================= */

.topnav {
  overflow: hidden;
  background-color: #75A7AA;
  position: relative;
}

/* ON MOBILE, HIDE REGULAR NAV LINKS BY DEFAULT.
   THE HAMBURGER ICON WILL BE SHOWN INSTEAD. */
.topnav a {
  display: none;
  color: #f2f2f2;
  text-align: left;
  padding: 10px 12px;
  text-decoration: none;
  font-size: 17px;
  line-height: 1.2;
}

/* HOVER AND ACTIVE STATES. */
.topnav a:hover {
  background: none;
  color: #196962;
}

.topnav a.active {
  background-color: #75A7AA;
  color: white;
}

/* SHOW ONLY THE HAMBURGER ICON ON SMALL SCREENS. */
.topnav a.icon {
  display: block;
  float: right;
}

/* WHEN JS ADDS THE 'responsive' CLASS, SHOW ALL LINKS STACKED.*/
.topnav.responsive a {
  display: block;
  float: none;
  text-align: left;
}

/* KEEP THE HAMBURGER PINNED AT THE TOP-RIGHT WHILE OPEN. */
.topnav.responsive .icon {
  position: absolute;
  right: 0;
  top: 0;
}


/* =========================================================
   SHOP BUTTONS
   MOBILE-FIRST VERSION
   Start smaller, then enlarge for wider screens.
   ========================================================= */

.button-container {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.image-button {
  display: block;
  width: 100%;
  max-width: 180px;   /* Small-screen default */
}

.image-button img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.2s ease;
}

/* HOVER EFFECT FOR SHOP BUTTON IMAGES. */
.shop-page .image-button img:hover {
  transform: scale(1.04);
}

/* VISIBLE KEYBOARD FOCUS. */
.image-button:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px;
}


/* =========================================================
   SHOP PAGE ONLY
   MOBILE-FIRST BASE
   These are your default small-screen styles.
   ========================================================= */

.shop-page .shop-section {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 10px 8px 10px;
}

.shop-page .shop-banner {
  text-align: center;
  margin-bottom: 8px;
}

.shop-page .shop-banner img {
  display: inline-block;
  width: 100%;
  max-width: 1170px;
  height: auto;
  margin: 0 auto;
}

.shop-page .shop-buttons {
  position: static;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.shop-page .shop-boxes {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

/* ON MOBILE, CARDS TAKE FULL WIDTH. */
.shop-page .shop-card {
  flex: 1 1 100%;
  max-width: 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shop-page .shop-card h2 {
  margin: 0 0 6px;
  text-align: center;
  font-weight: normal;
  color: #2f3b3b;
  font-size: 1.3rem;
  line-height: 1.2;
}

/* ON SMALLER SCREENS, ALLOW WRAPPING IF NEEDED. */
.shop-page .sales-card h2 {
  white-space: normal;
}

.shop-page .shop-card-body {
  border: 2px solid #5b6e70;
  border-radius: 10px;
  background: rgba(255,255,255,0.4);
  min-height: 200px;
  padding: 14px;
  flex: 1;
}

/* DESIGN OF THE MONTH BOX */
.shop-page .monthly-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-page .monthly-link {
  display: inline-block;
  width: 100%;
  max-width: 150px;
}

.shop-page .monthly-link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.shop-page .monthly-link img:hover {
  transform: scale(1.05);
}

.shop-page .sales-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.shop-page .sales-box p {
  margin: 0;
  color: black;
  font-size: 1rem;
  line-height: 1.45;
}

.shop-page .sales-box a {
  color: black;
  text-decoration: none;
  transition: all 0.2s ease;
}

.shop-page .sales-box a:hover {
  text-decoration: underline;
  color: #196962;
}


/* =========================================================
   LARGER SCREENS: 500px AND UP
   Slightly increase sizes.
   ========================================================= */

@media screen and (min-width: 500px) {
  .shop-page .image-button {
    max-width: 220px;
  }

  .shop-page .shop-card h2 {
    font-size: 1.5rem;
  }

  .shop-page .shop-card-body {
    min-height: 220px;
    padding: 16px;
  }

  .shop-page .monthly-link {
    max-width: 170px;
  }

  .shop-page .sales-box p {
    font-size: clamp(15px, 1.2vw, 20px);
  }
}


/* =========================================================
   LARGER SCREENS: 600px AND UP
   Switch nav from hamburger to full desktop menu.
   ========================================================= */

@media screen and (min-width: 600px) {
  /* SHOW NAV LINKS NORMALLY. */
  .topnav a {
    display: block;
    float: left;
    text-align: center;
    padding: 7px 8px;
  }

  /* HIDE HAMBURGER ICON ON LARGER SCREENS. */
  .topnav a.icon {
    display: none;
  }
}


/* =========================================================
   LARGER SCREENS: 700px AND UP
   Move closer to desktop layout.
   ========================================================= */

@media screen and (min-width: 700px) {
  .shop-page .shop-section {
    padding: 12px 10px 10px;
  }

  .shop-page .shop-banner {
    margin-bottom: 4px;
  }

  .shop-page .shop-buttons {
    gap: 0.75rem;
    margin-bottom: 18px;
  }

  .shop-page .shop-boxes {
    gap: 24px;
  }

  .shop-page .image-button {
    max-width: 260px;
  }

  .shop-page .image-button img {
    transition: transform 0.3s ease;
  }

  .shop-page .image-button img:hover {
    transform: scale(1.05);
  }

  /* Let cards sit side by side on larger screens */
  .shop-page .shop-card {
    flex: 1 1 360px;
  }

  /* Restore your desktop-ish heading sizing */
  .shop-page .shop-card h2 {
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
  }

  .shop-page .shop-card-body {
    min-height: 250px;
    padding: 18px;
  }

  .shop-page .monthly-link {
    max-width: 190px;
  }

  /* On larger screens, keep this title on one line */
  .shop-page .sales-card h2 {
    white-space: nowrap;
  }
}


.home-tagline-img {
  display: block;
  margin: 20px auto 5px;
  width: 120%;
  max-width: 700px;
  height: auto;
}

.home-subtext {
  text-align: center;
  margin: 0 auto 10px;
  max-width: 700px;
  color: lightslategray;
  opacity: 0.85;
  line-height: 1.5;
  font-size: clamp(0.75rem, 1.8vw, 1rem);
  padding: 0 8px;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
}

.sale-text {
  margin: 0 0 10px 0;
  text-align: center;
}

.sale-banner {
  display: block;
  text-align: center;
}

.sale-banner img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
.sales-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

#vote-section {
  width: 100%;
}

#vote-section p {
  margin: 0 0 10px;
}

#vote-section a {
  display: inline-block;
  margin-bottom: 8px;
}