body 
{
    font-family: 'Rubik', sans-serif;
}

html, body 
{
    margin: 0;          /* Eliminar márgenes predeterminados */
    padding: 0;         /* Eliminar padding predeterminado */
    width: 100vw;        /* Asegurar que cubra todo el ancho */
    height: 100vh;       /* Asegurar que cubra toda la altura */
    box-sizing: border-box;
    background-color: rgb(3, 3, 3);
}

img 
{
    user-select: none; 
}

#DATAMANAGEMENT
{

    display: none;

}

/*================== HEADER ===================*/

#HEADER
{

    width: 100vw;
    height: 10vh;

    background-color: rgb(3, 3, 3);

    display: flex;
    align-items: center;
    justify-content: center;

}

#MODEBAR
{

    width: 30%;
    height: 80%;

    background-color: rgb(21, 20, 24);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(173, 173, 173, 0.2);

}

.MODES
{

    height: 80%;
    width: auto;

    cursor: pointer;
    transition: background-color 0.3s;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 8%;
    padding-left: 2%;
    padding-right: 2%;

    border-radius: 10px;

}

.MODES img {
    display: block;
    margin: auto;
}

.MODES:hover
{

    background-color: rgb(43, 43, 48);

}

.MODESACTIVE
{

    height: 80%;
    width: auto;

    cursor: pointer;
    transition: background-color 0.3s;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 8%;
    padding-left: 2%;
    padding-right: 2%;

    border-radius: 10px;

    background-color: rgb(236, 35, 37);

}

.MODESACTIVE img {
    display: block;
    margin: auto;
}

.MODESACTIVE:hover
{

    background-color: rgb(206, 30, 33);

}

.HEADERIMAGE
{

    height: 70%;
    width: auto;

    margin-top: 5%;

}

/*================= BODY ===================*/

#BACKGROUND
{

    background-color: rgb(3, 3, 3);
    width: 100vw;
    height: 90vh; /* Altura del viewport */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
    overflow: hidden;

}

#CONTAINER
{
    /*background-color: rgb(38, 42, 51); */
    background-color: rgb(3, 3, 3);
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0.5%;

    width: 26vw;
    height: 80vh;
    border-radius: 25px;

    margin-left: 4%;
    margin-right: 4%;

    color: white;

    overflow-y: auto;
    


}

.NORMALTEXT
{

    font-family: 'Gabarito';

}

#ATTEMPTCOUNTER
{

    width: 80%;
    height: auto;
    margin-bottom: 5%;

}

#LOGO
{

    width: 90%;
    height: auto;

}

#SEARCHBAR
{

    width: 60%;
    height: 5%;
    border-radius: 50px;

    font-family: 'Gabarito';
    font-size: large;
    text-align: center;
    margin-bottom: 5%;
    

}

#SUGGESTIONBOX
{

    width: 60%;
    height: 30%;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-color: rgb(21, 20, 24);

}

#HINT
{

    margin-bottom: 20px;

}

.pokemonSuggestionContainerDiv
{

    width: 100%;
    height: 33%;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    font-size: 14px;


}

.pokemonSuggestionContainerDiv:hover
{

    background-color: rgb(33, 31, 37);

}

.pokemonIcon1
{

    height: 70%;
    width: auto;
    margin-bottom: auto;


}

#LEFTCONTAINER
{

    width: 33vw;
    height: 100vh;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: center;

    max-height: 90vh;
    max-width: 33vw;
    overflow: hidden;

}

#RIGHTCONTAINER
{

    width: 33vw;
    height: 100vh;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: center;

    max-height: 90vh;
    max-width: 33vw;
    overflow: hidden;

}

.AD-CONTAINER
{

    width: 90%;
    height: 45%;
    max-height: 45%;
    overflow: hidden;
    display: flex; /* Mantén flex para el contenido */
    justify-content: center; /* Centra el anuncio */
    align-items: center;
    padding: 1%;
}

.ad-space
{

    width: 100%;
    height: 100%;
    overflow: hidden; /* Para evitar que el contenido del anuncio se desborde */
    display: flex;
    display: flex; /* Mantén flex para el contenido */
    justify-content: center; /* Centra el anuncio */
    align-items: center;

    max-height: 100%;

}

.adsbygoogle {

    width: 90%;
    max-width: 90%;
    height: 45vh;
    max-height: 45vh;
    overflow: hidden;
}

#HINTSCONTAINER
{

    width: 80%;
    height: 35vh;
    min-height: 35vh;
    max-height: 35vh;
    margin: 5%;

    background: linear-gradient(to bottom, rgb(9, 33, 45, 0.8), rgb(38, 25, 46, 0.8));

    justify-content: center;
    align-items: center;
    text-align: center;

    color: white;
    border-radius: 25px;

    overflow-y: auto;

    scrollbar-width: thin; /* Barra más delgada (para Firefox) */
    scrollbar-color: #555 transparent; /* Color de la barra y fondo (Firefox) */
    box-shadow: 0px 4px 10px rgba(173, 173, 173, 0.2);

}


