<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bio & Gallery | Oshi no Ko Style</title>
    <link href="https://fonts.googleapis.com" rel="stylesheet">
    <style>
        body {
            background-color: #0a0a0a; color: #eeeeee; font-family: 'Inter', sans-serif;
            margin: 0; padding: 0; line-height: 1.6; overflow-x: hidden;
        }
        #particles-js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }
        .content-over-particles { position: relative; z-index: 1; }

        .container {
            max-width: 1000px; margin: 40px auto; padding: 30px;
            background: rgba(15, 15, 15, 0.95); border-radius: 12px; 
            box-shadow: 0 0 50px rgba(176, 38, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        nav {
            background-color: #000; padding: 15px 0; text-align: center;
            border-bottom: 2px solid #ff0064; margin-bottom: 30px;
            box-shadow: 0 5px 20px rgba(255, 0, 100, 0.2); 
        }
        nav a {
            color: #fff; text-decoration: none; padding: 10px 20px; margin: 0 10px;
            font-weight: bold; transition: all 0.3s; border-bottom: 2px solid transparent;
        }
        nav a:hover { color: #00bfff; border-bottom-color: #00bfff; }

        header h1 {
            font-family: 'Orbitron', sans-serif; 
            background: linear-gradient(90deg, #00bfff, #ff0064, #b026ff);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            padding-bottom: 10px; text-transform: uppercase; letter-spacing: 4px;
            filter: drop-shadow(0 0 8px rgba(176, 38, 255, 0.4));
        }

        .character-card { display: flex; gap: 30px; margin-top: 40px; align-items: flex-start; flex-wrap: wrap; }
        .image-placeholder { 
            flex: 1; min-width: 280px; background-color: #000; padding: 8px; border-radius: 8px; 
            border: 2px solid #ff0064; box-shadow: 0 0 25px rgba(0, 191, 255, 0.3); 
        }
        .image-placeholder img { width: 100%; border-radius: 5px; display: block; }
        
        .details { 
            flex: 2; min-width: 300px; background-color: #161616; padding: 25px; border-radius: 8px; 
            border: 1px solid rgba(176, 38, 255, 0.2);
        }
        .details h2, .story h2, .gallery-section h2 { 
            color: #ff0064; border-bottom: 2px solid #ff0064; padding-bottom: 8px; 
            text-transform: uppercase; margin-top: 0;
        }

        ul { list-style-type: none; padding: 0; }
        li { margin-bottom: 15px; border-left: 4px solid #00bfff; padding-left: 15px; color: #fff; }
        li strong { color: #00bfff; }

        /* Соцсети - Строго в столбик, черные с фиолетовой обводкой */
        .social-links { margin-top: 25px; display: flex; flex-direction: column; gap: 12px; }
        .social-links a {
            color: #fff; padding: 12px; text-align: center; text-decoration: none;
            border-radius: 6px; font-weight: bold; background-color: #000; 
            border: 2px solid #b026ff; box-shadow: 0 0 10px rgba(176, 38, 255, 0.2); transition: 0.3s;
        }
        .social-links a:hover { transform: scale(1.02); border-color: #d896ff; box-shadow: 0 0 20px rgba(176, 38, 255, 0.5); }

        /* Блок истории - ТЕПЕРЬ ВИДНО */
        .story { 
            margin-top: 30px; padding: 20px; 
            background: rgba(255, 255, 255, 0.03); border-radius: 8px;
            border-left: 4px solid #b026ff;
        }
        .story p { color: #ffffff; font-size: 1.05em; margin: 0; }

        /* Галерея */
        .gallery-section { margin-top: 50px; }
        .gallery-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px; margin-top: 20px;
        }
        .gallery-item {
            background: #000; padding: 8px; border-radius: 10px; border: 1px solid #b026ff;
            transition: 0.4s ease; cursor: pointer;}
        .gallery-item img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; }
        .gallery-item:hover { transform: translateY(-8px); border-color: #00bfff; box-shadow: 0 0 20px rgba(0, 191, 255, 0.4); }

        footer { text-align: center; margin-top: 60px; padding: 20px; color: #555; border-top: 1px solid #333; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(#ff0064, #b026ff); border-radius: 10px; }
    </style>
</head>
<body>

<div id="particles-js"></div>

<nav>
    <a href="#">ГЛАВНАЯ</a>
    <a href="#gallery">ГАЛЕРЕЯ</a>
</nav>

<div class="content-over-particles">
    <div class="container">
        <header>
            <h1>My Bio ✨</h1>
        </header>

        <div class="character-card">
            <div class="image-placeholder">
                <img src="https://via.placeholder.com" alt="Profile">
            </div>
            <div class="details">
                <h2>Личная информация</h2>
                <ul>
                    <li><strong>Имя:</strong> Твое Имя</li>
                    <li><strong>Роль:</strong> Creator</li>
                </ul>
                
                <div class="social-links">
                    <a href="#">TELEGRAM</a>
                    <a href="#">TWITCH</a>
                    <a href="#">YOUTUBE</a>
                </div>
            </div>
        </div>

        <!-- ИСТОРИЯ ВЕРНУЛАСЬ -->
        <div class="story">
            <h2>Моя история</h2>
            <p>Здесь твое описание. Текст теперь четкий, белый и находится в правильном блоке под основной информацией, так что он больше не потеряется!</p>
        </div>

        <div class="gallery-section" id="gallery">
            <h2>Галерея</h2>
            <div class="gallery-grid">
                <div class="gallery-item"><img src="https://via.placeholder.com"></div>
                <div class="gallery-item"><img src="https://via.placeholder.com"></div>
                <div class="gallery-item"><img src="https://via.placeholder.com"></div>
            </div>
        </div>

        <footer>© 2026 | Oshi no Ko Style</footer>
    </div>
</div>

<script src="https://cdn.jsdelivr.net"></script>
<script>
    particlesJS('particles-js', {
        "particles": {
            "number": { "value": 50 },
            "color": { "value": ["#ff0064", "#00bfff", "#b026ff"] },
            "shape": { "type": "star" },
            "opacity": { "value": 0.4 },
            "size": { "value": 2 },
            "move": { "enable": true, "speed": 1 }
        }
    });
</script>
</body>
</html>
<style>
  body {
    background-image: url("Art3.jpg") !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
</style>
/* По умолчанию (на ПК) эти переносы скрыты */
.rwd-br {
    display: inline;
}

/* На экранах шириной 768px и меньше (телефоны) эти переносы активируются */
@media screen and (max-width: 768px) {
    .rwd-br {
        display: block; /* Делает перенос строки */
    }
}