* {
    font-family: geom ;
}

.maintitle {
    display: flex;
    justify-content: center;   /* Centra horizontalmente */
    align-items: center;       /* Centra verticalmente */
    background-color: lightskyblue;
    border-radius: 8px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 20px;
    font-weight: bolder;
}

.lista li::marker {
    color: lightskyblue;
}

/* Centrar el contenedor principal de los enlaces (la lista <ul>) */
.rinconeslis {
    list-style: none; /* Asegura que no haya marcadores de lista */
    padding: 0; /* Remueve el padding predeterminado del navegador */
    text-align: center; /* ESTO ES LO CLAVE: Centra los elementos de línea (inline-block) */
    width: 100%; /* Opcional: Asegura que ocupe todo el ancho disponible */
}

/* Nota: Los estilos para .rinconeslis li y .rinconeslis li a se mantienen igual */

/* 1. Estilo para que los ítems de la lista se alineen horizontalmente */
.rinconeslis li {
    display: inline-block; 
    margin: 0 8px; /* Espacio un poco mayor entre los botones */
    list-style: none;
}

/* 2. Estilo del Enlace (Botón) - FORMA CUADRADA FIJA */
.rinconeslis li a {
    text-decoration: none;
    color: black; 
    border: 2px solid lightblue; 
    border-style: outset; 
    border-radius: 4px; 
    background-color: lightskyblue; 
    transition: all 0.2s ease-out; 
    font-family: inherit;

    /* CAMBIOS CLAVE PARA FORZAR EL CUADRADO */
    
    /* 1. Definir un tamaño fijo (por ejemplo, 80px x 80px) */
    width: 200px; 
    height: 200px;
    display: flex; /* Usar Flexbox para el centrado */
    
    /* 2. Centrar el texto horizontal y verticalmente */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    
    /* 3. Permitir que el texto se envuelva si es muy largo */
    text-align: center;
    line-height: 1.2; /* Ajustar el interlineado si el texto se envuelve */
}

/* Los efectos hover y active se mantienen */
.rinconeslis li a:hover {
    background-color: deepskyblue; 
    border-color: cornflowerblue; 
    border-style: inset; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.rinconeslis li a:active {
    background-color: dodgerblue; 
    transform: translateY(1px);
}

.rinconeslis li {
    font-size: 40px;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
}

.lidesc {
    background-color: aliceblue;
    border-radius: 4px;
    padding: 10px;      /* opcional, para que el texto no quede pegado */
    display: flex;
    align-items: center;
    height: auto;       /* se ajusta al contenido */
}

.channelink {
    color: lawngreen !important;
    text-shadow: 0px 0px 10px rgb(0, 0, 0);
    font-size: large;
}

/* Añade un margen en la parte inferior de cada ítem de la lista */
.lista li {
    margin-bottom: 20px; /* Puedes ajustar este valor (20px) para más o menos espacio */
    /* Otros estilos de la lista si los tienes, como list-style: none; */
}

.descimg {
    max-width: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

nav {
    background-color: lightskyblue;
    border-radius: 8px;
    margin: auto;
    height: 50px;
    padding: 15px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}
nav div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
}

nav .item {
    text-decoration: none;
    padding: 10px;
    color: black;
}

nav .item:hover:not(.active) {
    color: white;
    font-weight: bold;
}

/* La altura de la barra de desplazamiento */
nav::-webkit-scrollbar {
    height: 12px;
}

/* El fondo de la barra de desplazamiento */
nav::-webkit-scrollbar-track {
    background: transparent;
}

/* Al tocar con el dedo/clickear la barra de desplazamiento */
nav::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 10px;
}

/* Al mover el dedo/mouse por encima de la barra de desplazamiento */
nav::-webkit-scrollbar-thumb:hover {
    background: rgb(0, 0, 255);
}

nav a.item.active {
    color: whitesmoke;
    font-size: 25px;
    font-weight: bold;
    border-radius: 5px;
}

.blurbox {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px) saturate(150%);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.mitmg {
    /* CAMBIO CLAVE: Usa display: block para que margin: auto funcione */
    display: block;
    
    /* Centrado horizontal: el atajo para margin-left: auto; y margin-right: auto; */
    margin-left: auto; 
    margin-right: auto;
    
    padding: 15px;
    width: 250px; /* Es crucial que el ancho esté definido */
}

