/* ===== load custom font ===== */
@font-face {
  font-family: "Pixolletta";
  src: url("fonts/Pixolletta8px.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "FindersKeepers";
  src: url("fonts/finderskeepers.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}







/* ===== full-page border ===== */
body {
  background: #b7a7b3;            /* muted pinky purple */
  margin: 1px;
  border: 8px solid #000;         /* big outer page border */
  font-family: "finderskeepers", Arial, Helvetica, sans-serif;
  font-size: 14px;                  /* ultra-small text */
  line-height: 1.05;
  color: #2a1a2a;
}




/* ===== centerpiece graphic ===== */
#centerpiece-graphic {
  width: 100%;                   /* full page width */
  display: flex;
  justify-content: center;       /* center horizontally */
  margin: 10px 0;                /* spacing above and below */
  position: relative;
  z-index: 1;
}

#centerpiece-graphic img {
  max-width: 90%;               /* scale down slightly for responsiveness */
  height: auto;                 /* maintain aspect ratio */
  display: block;
  border: 0px solid #000;       /* optional retro border */
  box-shadow: 0 0 6px rgba(0,0,0,0.3); /* subtle shadow for depth */
}












/* ===== compact header graphic ===== */
#header-graphic {
  width: 100%;
  height: 250px;                  /* smaller header */
  background: url('images/header-big.png') no-repeat center top;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  padding-top: 10px;              /* space above heading */
  color: #f6e9f6;
  overflow: visible;              /* allow heading to hang outside */
}

/* ===== header text aligned near container center ===== */
#header-graphic h1 {
  font-family: Georgia, serif;
  font-size: 70px;               
  font-weight: normal;
  letter-spacing: -2px;
  margin: 0;
  position: relative;
  top: 180px;                 /* move heading down closer to container */
  left:55%;                    /* start at page center */
  transform: translateX(-170px);   /* center over 380px container, slightly off-center */
  text-shadow: 
      0 0 2px #fff,               /* subtle white glow / keyline */
      0 0 4px rgba(255,255,255,0.5);
  display: inline-block;
}

#header-graphic .v { font-style: italic; }

#header-graphic .tagline {
  font-size: 10px;
  position: relative;
  top: 150px;
  left: 50%;
  transform: translateX(-188px);  /* align tagline under heading */
}






/* ===== main content container ===== */
#container {
  width: 380px;                     /* ultra-skinny content */
  margin: 0 auto;
  background-color: #f5eef5;
  border: 2px solid #000;           /* thin inner border */
  padding: 2px;
}

/* ===== content layout ===== */
#content {
  display: flex;
  flex-direction: row;
}

/* ===== sidebar ===== */
#sidebar {
  width: 70px;                      /* skinny vertical navigation */
  padding: 2px;
  text-align: center;
  border-right: 0px dotted #000;
  font-size:10px;
  font-family: "finderskeepers", Arial, sans-serif;
}
/* ===== boxed sidebar navigation header ===== */
#sidebar h3 {
  font-family: Georgia, serif;       /* match post headers */
  font-size: 12px;
  font-weight: normal;
  letter-spacing: -0.7px;
  color: #f6e9f6;
  background-color: #5b2f5f;        /* boxed header color */
  padding: 0px 0;                  /* tight padding inside box */
  display: inline-block;             /* box fits text width */
  margin-bottom: 0;
}

#sidebar h3 .v { font-style: italic; } /* if you want italic vowels */


#sidebar ul {
  margin: -.5px 0;
  padding-left: 0px;
}

#sidebar li {
  margin-bottom: 1px;
}

/* ===== main blog area ===== */
#main {
  flex: 1;                          /* remaining width (~310px) */
  padding: 15px;
  font-family: "finderskeepers", Arial, sans-serif;
  text-size: 10px;
}

/* ===== posts ===== */
.post {
  border: 1px solid #000;           /* thin border around each post */
  padding: 0px;
  text-align: center;
  margin-bottom: 4px;
  background-color: #f3e9f1;
  text-shadow: 0 0 0.5px #c6a6c6;  /* subtle CRT/retro effect */
  font-family: "finderskeepers", Arial, sans-serif;
}








