/* ===========================
   🌸 THEME VARIABLES
   =========================== */
:root {
  /* 🌈 General Colors */
  --paper-color: #fffafc;
  --accent: #f7a8c9;
  --text: #4b2e5a;
  --border-color: #f2bad4;
  --shadow: rgba(0, 0, 0, 0.1);

  /* 🖼️ Background Images */
  --bg-pattern: url('Scrapbook/assets/Images/charmme.jpeg'); /* Page background */
  --header-paper: url('Scrapbook/assets/Images/forevermine.jpeg'); /* Header background */
  --navbar-bg: url(''); /* Navbar background (optional) */
  --container-bg: url('Scrapbook/assets/Images/paper.jpeg'); /* Main container background */
  --sidebar-bg-img: url(''); /* Sidebar pattern/image */
  --main-bg-img: url(''); /* Main content background */
  --footer-bg: url(''); /* Footer background image */

  /* 🎁 Sidebar + Box Colors */
  --sidebar-bg: #ffeef7;
  --box-bg: #fff0f6;
}

/* ===========================
   🎀 CUSTOM FONTS
   =========================== */
@font-face {
  font-family: 'Ginga';
  src: url('assets/fonts/Ginga-r09p.ttf') format('truetype');
}
@font-face {
  font-family: 'ThankYouStamp';
  src: url('assets/fonts/KGThankYouStamp.ttf') format('truetype');
}
@font-face {
  font-family: 'PersonaMenu';
  src: url('assets/fonts/Persona5MenuFontPrototype-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Dreamer';
  src: url('assets/fonts/TheDreamer-EZ1e.otf') format('opentype');
}

/* ===========================
   💕 BODY & PAGE BACKGROUND
   =========================== */
body {
  font-family: 'Dreamer', sans-serif;
  font-size: 1.5em;
  color: var(--text);
  background-image: var(--bg-pattern);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
}

/* ===========================
   HEADERS
   =========================== */
h1 {
  font-family: 'ThankYouStamp', cursive;
  font-size: 1.5em;
  letter-spacing: 1px;
}
h2 {
  font-family: 'PersonaMenu', sans-serif;
  font-size: 1.5em;
  letter-spacing: 0.5px;
  border-bottom: 2px dotted var(--border-color);
  padding-bottom: 5px;
}
h3, .subheader {
  font-family: 'Ginga', cursive;
  font-size: 1em;
}

/* ===========================
   NAVBAR
   =========================== */
#navbar {
  background-color: #ffd8ec;
  background-image: var(--navbar-bg);
  background-size: cover;
  background-position: center;
  border-top: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
  padding: 10px 0;
}
#navbar ul {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  margin: 0;
  padding: 0;
}
#navbar a {
  color: #b34a7d;
  text-decoration: none;
  font-weight: bold;
  font-family: 'PersonaMenu', sans-serif;
}
#navbar a:hover {
  color: #e56c98;
  text-decoration: underline wavy;
}

/* ===========================
   LAYOUT CONTAINER
   =========================== */
#container {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--paper-color);
  background-image: var(--container-bg);
  background-size: cover;
  background-position: center;
  border: 3px dashed var(--border-color);
  border-radius: 8px;
  box-shadow: 0 0 15px var(--shadow);
}

/* ===========================
   HEADER SECTION
   =========================== */
#header {
  background-image: var(--header-paper);
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 40px 10px;
  color: #fff;
  border-bottom: 2px solid var(--border-color);
}
#header h1 {
  font-size: 2em;
  margin: 0;
  text-shadow: 2px 2px var(--accent);
}
#header p {
  margin: 5px 0 0;
  font-style: italic;
}

/* ===========================
   TOP BAR
   =========================== */
#topBar {
  background-color: var(--accent);
  color: #fff;
  text-align: center;
  padding: 5px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
}

/* ===========================
   FLEX LAYOUT
   =========================== */
#flex {
  display: flex;
  flex-wrap: wrap;
}

/* ===========================
   SIDEBAR
   =========================== */
aside {
  width: 200px;
  background-color: var(--sidebar-bg);
  background-image: var(--sidebar-bg-img);
  background-size: cover;
  background-position: center;
  padding: 15px;
  margin: 10px;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  box-shadow: 2px 2px 8px var(--shadow);
}

/* ===========================
   MAIN CONTENT
   =========================== */
main {
  flex: 1;
  background-color: var(--paper-color);
  background-image: var(--main-bg-img);
  background-size: cover;
  background-position: center;
  padding: 20px;
  margin: 10px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 2px 2px 10px var(--shadow);
}

/* ===========================
   SIDEBAR BOXES
   =========================== */
.box {
  background-color: var(--box-bg);
  border: 2px dotted var(--border-color);
  padding: 10px;
  border-radius: 8px;
  box-shadow: inset 0 0 6px #fff;
}

/* ===========================
   LINKS
   =========================== */
a {
  color: #d46ba2;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline wavy #d46ba2;
}

/* ===========================
   FOOTER
   =========================== */
#footer {
  background-color: #ffd8ec;
  background-image: var(--footer-bg);
  background-size: cover;
  background-position: center;
  color: #6c466b;
  text-align: center;
  padding: 10px;
  border-top: 2px solid var(--border-color);
  border-radius: 0 0 8px 8px;
  font-size: 14px;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */
@media (max-width: 800px) {
  aside {
    width: 100%;
  }
  main {
    order: 1;
  }
}