.cancdesc {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 5px solid black;
    border-radius: 8px;
    border-style: outset;
    border-color: gold;

}

/* 1. Añade una transición al elemento base para que la escala sea suave */
.linkimage {
    transition: transform 0.3s ease-in-out; /* Transición para suavidad */
    /* Asegúrate de que tenga display: block o inline-block si es un <a> o similar */
    display: inline-block; 
}

/* 2. Aplica el escalado al hacer hover (usando la sintaxis correcta) */
.linkimage:hover {
    /* CORRECCIÓN DE SINTAXIS: scale() solo necesita un argumento para escalar X e Y uniformemente */
    transform: scale(1.1); /* Escala uniformemente a 1.1 (10% más grande) */
    /* Alternativamente, si quieres el doble de tamaño (como intentaste con 2, 2): */
    /* transform: scale(2); */
}

.songlist {
    font-weight: bold;
}

.fa-youtube {
    /* ... (Mantenemos tus otros estilos de centrado) ... */
    width: 50px;
    height: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    
    /* 1. ANULACIÓN DE SUBRAYADO */
    text-decoration: none !important; /* Usar !important para asegurar que se aplica (Último recurso, pero efectivo) */
    
    /* 2. ANULACIÓN DE COLOR */
    color: black; /* Esto evita que el texto del enlace sea el azul por defecto */
}

.imgmax {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid black;
    display: block;
    border-radius: 5px;
    max-width: 100%; /* Para que no se salga */
    height: auto; /* mantiene la proporción de la altura fija */
}

.gif {
    display: flex; /* CAMBIO CLAVE: Activa el modo Flexbox */
    width: 100%; /* Asegura que el contenedor ocupe el 100% del ancho disponible */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: center; /* Alinea las imágenes verticalmente (si tuvieran alturas diferentes) */
    flex-wrap: wrap;
}

/* Media Query: Aplicar estas reglas solo si la pantalla es de 600px o menos */
@media (max-width: 600px) {
    
    .gif img {
        /* Ahora las imágenes ocupan el 48% (casi la mitad) del ancho */
        flex-basis: 48%; 
        max-width: 48%;
        margin-bottom: 10px; /* Añade espacio entre las filas */
    }
    
    /* Si quieres que se muestre 1 gato por fila en celulares pequeños, usa 100% */
    /*
    .gif img {
        flex-basis: 100%; 
        max-width: 100%;
        margin-bottom: 10px; 
    }
    */
}


.gif img {
    width: 75px;
    /* Propiedades de la animación */
    animation-name: discoParty; 
    animation-duration: 1.5s; /* Más rápido para un efecto disco */
    animation-timing-function: linear; /* Cambio de color uniforme */
    animation-iteration-count: infinite;
    
    /* Necesario para que la rotación se vea bien */
    transform-origin: 50% 100%; /* Rota desde la base de la imagen */
       
    /* Añade o ajusta el borde base aquí para que el color cambie después */
    border: 5px solid white; /* Por ejemplo: un borde blanco de 5px */
    
}

.backbody {
    
    /* CAMBIO DEL NOMBRE DE LA ANIMACIÓN */
    animation-name: discoPartybg; 
    
    animation-duration: 1.5s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite;
    transform-origin: 50% 100%; 
}

/* DEFINICIÓN DE LA ANIMACIÓN DE FIESTA DISCO */
@keyframes discoParty {
    /* 1. Cambio de Color en el Borde */
    0%   { border-color: red; transform: rotate(0deg); }
    14%  { border-color: orange; transform: rotate(5deg); } /* Inclinación derecha */
    28%  { border-color: yellow; transform: rotate(-5deg); } /* Inclinación izquierda */
    42%  { border-color: green; transform: rotate(5deg); }
    56%  { border-color: cyan; transform: rotate(-5deg); }
    70%  { border-color: blue; transform: rotate(5deg); }
    84%  { border-color: magenta; transform: rotate(-5deg); }
    100% { border-color: red; transform: rotate(0deg); } /* Regresa a posición inicial */
}

