/* Theme Variables */
  :root {
    /* Default theme (now Vintage Enhanced) */
    --bg-color: #f9f3eb;
    --text-color: #2a211a;
    --container-bg: #fdf9f1;
    --heading-color: #4d2f1f;
    --intro-color: #4a3629;
    --item-bg: #fbf7ef;
    --accent-color: #b8a085;
    --accent-light: #d4c2a8;
    --accent-dark: #6b4529;
    --accent-hover: #5a3820;
    --border-color: #eae0d1;
    --counter-bg: #ffffff;
    --counter-text: #4d2f1f;
    --link-border: #c8a47a;
    --footer-color: #6a5d52;

    /* Dark mode colors */
    --dark-bg: #322b21;
    --dark-text: #ede5d9;
    --dark-container: #29231b;
    --dark-heading: #d9bb98;
    --dark-intro: #cfc2b2;
    --dark-item-bg: #2c261d;
    --dark-border: #4d3e2f;
    --dark-accent: #bb9678;
    --dark-accent-hover: #ceb099;
    --dark-footer: #a99882;
  }
  
  
  
  .theme-literary-original-green {
    --bg-color: #f7f7f2;
    --text-color: #222;
    --container-bg: #fff;
    --heading-color: #2c3e50;
    --intro-color: #555;
    --item-bg: #fcfcfc;
    --accent-color: #7a9a7a;
    --accent-light: #b8c9b8;
    --accent-dark: #5b7b5b;
    --accent-hover: #3c5c3c;
    --border-color: #e1e1e1;
    --counter-bg: var(--accent-color);
    --counter-text: white;
    --link-border: #cad8ca;
    --footer-color: #777;

    /* Dark mode colors */
    --dark-bg: #2c3033;
    --dark-text: #e1e1e1;
    --dark-container: #20252a;
    --dark-heading: #d3e0d3;
    --dark-intro: #c7c7c7;
    --dark-item-bg: #282e33;
    --dark-border: #444;
    --dark-accent: #9ab79a;
    --dark-accent-hover: #b8c9b8;
    --dark-footer: #999;
  }

  /* Literary Theme - Vintage Enhanced */
  .theme-literary-vintage-enhanced {
    --bg-color: #f9f3eb;
    --text-color: #2a211a;
    --container-bg: #fdf9f1;
    --heading-color: #4d2f1f;
    --intro-color: #4a3629;
    --item-bg: #fbf7ef;
    --accent-color: #b8a085;
    --accent-light: #d4c2a8;
    --accent-dark: #6b4529;
    --accent-hover: #5a3820;
    --border-color: #eae0d1;
    --counter-bg: #ffffff;
    --counter-text: #4d2f1f;
    --link-border: #c8a47a;
    --footer-color: #6a5d52;

    /* Dark mode colors */
    --dark-bg: #322b21;
    --dark-text: #ede5d9;
    --dark-container: #29231b;
    --dark-heading: #d9bb98;
    --dark-intro: #cfc2b2;
    --dark-item-bg: #2c261d;
    --dark-border: #4d3e2f;
    --dark-accent: #bb9678;
    --dark-accent-hover: #ceb099;
    --dark-footer: #a99882;
  }

  /* Romance Theme - Enhanced Contrast */
  .theme-romance-enhanced {
    --bg-color: #faf0f4;
    --text-color: #4a3a3a;
    --container-bg: #fff9fb;
    --heading-color: #b85570;
    --intro-color: #5d4d4d;
    --item-bg: #fff4f8;
    --accent-color: #d19faf;
    --accent-light: #f0c9d6;
    --accent-dark: #a85570;
    --accent-hover: #924a60;
    --border-color: #f0d6df;
    --counter-bg: #ffffff;
    --counter-text: #b85570;
    --link-border: #d19faf;
    --footer-color: #7a6a6a;

    /* Dark mode colors */
    --dark-bg: #3a2830;
    --dark-text: #f7e8ed;
    --dark-container: #4a343c;
    --dark-heading: #f0c9d6;
    --dark-intro: #e5d6dc;
    --dark-item-bg: #42303a;
    --dark-border: #634a56;
    --dark-accent: #e5bbc7;
    --dark-accent-hover: #f0c9d6;
    --dark-footer: #b8a0aa;
  }

  /* Action/Adventure Theme - Rust Enhanced */
  .theme-action-rust-enhanced {
    --bg-color: #fff8f5;
    --text-color: #1a1a1a;
    --container-bg: #fff;
    --heading-color: #7d2a15;
    --intro-color: #333;
    --item-bg: #fffaf8;
    --accent-color: #d19a88;
    --accent-light: #f0d2c7;
    --accent-dark: #8b2f1a;
    --accent-hover: #6b2314;
    --border-color: #f0d2c7;
    --counter-bg: #ffffff;
    --counter-text: #7d2a15;
    --link-border: #d19a88;
    --footer-color: #5a5a5a;

    /* Dark mode colors */
    --dark-bg: #3a2218;
    --dark-text: #ffeee7;
    --dark-container: #4b2c1f;
    --dark-heading: #e88e6a;
    --dark-intro: #ffe0d1;
    --dark-item-bg: #42261b;
    --dark-border: #a84e32;
    --dark-accent: #e07a54;
    --dark-accent-hover: #e88e6a;
    --dark-footer: #e7b5a5;
  }

  /* Mystery Theme - Enhanced */
  .theme-mystery-enhanced {
    --bg-color: #f3f1f5;
    --text-color: #1a1a1a;
    --container-bg: #fff;
    --heading-color: #380e6b;
    --intro-color: #333;
    --item-bg: #f8f7fa;
    --accent-color: #512da8;
    --accent-light: #9c88d4;
    --accent-dark: #3d1a85;
    --accent-hover: #2e1065;
    --border-color: #d1c4e9;
    --counter-bg: #3d1a85;
    --counter-text: white;
    --link-border: #b794db;
    --footer-color: #5a5a5a;

    /* Dark mode colors */
    --dark-bg: #23192d;
    --dark-text: #ede7f6;
    --dark-container: #32234a;
    --dark-heading: #b39ddb;
    --dark-intro: #ede7f6;
    --dark-item-bg: #2a1e3c;
    --dark-border: #4a148c;
    --dark-accent: #9575cd;
    --dark-accent-hover: #b39ddb;
    --dark-footer: #b39ddb;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    padding: 0;
    margin: 0;
  }
  
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: var(--container-bg);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  }
  
  header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
  }
  
  h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 2.1rem;
    color: var(--heading-color);
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 60px;;
  }
  
  .intro {
    max-width: 700px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--intro-color);
  }
  
  ol {
    counter-reset: author-counter;
    list-style: none;
    padding: 0;
    margin-top: 40px;
  }
  
  li {
    position: relative;
    margin-bottom: 60px;
    padding: 30px;
    border-left: 3px solid var(--accent-light);
    background-color: var(--item-bg);
    transition: all 0.3s ease;
  }
  
  li:hover {
    border-left-color: var(--accent-color);
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  }
  
  li::before {
    counter-increment: author-counter;
    content: counter(author-counter);
    position: absolute;
    left: -15px;
    top: 20px;
    width: 30px;
    height: 30px;
    background-color: var(--counter-bg);
    color: var(--counter-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .author-name,
.book-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent-dark);
    margin-bottom: 15px;
    padding-bottom: 10px;
margin-left: 7px;
margin-right: 7px;
  }

