@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    background-image: url("https://i.pinimg.com/736x/c8/f0/f3/c8f0f3b4c9ceab903c2c4258eb743672.jpg"); url('tumblr_29efb7f2b4592ae2e889c52f7fe9891b_f4cdd68f_250.webp')
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    
    
}

main {
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    color: #2b3a1a;    /* Texto verde oscuro */
    
    /* ESTRUCTURA DEL CUADRADO GRANDE CENTRAL */
    background-color: #ffffff ; /* Relleno totalmente blanco */
    max-width: 700px;  /* Ancho del cuadrado */
    margin: 50px auto; /* Lo centra y deja ver el fondo por los lados */
    padding: 30px;     /* Espacio por dentro */
    
    /* EL BORDE VERDE OLIVA GORDO */
    border: 6px solid #556b2f ; 
    
    /* Sombra sólida */
    box-shadow: 12px 12px 0px rgba(85, 107, 47, 0.3); 
}
/* 2. DISEÑO DE LOS TÍTULOS */
h2 {
    font-size: 2.5rem;
    color: #556b2f; /* Títulos también en verde oliva */
    border-bottom: 2px dashed #556b2f; /* Línea de puntos debajo del título */
    margin-top: 0;
    padding-bottom: 5px;
    text-transform: uppercase; /* Títulos en mayúsculas estilo menú de juego */
}

/* Ajustes para las entradas del blog */
.post {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccd4c1;
}

.post:last-child {
    border-bottom: none;
}

.post-meta {
    font-size: 1.1rem;
    color: #7a8a65;
}

/* Los enlaces dentro del juego */
a {
    color: #3b4d20;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #556b2f;
    text-decoration: underline;
    background-color: #e2ebd5; /* Efecto de selección al pasar el ratón */
}

/* La caja mágica que pone el avatar y la lista de lado a lado */
.contenedor-perfil {
    display: flex;
    align-items: center; /* Centra el texto verticalmente respecto al avatar */
    gap: 20px;           /* El espacio de separación entre el avatar y el texto */
    margin-top: 15px;
}

.contenedor-perfil {
    display: flex !important; 
    /* El truco mágico: row-reverse cambia el orden y pasa la foto a la derecha */
    flex-direction: row-reverse; 
    align-items: center; 
    justify-content: flex-end; /* Empuja todo hacia la izquierda para que la lista no se mueva */
    gap: 30px;                 /* Subimos el espacio a 30px porque la foto ahora es más grande */
    margin-top: 15px;
    margin-bottom: 15px;
}

.contenedor-perfil {
    display: flex !important; 
    flex-direction: row-reverse; 
    align-items: center; 
    /* Cambiamos esto para que el bloque se centre en el cuadro blanco */
    justify-content: center; 
    gap: 30px;                 
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%; /* Le asegura al navegador que use todo el ancho para centrar */
}

.avatar-sobre-mi {
    width: 180px;        
    height: 180px;       
    object-fit: cover;
    /* Quitamos el borde y el fondo gris quitando esas líneas */
    border: none; 
    background: transparent; 
}
.separador-tumbas {
    display: block;
    margin: 60px auto; /* Esto centra la imagen de las tumbas automáticamente */
    max-width: 80%;   /* Para que no se salga de la pantalla si es muy grande */
    height: auto;
}