<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kokomi Teruhashi Shrine</title>
    <style>
        :root {
            --main-bg-color: #255db3;
            --accent-color: #447edb;
            --text-color: #ffffff;
            --box-bg-color: #1e468c;
            --sidebar-color: rgba(0, 0, 0, 0.7);
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--main-bg-color);
            color: var(--text-color);
            margin: 0;
            display: flex;
        }

        main {
            flex-grow: 1;
            padding: 20px;
            background: url('/shrines/teruhashi/bg.png') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .sidebar {
            width: 250px;
            background-color: var(--sidebar-color);
            color: var(--text-color);
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
            overflow-y: auto;
        }

        .sidebar img {
            max-width: 100%;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .sidebar h2 {
            text-align: center;
        }

        header {
            text-align: center;
            margin-bottom: 20px;
        }

        header h1 {
            font-size: 2.5rem;
            color: var(--accent-color);
            animation: sparkle 2s infinite;
        }

        @keyframes sparkle {
            0%, 100% { text-shadow: 0 0 5px white; }
            50% { text-shadow: 0 0 15px white; }
        }

        .content {
            flex: 1;
            max-width: 800px;
            margin: auto;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
        }

        .content p.moving-text {
            animation: pop-in 2s ease-in-out;
            display: inline-block;
            white-space: nowrap;
        }

        @keyframes pop-in {
            0% { transform: translateX(-100%); opacity: 0; }
            50% { transform: translateX(0); opacity: 1; }
            100% { transform: translateX(10%); opacity: 0; }
        }

        .content .highlight-box {
            background-color: var(--box-bg-color);
            padding: 15px;
            margin: 10px 0;
            border-radius: 10px;
            transition: transform 0.3s;
        }

        .content .highlight-box:hover {
            transform: scale(1.05);
        }

        .did-you-know {
            background-color: var(--accent-color);
            color: white;
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
        }

        .audio-player {
            margin: 20px 0;
        }

        .two-columns {
            display: flex;
            gap: 20px;
        }

        .left-column {
            flex: 1;
            background-color: rgba(8, 14, 95, 0.918);
            padding: 20px;
            border-radius: 10px;
        }

        .right-column {
            flex: 1;
            background-color: rgba(8, 14, 95, 0.918);
            padding: 20px;
            border-radius: 10px;
        }

        footer {
            text-align: center;
            margin-top: 20px;
            color: var(--text-color);
        }

        @media (max-width: 768px) {
            body {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                text-align: center;
            }

            .two-columns {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <img src="/shrines/teruhashi/side.png" alt="Kokomi Teruhashi">
        <h2>Kokomi Teruhashi</h2>
        <img  src="/static/wafumelon/wafu.png" alt="wafu" title="Kokomi is the original face of wafumelon">
    </div>
    <main>
        <header>
            <h1>Welcome to Kokomi Teruhashi's Shrine ✨</h1>
        </header>

        <div class="two-columns">
            <div class="left-column">
                <h3>Special Facts</h3>
                <ul>
                    <li>Kokomi is known as the "perfect pretty girl" at PK Academy.</li>
                    <li>She often says, "I know, right? I'm so cute!"</li>
                    <li>Her beauty captivates everyone around her effortlessly.</li>
                </ul>
                <div class="did-you-know">
                    Did you know? Kokomi Teruhashi believes she has a "divine aura" that makes everyone adore her.
                </div>
                <img src="/shrines/teruhashi/2.png" alt="Kokomi Smiling" style="width:100%; margin-top:15px; border-radius:10px;">
            </div>

            <div class="right-column">
                <div class="content">
                    <p>Kokomi Teruhashi is one of the main characters in <em>Saiki Kusuo no Psi Nan</em>. Known for her confidence, she loves being the center of attention and is always conscious of her image. However, her interactions with Saiki challenge her usual charm.</p>

                    <div class="highlight-box">
                        Kokomi loves things that highlight her "divine" status, like sparkling jewelry and cute outfits!
                    </div>

                    <p style="animation: sparkle 2s infinite;">"Life is in very easy mode. This is all because I am gorgeous." - Kokomi</p>

                    <div class="audio-player">
                        <p>Play Kokomi's theme:</p>
                        <audio controls>
                            <source src="/shrines/teruhashi/32. Because I'm a Perfect Girl - Saiki K. No Psi Nan OST [lv9D7QFae3M].mp3" type="audio/mpeg">
                            Your browser does not support the audio element.
                        </audio>
                    </div>

                    <img src="/shrines/teruhashi/1.png" alt="Kokomi Posing" style="width:100%; margin-top:15px; border-radius:10px;">
                </div>
            </div>
        </div>

        <footer>
            <p>💕 Built with love and admiration for Kokomi Teruhashi! 💕</p>
        </footer>
    </main>
</body>
</html>