li > p:first-of-type {
    margin-top: 25px;
}
  
  p {
    margin-bottom: 15px;
    font-size: 1.15rem;
    line-height: 1.7;
  }
  
  a {
    color: var(--accent-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--link-border);
    transition: all 0.3s ease;
  }

  i{
    color: var(--accent-dark);
  }
  
  a:hover {
    color: var(--accent-hover);
    border-color: var(--accent-hover);
  }
  
  .footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-style: italic;
    color: var(--footer-color);
  }
  
  /* Dark mode toggle */
  .mode-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    z-index: 100;
  }
  
  .toggle-switch {
    position: relative;
    width: 60px;
    height: 34px;
    margin-left: 10px;
  }
  
  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: var(--accent-color);
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  /* Dark mode styles */
  body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
  }
  
  body.dark-mode .container {
    background-color: var(--dark-container);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  
  body.dark-mode h1 {
    color: var(--dark-heading);
  }
  
  body.dark-mode .intro {
    color: var(--dark-intro);
  }
  
  body.dark-mode li {
    background-color: var(--dark-item-bg);
    border-left-color: var(--accent-dark);
  }
  
  body.dark-mode li:hover {
    border-left-color: var(--accent-color);
  }
  
  body.dark-mode .author-name {
    color: var(--dark-heading);
    border-bottom-color: var(--dark-border);
  }
  
  body.dark-mode a {
    color: var(--dark-accent);
    border-bottom-color: var(--accent-dark);
  }
  
  body.dark-mode a:hover {
    color: var(--dark-accent-hover);
    border-color: var(--dark-accent-hover);
  }
  
  body.dark-mode .footer {
    border-top-color: var(--dark-border);
    color: var(--dark-footer);
  }
  
  @media (max-width: 768px) {
    .container {
      padding: 30px 15px;
    }
    
    h1 {
      font-size: 2rem;
      margin-top: 50px;
    }
    
    .author-name {
      font-size: 1.9rem;
    }
    
    li {
      padding: 20px;
    }
    #modeLabel{
      color: #777777;
      font-size: 0.9rem;
  }
  p{
    font-size: 1.2rem;
  }
}

div.container > p:first-of-type {
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
}