.post h2 {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: -1.5px;
  text-align: center;
  margin: 0 0 2px 0;             /* small margin below the box */
  color: #f6e9f6;                /* text color */
  background-color: #5b2f5f;     /* muted dark pink/purple box */
  padding: 0px 0px;            /* tight padding inside the box */
  display: inline-block;    
  /* box only covers text width */
}

.post h2 .v { font-style: italic; }
/* italic vowels */


.post p {
  font-size: 10px;
  line-height: 1.05;
}
/* ===== meta / date text ===== */
.date, .small {
  font-size: 9px;
  color: #5a3b5e;
  text-align: center;
  margin-bottom: 0px;
}

/* ===== links ===== */
a {
  color: #5b2f5f;
  text-decoration: none;
  display: inline-block;
  padding: 0 1px;
  transition: transform 0.1s ease, background-color 0.1s ease, color 0.1s ease, text-transform 0.1s ease, letter-spacing 0.1s ease;
}

a:hover {
  transform: scale(1.5);         /* extra-large hover */
  background-color: #3a183d;       /* inverted dark purple */
  color: #f6e9f6;
  text-transform: uppercase;       /* capitalize letters */
  letter-spacing: -0.5px;          /* tighter spacing */
}



/* header link: no hover effects */
#header-graphic a.header-link {
  color: inherit;           /* same color as heading */
  text-decoration: none;    /* no underline */
  pointer-events: auto;     /* still clickable */
}

#header-graphic a.header-link:hover {
  color: inherit;           /* do not change color on hover */
  background: none;         /* no background change */
  transform: large;    /* no scale/transform */
  text-transform: none;     /* keep original case */
  letter-spacing: normal;   /* no letter spacing change */
}

/* ===== header link hover effect ===== */
#header-graphic a.header-link:hover {
  text-transform: none;    /* uppercase letters */
  transform: scale(1.15);       /* slightly larger */
  letter-spacing: -0.5px;       /* tighter spacing */
  color: #f6e9f6;               /* hover color */
  
  /* sparkly/glitter effect */
  text-shadow:
     0 0 1px #fff,
     0 0 2px #ffeafa,
     0 0 3px #ffdfff,
     0 0 4px #ffb6ff;

  transition: all 0.2s ease;    /* smooth animation */
}

/* Optional: animated sparkle */
@keyframes sparkle {
  0%, 100% { text-shadow: 0 0 1px #fff, 0 0 2px #ffeafa, 0 0 3px #ffdfff, 0 0 4px #ffb6ff; }
  50% { text-shadow: 0 0 2px #fff, 0 0 4px #ffeafa, 0 0 6px #ffdfff, 0 0 8px #ffb6ff; }
}

#header-graphic a.header-link:hover {
  animation: sparkle 0.4s infinite alternate;
}














#sidebar {
  display: flex;
  flex-direction: column;  /* stack everything vertically */
  width: 70px;                      
  padding: 2px;
  text-align: center;
  border-right: 1px dotted #000;
  font-size: 11px;
  font-family: "finderskeepers", Arial, sans-serif;
}

/* Make all ul lists stack normally */
#sidebar ul {
  padding: 0;
  margin: 2px 0;
  list-style: none;
}

/* Make links block-level so they stack inside the ul */
#sidebar ul li a {
  display: block;
  font-family: "finderskeepers", Arial, sans-serif;
  font-size: 10px;
  color: #5b2f5f;
  text-decoration: none;
  padding: 1px 2px;
  transition: all 0.0s ease;
}

#sidebar ul li a:hover {
  color: #3a183d;
  text-transform: uppercase;
  background-color: rgba(91, 47, 95, 0.2); /* subtle highlight */
  letter-spacing: -0.5px;
}


#secondary-dropdown {
  width: 100%;           /* fills the sidebar width */
  font-family: "finderskeepers", Arial, sans-serif;
  font-size: 9px;
  margin-top: -0px;
  padding: 0px;
   height: 15px;         /* controls visible height of the dropdown box */
}