/* Para navegadores basados en WebKit (Chrome, Edge, Safari) */
#HINTSCONTAINER::-webkit-scrollbar {
    width: 6px; /* Ancho de la barra */
    background-color: transparent; /* Fondo de la barra (opcional) */
}

#HINTSCONTAINER::-webkit-scrollbar-thumb {
    background-color: #555; /* Color de la barra */
    border-radius: 10px; /* Bordes redondeados */
}

#HINTSCONTAINER::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* Color al pasar el mouse */
}

#HINTSCONTAINER::-webkit-scrollbar-track {
    background: transparent; /* Fondo del track (opcional) */
}

.bold-text {
    font-weight: bold;
}

#GUESSESCONTAINER
{

    width: 80%;
    height: 35vh;
    max-height: 35vh;
    min-height: 35vh;

    margin: 5%;
    background: linear-gradient(to bottom, rgb(9, 33, 45, 0.8), rgb(38, 25, 46, 0.8)); /* Degradado de azul a morado */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    color: white;
    border-radius: 25px;

    overflow-y:hidden;
    box-shadow: 0px 4px 10px rgba(173, 173, 173, 0.2);

}

#GUESSESCONTAINER2
{

    width: 90%;
    height: 60%;
    background-color: rgb(84, 172, 184, 0.05);
    border-radius: 25px;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    flex-wrap: wrap;
    
}

#GUESSESCONTAINER2 img
{

    margin: auto;
    margin-left: 7%;
    margin-right: 7%;

}

.GUESSES
{

    height: 20%;
    width: auto;

}


.GUESSESMADE
{

    margin-left: 2%;
    margin-right: 2%;
    height: 30%;
    width: auto;

}

#MOBILEGUESSES
{

    display: none;

}

.GUESSESm
{

    height: 20%;
    width: auto;
    margin: 4%;

}

#MISCCONTAINER
{

    width: 90%;
    height: 10%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;

}


@media (max-width: 768px) 
{

    #HEADER
    {

        width: 100vw;
        height: 8vh;

    }

    #MODEBAR
    {

        border-radius: 30px;
        height: 80%;
        width: 90%;

    }

    input#SEARCHBAR {
    -webkit-user-select: none; /* Evita comportamientos extraños en iOS */
    user-select: none; /* Lo mismo en otros navegadores */
    }


    #BACKGROUND
    {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;

        width: 100vw;
        height: 100vh;

    }

    #LEFTCONTAINER
    {

        height: 10vh; /*SOLÍA SER 10%*/
        max-height: 10vh;

    }

    #AD-CONTAINER
    {

        display: flex;
        width: 100vw;
        height: 10vh; /*SOLÍA SER 10%*/
        max-height: 10vh;
        overflow: hidden; 
        position: relative; 

    }
    
    #ad-space 
    {
        display: flex;
        width: 100vw;
        height: 10vh; /*SOLÍA SER 10%*/
        max-height: 10vh;
        overflow: hidden; 
        position: relative; 
    }

    .adsbygoogle {
        width: 100vw;
        height: 10vh; /* Altura mínima recomendada para anuncios */
        max-height: 100%;
        overflow: hidden;
    }

    #CONTAINER
    {

        display: flex;
        width: 100vw;
        height: 60vh;

        min-height: 60vh;

    }
    #RIGHTCONTAINER
    {

        display: flex;
        flex-direction: column;
        min-width: 100vw;
        width: 100vw;
        height: 25vh;
        overflow: auto;

    }

    #AD-CONTAINER-2
    {

        display: none;

    }

    #ad-space-2
    {

        display: none;

    }

    #HINTSCONTAINER
    {

        min-height: 90%;
        height: 90%;

        width: 90%;

    }

    #ATTEMPTCOUNTER
    {

        width: 60%;
        height: auto;
        margin-bottom: 1%;

    }
    
    #LOGO
    {

        width: 70%;
        height: auto;

    }

    #SUGGESTIONBOX
    {

        width: 60%;
        height: 20%;
        border-radius: 25px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: rgb(21, 20, 24);

    }

    .pokemonSuggestionContainerDiv
    {

        height: 50%;

    }

    #MOBILEGUESSES
    {

        display: flex;
        flex-direction: row;
        width: 90%;
        height: 15%;
        overflow: hidden;

        align-items: center;
        justify-content: center;

    }

    .GUESSESMADEm
    {

        height: 50%;
        width: auto;
        margin-bottom: auto;
        margin-top: auto;

    }

    #DATAMANAGEMENT
    {

        display: none;

    }

    #GUESSESCONTAINER
    {

        display: none;

    }

    

}