<!--
 _____ _              _               _     _             
|_   _( )            | |             | |   (_)            
  | | |/ _ __ ___    | |     ___  ___| |__  _  __ _ _ __  
  | |   | '_ ` _ \   | |    / _ \/ __| '_ \| |/ _` | '_ \ 
 _| |_  | | | | | |  | |___|  __/\__ \ |_) | | (_| | | | |
 \___/  |_| |_| |_|  \_____/\___||___/_.__/|_|\__,_|_| |_|

⠀⠀⠀⠀⠀⢀⣀⣀⣤⣤⣤⣤⣀⣀⠀⠀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣠⡶⠞⠛⠫⢤⣀⠀⠙⣷⡀⠈⠙⣲⠋⠙⢦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢀⡾⣋⡤⠤⠤⠤⢤⣈⡷⠖⠛⠋⠙⠓⣿⠀⠀⡞⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⣾⠉⢀⡤⠖⠒⢦⡴⠋⠀⠀⠀⠀⠀⠀⠀⠀⣰⠃⣿⠀⠀⠀⠀⠀⠀⣠⡴⢶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⡇⢀⡏⠀⠀⠀⣼⠁⠀⣀⡀⠀⠀⠀⠀⠀⠐⠋⢠⡏⣇⠀⠀⡴⢻⡶⠋⢀⡞⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⡇⠸⡆⠀⠀⠀⣇⠀⣸⡏⠟⣿⣦⣀⢀⠀⠀⠀⢰⡇⢹⠀⣸⠃⠜⠁⢀⣞⡤⠴⢶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢹⡄⢣⠀⠀⠀⢹⡀⠸⡇⢸⣿⣄⣹⡿⣷⡦⢄⡟⠀⢸⣶⣇⣤⡀⣠⠿⠋⠀⣠⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠳⡄⠳⡀⢀⣠⡇⠀⠱⣧⡻⡿⣿⠁⠀⢀⡼⠁⠀⡾⣿⠋⢠⡷⠃⢀⣠⠞⠁⠀⠀⢀⣠⠤⠴⠶⠶⠶⢤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠹⣦⡹⣟⣗⡂⡀⠀⠈⠉⠉⠁⣀⣠⠞⠀⠀⣰⣿⡟⢀⡞⢻⡶⠚⠋⣹⢆⡴⠚⠉⠀⠀⠀⠀⠀⠀⠀⠈⠻⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠘⢷⣌⢣⡉⠛⠒⢲⠒⠒⡿⣱⠋⠀⢀⣾⡽⢹⠇⠈⣠⣞⡤⢴⣮⣵⡫⠴⠒⠉⠉⠉⠑⠒⢤⣀⠀⠀⠀⠈⢷⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢻⣧⠹⡄⠀⢸⠀⢀⡿⠁⢀⡴⢫⠞⠀⡾⠀⢚⣏⣽⠗⢠⡼⣿⠶⠚⠉⠉⠙⢦⡀⠀⠀⠈⠳⡀⠀⠀⠈⣷⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣤⣤⣄⠀⣏⢇⠸⡀⡼⠀⡼⠁⡴⠋⡴⠃⠀⣰⠇⠐⠛⢉⡀⠠⠋⠀⢹⠀⠀⠀⠀⠀⠀⠹⡄⠀⠀⠀⠹⡀⠀⠀⢸⡆⠀⠀⠀⠀⠀⠀⠀
⠀⢿⢻⡀⢘⣴⠃⢸⠀⣷⠇⣼⢡⠞⢠⠞⠀⠀⢠⠏⠀⠀⡆⠉⢻⢦⣤⠟⣿⠀⠀⠀⠀⠀⠀⠀⢳⠀⠀⠀⠀⣷⠀⠀⢸⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠘⢧⣍⠉⠁⢀⢏⡴⠃⢀⣿⠋⢠⠏⠀⠀⢠⠏⢰⠀⠀⠙⣄⠀⠀⠈⢩⠏⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⢀⠇⠀⢠⠇⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠈⠉⠛⠉⠉⠀⠀⢸⡟⢀⡏⠀⠀⢠⠏⠀⢸⡏⠉⠙⢏⠳⣄⠀⠛⠙⣆⠀⠀⠀⠀⠀⢠⡟⠀⠀⠀⡼⠀⣠⠏⢠⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣧⢸⠀⠀⠀⣾⠀⢤⣀⣧⠀⠀⠈⢇⠘⢦⠀⠀⠘⡆⠀⠀⠀⢀⡾⠁⠀⢀⡜⢀⡴⠃⠀⣼⠁⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢯⣇⠀⠀⠻⣤⣤⡿⢹⠀⠀⠀⢸⡄⠘⡆⠀⠀⢹⡀⠀⢀⡾⠁⠀⢠⠏⡠⠊⠀⢀⣴⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣳⢤⡤⠤⠞⠁⢸⠀⠀⠀⢀⡇⠀⡇⠀⠀⠀⡇⢠⡟⠀⠀⣰⣣⠎⠀⢀⡴⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠃⡾⠀⠀⠀⠀⣸⠀⠀⠀⣸⠁⢀⡇⠀⠀⠀⡇⡾⠀⠀⡴⣳⠃⣰⠞⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⢗⡾⠁⠀⠀⠀⢀⡟⠀⠀⢰⣇⣀⡞⠀⠀⠀⠀⡿⡇⠀⢰⠃⡇⠀⠙⠲⠤⠤⠶⠶⠶⠶⠿⣛⠒⢶⣤⡀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠓⠒⠒⠒⠒⠚⠁⠀⠀⠀⠉⠻⠤⠤⠤⠴⠚⠁⠙⠶⣼⣆⡹⢄⡀⢀⣀⣤⠴⠒⠛⠉⠉⠉⠙⠲⢝⡿⡆
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⢠⡄⠀⣸⡷⠇
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⡉⠁⠀

Hiiii. Welcome to my code. ✨🎃
-->


<!DOCTYPE html>
<html lang="en" translate="no">
<head>
    <meta charset="UTF-8">
    <title>About ✶</title>
    <link rel="icon" href="bath_mh_icon.ico">
    <link href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Creepster&family=Permanent+Marker&family=Pixelify+Sans:wght@400..700&family=Silkscreen:wght@400;700&family=Tiny5&display=swap"
        rel="stylesheet">
</head>

<body>
    <div id="main_container">
        <a id="back_home" href="index.html"><img src="controls_uwu/back_about.png" width="140px"> </a>

        <div id="header">        </div>
        <div id="aboutme">
            <h2 id="about_me_lang" style="text-align: center;">ABOUT ME</h2>
            <div id="picture">
                <img src="imagenes uwu/meee_uwu.png" width="150px">
            </div>
            <p id="intro_ali">
            </p>
            <ul id="about_ali">

            </ul>
            <P id="ali1"> </P>

            <p id="ali2"> </p>
            <p id="ali3"> </p>
            <p id="ali4"> </p>

            <marquee behaviour="loop" direction="right" style="width: 100%;">
                <img src="imagenes uwu/myflags_uwu.png" width="300px"> 
                <img src="gifs_uwu/pinky-pie_walk.gif" width="60px">
                <img src="gifs_uwu/fluttershy_walk.gif" width="74px">
                <img src="gifs_uwu/rarity_walk.gif" width="74px">
                <img src="gifs_uwu/twilight_walk.gif" width="74px">
                <img src="gifs_uwu/rainbow_walk.gif" width="74px">
                <img src="gifs_uwu/applejack_walk.gif" width="74px">
            </marquee>
        </div>
        <div id="aboutsite">
            <h2 id="aboutsite_lang"> </h2>
            <p id="site1"> </p>
            <img id="pinkie_malevola" src="gifs_uwu/pinkie_malvadahahhaa.gif">
            <p id="site2">  </p>
            <p id="site3"> </p>
            <p id="site4"> </p>
            <p id="site5"> </p>
            <marquee behaviour="loop" direction="right">
                <img src="gifs_uwu/kirby_walking.gif" width="100px">
            </marquee>
         </div>
        <div id="otherthings"> 
            <div id="hobbies_div">
                <h2 id="hobbies_lang"> </h2>
                <ul id="hobbies_ul">

                </ul>
            </div>
            <div id="likes_div">
                <h2 id="likes_lang">Gustos</h2>
                <ul id="likes_ul">
                </ul>
            </div>
            <div id="poketeam"> 
                <h2 id="poketeam_lang">Equipo Pokémon</h2>
                <div id="pokemon_box_uwu">
                    <div id="starmie_div">
                        <img src="gifs_uwu/starmie_menu.gif" id="starmie" width="80px"> 
                    </div>
                    <div id="crobat_div">
                        <img src="gifs_uwu/crobat_menu.gif" id="crobat" width="80px">
                    </div>
                    <div id="tyranitar_div">
                        <img src="gifs_uwu/tyranitar_menu.gif" id="tyranitar" width="80px">
                    </div>
                    <div id="blaziken_div">
                        <img src="gifs_uwu/blaziken_menu.gif" id="blaziken" width="80px">
                    </div>
                    <div id="dratini_div">
                        <img src="gifs_uwu/dratini_menu.gif" id="dratini" width="80px">
                    </div>
                    <div id="umbreon_div">
                        <img src="gifs_uwu/umbreon_menu.gif" id="umbreon" width="80px">
                    </div>
                </div>
            </div>
            <div id="favorite_div">
                <h2 id="favorite_albums">Albums favs</h2>
                <div class="gallery">
                    <div> <img src="album_covers_uwu/Peace_Sells.jpg"/> 
                        <span><a href="https://open.spotify.com/intl-es/album/4U8ZF5zDIRy4lBnnXBN2uO?si=liZJmruwTYmfiRJjaFmS_w" target="_blank">
                            Peace Sells... But Who's Buying?</a> - Megadeth</span> </div>  
                    <div> <img src="album_covers_uwu/Symbolic.jpg" /> 
                        <span><a href="https://open.spotify.com/intl-es/album/4YACrpVtdpoFocBPBeLbzO?si=ErqL1SclTeKTvsLTwlWAFA" 
                            target="_blank"> Symbolic</a> - Death </span> </div>
                    <div> <img src="album_covers_uwu/Alice_in_Hell.jpg" /> <span>
                        <a href="https://open.spotify.com/intl-es/album/5oKZacGOXxb7A2OwXgh9UY?si=GyH051HmRXWqictVfbK4JQ" 
                        target="_blank"> Alice in Hell</a> - Annihilator </span> </div>
                    <div> <img src="album_covers_uwu/Cause_of_Death.jpg" /> <span> <a href="https://open.spotify.com/intl-es/album/79fVRZLnIqS3FytTLfTBT4?si=jRxOG4BNRA6tIThw_pmsuQ"
                        target="_blank"> Cause of Death</a> - Obituary </span> </div>
                    <div> <img src="album_covers_uwu/Atheist_Unquestionable-Presence.jpg" /> <span><a href="https://open.spotify.com/intl-es/album/2JMEuDyva5OlVX1LU894vt?si=pf8XFKo1RLqV3EsXWTJW_w"
                        target="_blank">Unquestionable Presence</a> - Atheist</span> </div>
                    <div> <img src="album_covers_uwu/Painkiller.jpg" /> <span><a href="https://open.spotify.com/intl-es/album/7LgrhuKnAXpNEv8qzcVd2t?si=RT4VAGjOTMqRWazuf9k1gA"
                        target="_blank"> Painkiller</a> - Judas Priest </span> </div>       
                </div>
                <h2 id="videogames_lang"> </h2>
                <div id="videogames_favs" class="gallery">
                    <div>
                        <img src="videogames_covers/FinalFantasyVII.png"> <span>Final Fantasy VII</span>
                    </div>
                    <div>
                        <img src="videogames_covers/Red_Dead_Redemption_II.jpg"> <span>Red Dead Redemption II</span>
                    </div><div>
                        <img src="videogames_covers/resident_evil_gc.jpeg"> <span>Resident Evil Remake</span>
                    </div><div>
                        <img src="videogames_covers/Bloodborne.png"> <span>Bloodborne</span>
                    </div><div>
                        <img src="videogames_covers/paper_mario_64.png"> <span>Paper Mario 64</span>
                    </div><div>
                        <img src="videogames_covers/Banjo_Tooie.jpg"> <span>Banjo-Tooie</span>
                    </div>
                </div>
                <h2 id="characters_lang"> </h2>
                <div id="characters_favs" class="gallery">
                    <div>
                        <img src="imagenes uwu/jillpicturexd.jpg"> <span>Jill Valentine</span>
                    </div>
                    <div>
                        <img src="imagenes uwu/aerithuwuw.png"> <span>Aerith Gainsborough</span>
                    </div>
                    <div>
                        <img src="imagenes uwu/sephirothhh.png"> <span>Sephiroth </span>
                    </div>
                    <div>
                        <img src="imagenes uwu/fluttershy_lindaaa.jpg"> <span>Fluttershy</span>
                    </div>
                    <div>
                        <img src="imagenes uwu/alice_madness.png"> <span>Alice Lidell</span>
                    </div>
                    <div>
                        <img src="imagenes uwu/yor_forger.jpg"> <span>Yor Forger</span>
                    </div>
                </div>
            </div>
            <div id="random_fun_fact">
                <h2 id="fun_facts_lang"> </h2>
                <div>
                    <p id="random_message"> </p>
                </div>
                <button id="random_button_uwu" type="button">Click Me</button>
            </div>
        </div>

            <div class="dolls_uwu">
                <img id="vampiraa" src="gifs_uwu/vampirauwu.gif">
                <img id="white_bat" src="gifs_uwu/white_bat.gif">
                <img id="skull_laughter" src="gifs_uwu/skull_xd.gif">
            </div>
    </div>
    <marquee behaviour="loop" direction="left" style="width: 100%;">
        <div class="carruselomg">
            <img src="stamps_uwu/mlp.gif">
            <img src="stamps_uwu/wii.gif">
            <img src="stamps_uwu/mikuu.gif">
            <img src="stamps_uwu/20masgenial.gif">
            <img src="stamps_uwu/trans_flag_stamp.gif">
            <img src="stamps_uwu/lesbians.png">
            <img src="stamps_uwu/mettaton.png">
            <img src="stamps_uwu/kirby_stamps.png">
            <img src="stamps_uwu/gothmetal.gif">
            <img src="stamps_uwu/death_.png">
            <img src="stamps_uwu/Cannibal Corpse.gif">
            <img src="stamps_uwu/n64.gif">
            <img src="stamps_uwu/marcagod.gif">
            <img src="stamps_uwu/eeveeparade.gif">
            <img src="stamps_uwu/pinkie_stampuwu.gif">
            <img src="stamps_uwu/morrigan.png">
        </div>
    </marquee>
    <script src="translateuwu/translatescripts/about_lang.js"></script>
    <script src="AlisonScript/pokemon_sounds.js"></script>
    <script src="AlisonScript/randoms_funfacts.js"></script>
</body>

<style>
        :root {
        --header-image: url('gifs_uwu/about_title.gif');

        }

        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*/

        }
            @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: 45px;
            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-style: solid;
            border-radius: 8px;
            border-color: rgb(255, 12, 117);
            background-color: rgb(84, 27, 38, 0.9);
            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;
        }

        #aboutme ul {
            color: rgb(255, 186, 11);
            list-style-type: none;
            padding-left: 160px;
        }

        #aboutme ul li{
            text-decoration: none;
            margin-bottom: 4px; 
        }

        .aboutme_span {
            color: #ff0062;
            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 650px 180px; /*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: 1200px;
        }

        /*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-style: solid;
            border-radius: 8px;
            border-color: #ff0084;
            background-color: rgb(84, 27, 38, 0.9);
        }

        #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: rgb(255, 186, 11);
            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: rgb(255, 186, 11);
            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 {
            position: relative;
            margin: 5px;
            display: flex;
            justify-content: center; 
            gap: 10px;           
        }

        .gallery a {
            color: rgb(246, 220, 119);
            text-decoration: none;
        }

        .gallery > div {
            position: relative;
        }

        /*Para que la imagen 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;
        }

        .gallery div:hover img {
            transform: scale(1.35) rotate(10deg);
        }

        .gallery span {
            position: absolute;
            bottom: 15px;
            left: 0;
            box-sizing: border-box;
            background: rgba(85, 28, 48, 0.9);
            color: rgb(255, 255, 255);
            text-align: center;
            font-size: 18px;
            padding: 5px 10px;
            opacity: 0;
            transform: translateY(100px);
            transition: transform 0.4s ease, opacity 0.5s ease;
        }

        .gallery div:hover span {
            opacity: 1;
            transform: none;
        }

        #characters_favs {
            height: 130px;
        }

        #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: #ffd950;
            border-radius: 8px;
            background-color: rgb(84, 27, 38);
            color: #ffdc91;
            transition: all 0.3s ease-in-out;
        }

        #random_button_uwu:hover {
            border-color: rgb(68, 34, 46);
            background-color: #ffd950;
            color: rgb(84, 27, 38);
        }

        #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, el rosa de tu página */
        }

        #picture {
            /*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');
        }

        #picture img {
            filter: grayscale(70%) contrast(150%);
        }

        p {
            color: aliceblue;
            font-size: 18px;
        }

        h1 {
            color: #eaeaea;
            font-size: 50px;
        }

        h2 {
            color: #ffdc91;
        }

        /*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: #f40c76;
            /* Color del pulgar */
            border-radius: 2px;
            /* Bordes redondeados para el pulgar */
            border: 1px solid #ffaad5;
            /* Borde alrededor del pulgar */
            /* AJUSTA ESTOOOO!!!! 💀💀💀💀*/
            border-left: 1px solid #ff6ebc;
            border-right: 1px solid #ab005c;
            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: #f40c76;
        }

        ::-webkit-scrollbar-button:active {
            background-position: 2px 2px;
            background-color: #ffa5d5;
        }

        .carruselomg img {
            width: 120px; /* Cambia a 100px o el tamaño que prefieras */
        }

        #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;
            }

            }
</style>
</html>