/* 

    AY NO, NO PUEDO CREER QUE NO DEFINIÍ LOS COLORES DE LA UI EN VARIABLES. 😭😭😭😭
    Deuda tecnica. 🗣️🗣️🗣️🗣️
    Hahaha, aunque en mi defensa cuando escribí este codigo aun no sabia que podia hacer eso. :c

    Queria probar como se veria la UI con otros colores, pero primero arreglare esto xd.

    -Atte: Una Alison volviendo a continuar este codigo despues de varios meses

*/

:root {
    --header-image: url('../gifs_uwu/about_title.gif');
    --me: url('../imagenes uwu/alison1.png');
    --backgContainerColor: rgba(66, 8, 31, 0.9);
    --borderColor: #ff5890;
    --scrollBarColor: rgb(255, 0, 140);
    --colorResalt: #ff3477;
    --spanColor: #fbff82;
    --spanColor2: #ff5890;
}

/*
2e302e
rgb(84, 27, 38, 0.9)

*/

::selection {
    background-color: #ff006f;
    color: #fff;
}

body {
    text-align: center;
    background-image: url('../imagenes uwu/aboutme_backg.png');
    background-repeat: repeat;
    background-size:280px;
    background-color: #eaa2b2;
    font-family: "Tiny5", sans-serif;
    font-weight: 400;
    font-style: normal;
    animation: diagonal-scroll 60s linear infinite; /* Para el keyframe del desplazamiento diagonal uwu*/

}

body, a {
    cursor: url('../controls_uwu/alisonCursor.png'), auto;
}

/* 
    La clase .hov sera para yo definir más facilemente que elementos cambiaran la imagen con el hover.
    Aunque bueno, con los Pokémon no se me ocurrió cual podria ser la mejor practica para implementarla hahaha.
    Asi que creo que me salia mejor poner que también se aplicara sobre los divs de ese contenedor a que directamente
    estar escribiendo la clase manualmente para cada una....
*/
a:hover, .hov, #pokemon_box_uwu div:hover{
    cursor: url('../controls_uwu/alisonCursorHover.png'), auto;
}

@keyframes diagonal-scroll {
    0% {
        background-position: 0% 0%; /* Empieza en la esquina superior izquierda. 😈 */
    }
    100% {
        background-position: -100% 100%; /* Se desplaza hacia la izquierda y hacia abajo; Osea que termina en diagonal uwu */
    }
}

#main_container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
    padding-bottom: 80px;
    position: relative;
    display: grid;
    grid-template-areas: 
    "header header"
    "aboutme aboutsite"
    "otherthings otherthings";
    grid-template-columns: 2fr 2fr;
    gap: 5px;
}

/* Lo de :not(header) es como un filtro, ya que lo de abajo se aplica a todos los div que hay dentro
de main_container, pero como no queria que se aplicara al header pues puse esa restricción uwu. ✨💀    */

#main_container > div:not(#header,.dolls_uwu, #otherthings) {
    padding: 10px;
    border: 6px double;
    border-radius: 8px;
    border-color: var(--borderColor);
    background-color: var(--backgContainerColor);
    margin: 2px;
}

#header {
    grid-area: header;
    width: 100%;
    height: 220px;
    background-image: var(--header-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; /* Para centrar la imagen en el contenedor uwu. ✨ */
}

#aboutme {
    text-align: left;
    grid-area: aboutme;
    height: 730px;
    overflow: hidden;
}

#aboutme ul {
    color: var(--spanColor);
    list-style-type: none;
    padding-left: 160px;
}

#aboutme ul li{
    text-decoration: none;
    margin-bottom: 4px; 
}

.aboutme_span {
    color: var(--spanColor2);
    font-weight: bold;
}

#michsouls {
    color: #ffb71c;
}

#aboutme a {
    color: rgb(255, 93, 239);
}

#aboutme a:hover {
    color: #ff1d73; 
}

#aboutsite {
    grid-area: aboutsite;
    height: 730px;
}

#aboutsite p {
    text-align: left;
}

#otherthings {
    grid-area: otherthings;
    position: relative;
    display: grid;
    grid-template-areas: 
    "hobbies like poketeam"
    "favorite favorite favorite"
    "funfacts funfacts funfacts";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 405px 1150px 200px; /*Para darle una altura fija a las fila uwu. ⚰️✨
    Solo para que quede claro, el primer numero es la primer fila y asi hahaha.*/
    gap: 5px;
    height: 1685px;
}

/*Solo para que no olvides que debes poner la flecha en vez de directamente div para que solo se le aplique a sus
div y no a los "subdiv" por asi decirlo */
#otherthings > div{
    border: 6px double;
    border-radius: 8px;
    border-color: var(--borderColor);
    background-color: var(--backgContainerColor);
}

#hobbies_div {
    grid-area: hobbies;
    height: 400px;
    /*Altura fija para activar el scroll uwu. */
    overflow-y: scroll;
    margin-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    max-width: 100%;
}