.custom-dropdown {
  width: 70px; /* same as sidebar */
  font-family: "finderskeepers", Arial, sans-serif;
  font-size: 9px;
  position: relative;
  margin-top: 3px;
}

.dropdown-preview {
  background-color: #f5eef5;
  padding: 2px;
  cursor: pointer;
  border: 1px solid #000;
  text-align: center;
}




.dropdown-list {
  display: none;       /* hidden by default */
  position: relative;  /* stacked under preview */
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 50px;    /* controls expanded height */
  overflow-y: auto;    /* scroll if too many items */
  border: 1px solid #000;
  background-color: #f5eef5;
}

.dropdown-list li a {
  display: block;
  padding: 1px;
  color: #5b2f5f;
  text-decoration: none;
}

.dropdown-list li a:hover {
  color: #3a183d;
  text-transform: uppercase;
}





/* ===== new section container ===== */
#new-section {
  width: 380px;              /* match main container width */
  margin: 6px auto 0 auto;   /* spacing above and centered */
  border: 2px solid #000;    /* thin border around the new box */
  background-color: #f5eef5; /* retro muted background */
  text-align: center;
  padding: 2px;
  font-family: "finderskeepers", Arial, sans-serif;
  font-size: 10px;           /* small text */
}

/* ===== section header ===== */
#new-section .section-header {
  font-family: Georgia;
  font-size: 14px;
  font-weight: normal;
  
  letter-spacing: -0.7px;
  color: #f6e9f6;
  background-color: #5b2f5f; /* boxed background */
  padding: 1px 1px;
  display: inline-block;      /* box only covers text */
  margin-bottom: 4px;
}

/* ===== section content ===== */
#new-section .section-content p {
  margin: 2px 0;
  text-align: center;
  line-height: 1.05;
  font-size: 9px;             /* small retro text */
  color: #2a1a2a;
}








body {
  background-color: #b7a7b3; /* muted pinky purple */
  background-image: url('images/background.png'); /* your image path */
  background-repeat: no-repeat;
  background-position: left bottom; /* bottom-left alignment */
  background-attachment: scroll;    /* scrolls with content */
  background-size: auto;            /* keeps original size */
  margin: 0;
  font-family: "finderskeepers", Arial, sans-serif;
  font-size: 10px;
}








#slideshow {
  width: 380px;               /* matches your content width */
  height: 120px;              /* adjust to your image height */
  margin: 6px auto;           /* centered below other content */
  overflow: hidden;           /* hides extra images */
  border: 2px solid #000;     /* thin border for retro look */
  background-color: #f5eef5;
  position: relative;
}

#slideshow .slides {
  display: flex;              /* lay images side by side */
  width: calc(380px * 12);    /* 12 images total */
  animation: slide 24s infinite linear;
}

#slideshow .slides img {
  width: 380px;               /* match container width */
  height: 120px;              /* match container height */
  flex-shrink: 0;
}

/* ===== slideshow animation ===== */
@keyframes slide {
  0% { transform: translateX(0); }
  8.33% { transform: translateX(0); }
  16.66% { transform: translateX(-380px); }
  25% { transform: translateX(-380px); }
  33.33% { transform: translateX(-760px); }
  41.66% { transform: translateX(-760px); }
  50% { transform: translateX(-1140px); }
  58.33% { transform: translateX(-1140px); }
  66.66% { transform: translateX(-1520px); }
  75% { transform: translateX(-1520px); }
  83.33% { transform: translateX(-1900px); }
  91.66% { transform: translateX(-1900px); }
  100% { transform: translateX(0); }
}





#container {
  position: relative; /* add this */
  width: 380px;
  margin: 0 auto;
  background-color: #f5eef5;
  border: 2px solid #000;
  padding: 2px;
}

#corner-sticker {
  position: absolute;
  top: -10px;        /* sits slightly above container */
  left: -10px;       /* sits slightly off the left edge */
  width: 40px;
  height: 40px;
  z-index: 10;
}