@keyframes discoPartybg {
    /* 1. Cambio de Color en el FONDO y Rotación Suavizada */
    0%   { background-color: red; transform: rotate(0deg); }
    14%  { background-color: orange; transform: rotate(0.5deg); } /* REDUCCIÓN: Inclinación derecha a 2 grados */
    28%  { background-color: yellow; transform: rotate(-0.5deg); } /* REDUCCIÓN: Inclinación izquierda a -2 grados */
    42%  { background-color: green; transform: rotate(0.5deg); }
    56%  { background-color: cyan; transform: rotate(-0.5deg); }
    70%  { background-color: blue; transform: rotate(0.5deg); }
    84%  { background-color: magenta; transform: rotate(-0.5deg); }
    100% { background-color: red; transform: rotate(0deg); } /* Regresa a posición inicial */
}

.maxu {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 20px solid rgb(155, 116, 94);
    border-style: inset;
    margin-top: 10px;
}

.anyutxt {
    text-align: center;
    text-size-adjust: auto;
    font-size: 3.5em;
    font-weight: bold;
}

.old {
    background-image: url("Images/papiro.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;

}

.centeredtext {
    text-align: center;
}

.poem {
    text-align: center;
    font-style: italic;
}

.image {
    align-self: center;
    background-color: aliceblue;
    border: 3px solid lightblue;
    border-radius: 2px;
    width: 80%;
    height: auto;
    margin: 2px;
}

.album {
    max-width: 100%;
    justify-content: space-evenly; /* Distribuye el espacio entre los elementos */
    align-items: center; /* Alinea las imágenes verticalmente (si tuvieran alturas diferentes) */
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
}

.album {
    text-align: center;
    font-size: xx-large;
    margin-top: 0px;
}

.album .photopaper {
    /* 1. Apariencia de Papel */
    background-color: white; /* El papel siempre es blanco */
    border: 1px solid #ccc; /* Borde más sutil, el "marco" será el padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para darle profundidad y que parezca despegado */
    
    /* 2. Márgenes y Padding (Marco) */
    margin: 10px; /* Espacio entre las fotos */
    padding: 10px 10px 25px 10px; /* Aumenta el padding inferior para el efecto Polaroid */
    
    /* 3. Asegurar el funcionamiento en Flexbox */
    display: flex;
    flex-direction: column; /* Apila la imagen y el texto verticalmente dentro del marco */
    align-items: center; /* Centra el contenido (imagen y texto) */
    text-align: center; /* Centra el texto del título */
    
    /* 4. Asegurar que las imágenes llenen el espacio correctamente */
    box-sizing: border-box; /* Incluye padding y border dentro del ancho y alto */
}

.URL {
    color: red;
    text-decoration: underline;
}

.blogcom {
    background-color: rgb(255, 174, 144);
    display: inline-block;
    border-radius: 5px ;
    padding: 3px;
}

.bloghr {
    border: 1px solid black;
    width: 100%;
}

details details {
    margin-left: 20px;
}

.sumtitle {
    font-size: larger;
    background-color: rgb(255, 164, 164);
    height: 130%;
    width: 100%;
    border-radius: 5px;
}

.sumitem {
    background-color: rgb(255, 226, 226);
    height: 130%;
    width: 100%;
    border-radius: 5px;
}

.sumitem p {
    margin-left: 20px;
}

.updatetab {
    list-style: none;
    background-image: linear-gradient(45deg, rgb(187, 207, 245), rgb(238, 244, 255));
    border-radius: 5px;
    display: block;
    padding: 10px;
    list-style-position: inside;
}

.updatetab li::before {
    content: "✦";
    color: #000000; /* Dorado brillante */
    margin-right: 12px;
    font-size: 1.2em;
}

.badge-new {
    background-color: #ff4757; /* Un rojo vibrante */
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    text-align: center;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.horizontaline {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, rgb(0, 0, 0), transparent);
}

.sad-bob {
    height: 1.22em; /* Esto hace que mida lo mismo que el texto */
    width: auto;
    vertical-align: middle; /* Para que no flote arriba del texto */
    margin: 2px; /* Un pequeño espacio a los lados */
}