#hobbies_div ul {
    text-align: left;
    color: var(--spanColor);
    list-style: square inside url("../imagenes uwu/coquette_skull_png.png");
    list-style-position: inside;
    /*Mueve el puntito dentro del elemento de la lista uwu. */
    padding-left: 40px;
    /*Para la separación del lado izquierdo. */
}

#hobbies_div ul li{
    text-decoration: none;
    margin-bottom: 4px; 
}

#likes_div {
    grid-area: like;
    height: 400px;
    /*Altura fija para activar el scroll uwu. */
    overflow-y: scroll;
    margin-bottom: 10px;
    /*Estas dos lineas de abajo hacen que la scrollbar funcione bien. :0 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    max-width: 100%;

}

#likes_div ul {
    list-style: square inside url("../imagenes uwu/coquette_skull_png.png");
    list-style-position: inside;
    text-align: left;
    color: var(--spanColor);
    padding-left: 40px;
}

#likes_div ul li {
    text-decoration: none;
    margin-bottom: 4px; 
    word-break: break-word;
}

#poketeam {
    grid-area: poketeam;
    height: 400px;
    background-color: #55313c;
}

#pokemon_box_uwu {
    display: grid;
    grid-template-columns: auto auto;
    gap: 5px;
    padding: 6px;
}

#pokemon_box_uwu > div {
    height: 80px;
    background-color: #78436c;
    background-image: linear-gradient(#78436c,#dbb2c8);
    color: #fff71d;
    padding: 10px;
    font-size: 30px;
    text-align: center;   
}

/* Animación para que los pokémon cuando el cursor uwu. ⚰️*/
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Y aqui ya para que se active la animación uwu. 💫*/
#pokemon_box_uwu div:hover img {
    /*El desplazamiento es en tan poco tiempo para que se vea más como en el juego. YAYYYY. */
    animation: float 0.16s ease-in-out infinite;
}  

#pokemon_box_uwu div:hover {
    background-color: #ba0164;
    background-image: linear-gradient(#ff0077, rgb(255, 173, 223));
}  

#favorite_div {
    grid-area: favorite;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px 5px; /* Xpx de espacio entre filas, Xpx entre columnas */
    justify-items: center; /* Centra los divs dentro de cada celda */
    margin: 5px 90px;          
}

/* Los enlaces que llevan a Spotify uwu. */
.gallery a {
    color: var(--spanColor);
    text-decoration: none;
}

.gallery a:hover {
    color: green;
    animation: rainbowLinks 2s linear infinite;
}

@keyframes rainbowLinks {/* No es literal un arcoiris, pero fue el mejor nombre que se me ocurrió 
                            para el keyframe hahahha. */
    0% {
        color: var(--spanColor);
    }
    25% {
        color: #00e1ff;
    }
    50% {
        color: #ff00fb;
    }
    75% {
        color: #ff0066d1;
    }
    100% {
        color: var(--spanColor);
    }

}

.gallery > div {
    position: relative;
}

/*Para que la imagen con hover se muestre por encima de las demas uwu. */
.gallery div:hover {
    z-index: 1; 
}

.gallery img {
    width: 120px;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Esto solo afectará a las imágenes dentro del div con la clase 'characters' */
.characters img {
    width: 120px !important;   
    height: 120px !important;  
    object-fit: cover;        
}

.characters div {
    height: 120px; 
}

.gallery div:hover img {
    transform: scale(1.35) rotate(10deg);
}

.gallery span {
    position: absolute;
    width: max-content;
    min-height: 30px;
    bottom: 15px;
    left: 50%;
    box-sizing: border-box;
    background: var(--backgContainerColor);
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 18px;
    padding: 5px 10px;
    opacity: 0;
    pointer-events: none; /* UFFF FINALMENTE SOLUCIONÉ ESTE PROBLEMA DE LA UI. YAYYYY. No se me habia ocurrido hasta
                            ahora hahahha.*/
    transform: translate(-50%, 100px);
    transition: transform 0.4s ease, opacity 0.5s ease;
}

.gallery div:hover span {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, 0);
}

#characters_favs {
    height: 130px; /* Sinceramente no recuerdo si esta linea afectaba en algo, pero por si acaso la dejo xd.  */
}

#random_fun_fact {
    grid-area: funfacts;
}

#random_button_uwu {
    font-family: "Tiny5", sans-serif;
    font-weight: 400;
    font-style: normal;   
    font-size: 30px;         
    border-color: var(--colorResalt);
    border-radius: 5px;
    background-color: var(--backgContainerColor);
    color: var(--colorResalt);
    transition: all 0.3s ease-in-out;
}

#random_button_uwu:hover {
    border-color: var(--backgContainerColor);
    background-color: var(--colorResalt);
    color: var(--backgContainerColor);
    transform: scale(1.1);
}

#random_message {
    word-break: break-word;
}

