<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Viktoria Liiv — My Book Blog</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=League+Script&family=Libertinus+Serif+Display&family=Monsieur+La+Doulaise&display=swap" rel="stylesheet">
  <style>
    /* --- Base Reset --- */
    * { box-sizing: border-box; margin:0; padding:0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Libertinus Serif Display', serif; background-color:#f7f3ef; color:#3e2f25; line-height:1.7; }

    /* --- Header --- */
    #header { background-color:#d8c3a5; padding:20px; position:sticky; top:0; width:100%; z-index:10; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
    #header h1 { font-family:'Monsieur La Doulaise', cursive; font-size:2.3rem; text-align:center; color:#3e2f25; }

    /* --- Navigation --- */
    #navLinks { display:flex; justify-content:center; gap:20px; margin-top:10px; flex-wrap:wrap; }
    #navLinks a { font-family:'League Script', cursive; color:#4a3728; font-size:1.1rem; text-decoration:none; transition: all 0.2s ease; }
    #navLinks a:hover, #navLinks a.active { color:#7b5a43; }

    /* --- Main Content --- */
    .main { padding:2em; margin:1.5em auto; max-width:1024px; background-color:#fffaf3; border-radius:12px; box-shadow:0 4px 10px rgba(62,47,37,0.1); }
    .textPage { max-width:800px; margin:0 auto; }

    h2, h3 { font-family:'League Script', cursive; color:#5c4033; }
    h2 { font-size:1.8rem; margin-bottom:0.5em; border-bottom:2px solid #d8c3a5; padding-bottom:0.3em; }
    h3 { margin-top:1.5em; font-size:1.25rem; }

    p, li { font-family:'Libertinus Serif Display', serif; margin:0.5em 0; }

    /* --- Book Cards --- */
    .book { background:#f3e5ab; border-left:5px solid #b08968; padding:1em 1.5em; margin:1.2em 0; border-radius:8px; transition:all 0.3s ease; }
    .book:hover { background:#f8ead8; transform:translateY(-3px); }

    /* --- Footer --- */
    #footer { text-align:center; padding:20px; background-color:#d8c3a5; color:#3e2f25; font-size:0.9rem; border-top:1px solid #b08968; }

    /* --- Gallery --- */
    .gallery { padding-top:1em; columns:auto 3; text-align:center; }
    .gallery img { border:2px solid #d2b48c; width:100%; border-radius:8px; transition:all 0.3s ease; }
    .gallery img:hover { transform:scale(1.02); }

    /* --- Responsive --- */
    @media(max-width:800px) { .gallery { columns:auto 2; } h2 { font-size:1.5rem; } }
    @media(max-width:500px) { .gallery { columns:auto 1; } #header h1 { font-size:1.8rem; } }
  </style>
</head>
<body>

  <!-- Header -->
  <div id="header">
    <h1>Viktoria Liiv</h1>
    <div id="navLinks">
      <a href="#books" class="active">Books</a>
      <a href="#tbr">To Be Read</a>
      <a href="#about">About Me</a>
    </div>
  </div>

  <!-- Main Content -->
  <div class="main textPage">

    <!-- Books Section -->
    <section id="books">
      <h2>Books</h2>

      <div class="book">
        <h3>Jane Eyre — Charlotte Brontë</h3>
        <p><strong>Genre:</strong> Classic, Romance | <strong>Published:</strong> 1847 | <strong>Pages:</strong> 500</p>
        <p><strong>My rating:</strong> 8/10</p>
        <p>Jane Eyre is a timeless classic that combines romance, mystery, and the journey of self-discovery. Jane's strength and determination make this story unforgettable.</p>
        <p><strong>Why I gave it 8/10:</strong> I loved the character development, but some parts were slow-paced.</p>
      </div>

      <div class="book">
        <h3>The Secret History — Donna Tartt</h3>
        <p><strong>Genre:</strong> Psychological Fiction, Mystery | <strong>Published:</strong> 1992 | <strong>Pages:</strong> 559</p>
        <p><strong>My rating:</strong> 9/10</p>
        <p>A haunting novel exploring intellect, obsession, and morality. Captivating characters and a slow-burning mystery kept me hooked.</p>
        <p><strong>Why I gave it 9/10:</strong> Atmosphere and philosophical themes were brilliant; some parts felt heavy.</p>
      </div>

    </section>

    <!-- To Be Read Section -->
    <section id="tbr">
      <h2>To Be Read — My Future Reads</h2>
      <p>These are the stories I plan to explore soon — the ones that inspire me, challenge me, or make me curious.</p>

      <div class="book">
        <h3>The Goldfinch — Donna Tartt</h3>
        <p>After reading The Secret History, I’m eager to explore more of Tartt’s work. A story about art, loss, and identity.</p>
      </div>

      <div class="book">
        <h3>Anna Karenina — Leo Tolstoy</h3>
        <p>A Russian classic I’ve been meaning to read for years. Love, society, and tragedy.</p>
      </div>

      <div class="book">
        <h3>Little Women — Louisa May Alcott</h3>
        <p>A heartwarming story about family and growing up. I’m especially curious about Jo March.</p>
      </div>

      <div class="book">
        <h3>If We Were Villains — M.L. Rio</h3>
        <p>Dark academia story with Shakespeare, theatre, and mystery. Sounds intoxicating!</p>
      </div>

      <div class="book">
        <h3>The Night Circus — Erin Morgenstern</h3>
        <p>Magical, dreamlike, and enchanting. I’m saving it for a touch of wonder.</p>
      </div>

      <div class="book">
        <h3>The Picture of Dorian Gray — Oscar Wilde</h3>
        <p>A story about beauty, vanity, and the cost of desire. Time to finally read the full novel.</p>
      </div>
    </section>

    <!-- About Me Section -->
    <section id="about">
      <h2>About Me</h2>
      <p>My name is Viktoria Liiv, I’m 19 years old, from Tallinn. I’ve been reading books my entire life. My journey began with <em>The Chronicles of Narnia</em> series, which opened the door to countless stories and worlds.</p>
      <p>I created this site to share my reviews and thoughts about books I’ve read, and to keep track of the ones I’m excited to explore next. Books have always been a central part of who I am, and I hope to inspire others to discover new favorites too.</p>
    </section>

  </div>

  <!-- Footer -->
  <div id="footer">
    &copy; 2025 Viktoria Liiv — My Book Blog
  </div>

</body>
</html>