<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Miko Iino Profile</title>
  <link rel="stylesheet" href="lolol.css">
  <style>
    body {
      background-image: url("background2.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      color: #000;
      font-family: Arial, sans-serif;
      padding: 20px;
      line-height: 1.6;
    }

    /* Navigation Bar */
    .topnav {
      overflow: hidden;
      background-color: #333;
    }

    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    .topnav .active {
      background-color: #04AA6D;
      color: white;
    }

    .content {
      max-width: 900px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border-radius: 10px;
      text-align: center;
    }

    h1 {
      font-size: 2em;
      margin-bottom: 0.3em;
    }

    .section-title {
      font-size: 1.5em;
      margin-top: 30px;
      color: #222;
    }

    img {
      margin: 10px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>

  <!-- Navigation Bar -->
  <div class="topnav" id="myTopnav">
    <a href="index.html" class="active">Home</a>
    <a href="news.html">News</a>
    <a href="imagegallery.html">Image Gallery</a>
    <a href="music.html">Music</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

  <!-- Content -->
  <div class="content">
    <h1>Miko Iino</h1>

    <p><strong>Profile</strong> | <strong>Relationships</strong> | <strong>Image Gallery</strong></p>

    <img src="Miko Iino.jpg" alt="Miko Iino Portrait" width="280" height="280">
    <img src="images (47).jpeg" alt="Miko Iino Full Body" width="200" height="360">

    <p><strong>Kanji:</strong> 伊井野 ミコ<br>
    <strong>Romaji:</strong> Iino Miko</p>

    <div class="section-title">Character Overview</div>
    <p><strong>Miko Iino</strong> (伊井野 ミコ, Iino Miko) is one of the main characters in the series. She's a freshman at Shuchi'in High School and serves as the Student Council auditor.</p>

    <div class="section-title">Origin</div>
    <p>Miko is based on Ishidzukuri no Miko from *The Tale of the Bamboo Cutter*, the suitor tasked with retrieving the Stone Begging Bowl of the Buddha.</p>

    <div class="section-title">Appearance</div>
    <p>Miko is a petite girl with long brown hair styled in low twin tails and brown eyes. She wears a yellow armband and the standard girl’s uniform.</p>

    <div class="section-title">Personality</div>
    <p>Miko is justice-driven and has a strict moral compass. She’s socially awkward, struggles with stage fright, and often uses affirmations from her phone to feel validated. She’s quite different online, using emoticons heavily.</p>
    <p>She can eat a surprising amount and is very hardworking, though her obsession with order makes her unpopular. Still, she remains strong and rarely shows her emotions publicly.</p>

    <div class="section-title">History</div>
    <p>Miko’s parents have prestigious jobs, leaving her lonely and inspiring her strict sense of justice. In middle school, she enforced rules diligently but was isolated because of it. A kind letter and flower she received during that time inspired her ideal of pure love.</p>
    <p>Despite losing elections, she never gives up. After one such loss, she’s invited by Shirogane to become Student Council auditor. She constantly clashes with Ishigami, though their relationship begins to soften during the Cultural Festival when he cheers her up with photos and a symbolic pendant.</p>
  </div>

</body>
</html>