#pinkie_malevola {
    float: left;
    width: 130px;
}

#aboutsite a {
    color: rgb(255, 93, 239);
}

#aboutsite a:hover {
    color: #ff1d73; /* Color cuando pasas el mouse por encima*/
}

#picture {
    /*Float para que la imagen quede a la izquierda y el resto del texto se acomode en el espacio restante xd. */
    float: left;
    border-style: solid;
    border-color: rgb(0, 0, 0);
    margin: 0 auto;
    background-color: rgb(70, 32, 60);
    background-image: url('../gifs_uwu/lightning_backg.gif');
}


p {
    color: aliceblue;
    font-size: 18px;
}

h1 {
    color: #eaeaea;
    font-size: 50px;
}

h2 {
    color: var(--colorResalt);
}

/*Para la scrollbar rosita uwu. Codigo reciclado de la homepage. 🤑🤑🥶🥶*/

/* Estilos generales de la scrollbar (para navegadores WebKit/Chromium) */
::-webkit-scrollbar {
    width: 10px;
    /* Ancho de la barra de desplazamiento vertical */
    height: 10px;
    background-color: #0d0d0d;
    /* Color de fondo de la barra completa */
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollBarColor);
    /* Color del pulgar */
    border-radius: 2px;
    /* Bordes redondeados para el pulgar */
    border: 1px solid #ffaad5;
    border-left: 1px solid #ffc2e3;
    border-right: 1px solid #6d3754;
    border-bottom: 1px solid #051308;
    box-shadow: inset 1px 1px 0 0 #ff83f9, inset -1px -1px 0 0 #b70b58;
}

/* Estilo del thumb cuando pasas el cursor por encima. ✨ 
Ni modo, tocó llamarle thumb, Le queria llamar de otra manera pero no se pudo hahaha. 🥶🤑*/
::-webkit-scrollbar-thumb:hover {
    background-color: #f85594;
    /* Color del thumb al pasar el cursor. ⚰️*/
}

::-webkit-scrollbar-thumb:active {
    background-color: #ff3e95;
}

/* El estilo del "carril" por donde pasa la barrita de la scrollbar. ✨ 
Ya supe como llamarle al thumb hahahha, Simplemente barrita y ya, podria modificar los comentarios anteriores 
pero quiero dejar estos comentarios de recuerdo de la Alison del pasado hahaha. 🦇⚰️✨ */
::-webkit-scrollbar-track {
    background-color: #2b1a24;
    border-radius: 2px;
    /* Para el borde de la scrollbar. 💀 */
}

/*Por cierto... Holaaaaaa, Alison del futuro. :D 🖤✨💀
Y también hola personita que esta leyendo mi codigo. 💖 */

/*Este bloque es para el cuadrito que esta en el inicio y final de la scrollbar uwu.   */
::-webkit-scrollbar-button {
    border-top: 1px solid #ff6ebc;
    border-left: 1px solid #ff6ebc;
    border-right: 1px solid #ab005c;
    border-bottom: 1px solid #ab005c;
    box-shadow: inset 1px 1px 0 0 #ff83f9, inset -1px -1px 0 0 #ba0164;
    background-color: var(--scrollBarColor);
}

::-webkit-scrollbar-button:active {
    background-position: 2px 2px;
    background-color: #ff1190;
}


.carruselomg img {
    width: 120px; 
}

#back_home {
    position: absolute;
    left: 15px;
    top: 162px;
    z-index: 1;
    object-fit: cover;
}

#back_home img {
    transition: transform 0.5s ease, filter 0.35s ease;
}

#back_home:hover img{
    transform: scale(1.25);
    /*Para esto del tono del color, imagina que es un circulo de colores y que el valor que le pongas en deg
    sera lo que va girar y por ende se alterara el color. 🌈 */
    filter: hue-rotate(300deg);
}

/*Para las muñequitas uwuuwuwuuwuwuwuwuuwuwu. ✨🩸 */
#vampiraa {
    position: absolute;
    top: 1430px;
    right: 15px;
}    

#white_bat {
    position: absolute;
    top: 230px;
    left: 360px;
}

#skull_laughter {
    position: absolute;
    top: 230px;
    left: 40px;
}

@media only screen and (max-width: 1099px) {

    body {
        background-size:288px;
    }

    #main_container {
        width: 94%;
    }

    /* Para ajustar el tamaño del texto 🥶 */
    p {
        font-size: 17px;
    }

    h1{
        font-size: 70px;
    }

    h2,h3 {
        font-size: 22px;
    }

    #back_home {
        left: 10px;
        top: 155px;
        z-index: 1;
    }

    /* Para ajustar las muñecas uwu. */
    #vampiraa {
        top: 1430px;
        width: 100px;
        right: 0px;
    }

    #white_bat {
        top: 230px;
        left: 360px;
        width: 90px;
    }

    #skull_laughter {
        top: 228px;
        left: 40px;
    }

}