<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to my multiverse</title>
    
    <style>
        /* ==========================================================================
           1. CONFIGURACIÓN GENERAL Y FUENTES
           ========================================================================== */
        @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&family=Playfair+Display:ital,wght@0,400;1,400;1,600&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #fff0f5; /* Rosa lavanda/pastel muy suave de fondo */
            font-family: 'Quicksand', sans-serif;
            color: #5c4449; /* Marrón rojizo suave */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 40px 20px;
        }

        /* Contenedor principal estilo carta de perfil */
        .layout-container {
            background-color: #ffffff;
            max-width: 480px;
            width: 100%;
            padding: 30px 25px;
            border-radius: 24px;
            box-shadow: 0 8px 30px rgba(255, 182, 193, 0.4); /* Sombra rosa suave */
            border: 1px solid #ffe3e8;
            display: flex;
            flex-direction: column;
            gap: 22px;
            text-align: center;
        }

        /* ==========================================================================
           2. HEADER / BANNER
           ========================================================================== */
        .banner-container {
            width: 100%;
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 5px;
        }

        .banner-container img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Títulos elegantes */
        h1, h2 {
            font-family: 'Playfair Display', serif;
            font-weight: 400;
            font-style: italic;
            color: #ff758f; /* Rosa fresa vibrante */
            font-size: 1.6rem;
        }

        p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #7a5c61;
        }

        /* Separadores estéticos decorativos */
        .decoracion-separador {
            color: #ffb6c1;
            font-size: 0.9rem;
            letter-spacing: 4px;
            margin: 5px 0;
            user-select: none;
        }

        /* ==========================================================================
           3. NAVEGACIÓN E INTERESES (Botones en cuadrícula)
           ========================================================================== */
        .intereses-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Dos columnas simétricas */
            gap: 12px;
            width: 100%;
            margin: 10px 0;
        }

        .intereses-grid a {
            display: block;
            text-align: center;
            background-color: #fff5f7; /* Fondo rosa claro */
            color: #ff758f;
            text-decoration: none;
            padding: 12px 15px;
            border-radius: 30px; /* Bordes totalmente redondeados */
            border: 1px solid #ffe3e8;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        /* Efecto Hover (Al pasar el cursor sobre los botones) */
        .intereses-grid a:hover {
            background-color: #ffe5ec; /* Fondo rosa más encendido */
            border-color: #ffb6c1;
            color: #c9184a; /* Texto rosa oscuro al hacer hover */
            transform: translateY(-2px); /* Pequeño salto hacia arriba */
        }

        /* ==========================================================================
           4. TARJETA DE ESTADO (Currently)
           ========================================================================== */
        .card-currently {
            background-color: #fff5f7; /* Fondo rosa pastel sutil */
            padding: 20px;
            border-radius: 16px;
            border: 1px dashed #ffb6c1; /* Borde de puntos rosa */
            text-align: left;
        }

        .card-currently h2 {
            margin-bottom: 12px;
            font-size: 1.4rem;
            text-align: center;
        }

        .card-currently ul {
            list-style: none;
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .card-currently li {
            font-size: 0.95rem;
            color: #7a5c61;
        }

        /* Footer / Botón de Biografía */
        .boton-bio {
            display: inline-block;
            font-family: 'Playfair Display', serif;
            font-style: italic;
            background-color: #ff758f;
            color: #ffffff !important;
            text-decoration: none;
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 600;
            margin-top: 10px;
            transition: background-color 0.3s ease;
        }

        .boton-bio:hover {
            background-color: #ff4d6d;
            color: #ffffff;
        }
    </style>
</head>
<body>

    <main class="layout-container">
        
        <div class="banner-container">
            <img src="https://via.placeholder.com/450x150/ffe5ec/ff758f?text=Welcome+to+my+multiverse" alt="Welcome to my multiverse">
        </div>

        <section>
            <h1>🦋 ₊ ˚ about me ✦</h1>
            <p>Hi! I'm Tatiana.<br>⌢ .୨ৎ. I like art, poetry, stories, character creation, worldbuilding and learning random things.</p>
        </section>

        <div class="decoracion-separador">୨ৎ ‧₊˚ ⊹ 🦋 ⊹ ˚₊‧ ୨ৎ</div>

        <nav class="intereses-grid">
            <a href="art.html">୨ৎ art</a>
            <a href="stories.html">✧ stories</a>
            <a href="ocs.html">♡ ocs</a>
            <a href="poetry.html">୨ৎ poetry</a>
            <a href="music.html">♡ music</a>
            <a href="blog.html">୨ৎ blog</a>
            <a href="worlds.html">✧ worlds</a>
        </nav>

        <div class="decoracion-separador">⋆ ˚ ☁️ ˚ ⋆ ˚ 🌙 ˚ ⋆</div>

        <section class="card-currently">
            <h2>⌢ .୨ৎ. currently ✦</h2>
            <ul>
                <li>稳定性 ୨ৎ ˚₊· drawing</li>
                <li>稳定性 ୨ৎ ˚₊· writing stories</li>
                <li>稳定性 ୨ৎ ˚₊· learning forensic science</li>
                <li>稳定性 ୨ৎ ˚₊· creating worlds</li>
            </ul>
        </section>

        <div class="decoracion-separador">୨ৎ ‧₊˚ ⊹ 🦋 ⊹ ˚₊‧ ୨ৎ</div>

        <div>
            <a href="biography.html" class="boton-bio">🦋 biography 🦋</a>
        </div>

    </main>

</body>
</html>
