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;
}

#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(35, 236, 102);

}

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

.MODESACTIVE:hover
{

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

}

.HEADERIMAGE
{

    height: 70%;
    width: auto;

    margin-top: 5%;

}

/* === BODY === */

#BACKGROUND
{

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


}

#ad-space
{

    width: 34vw;
    height: 90vh;
    overflow: hidden; /* Para evitar que el contenido del anuncio se desborde */
    display: flex;

}

.adsbygoogle {

    width: 34vw;
    height: 100%; /* Altura mínima recomendada para anuncios */
    overflow: hidden;
}

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

    width: 66vw;
    height: 90vh;

    max-height: 90vh;

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

    color: white;

    overflow-y: auto;

    scrollbar-width: thin; /* Barra más delgada (para Firefox) */
    scrollbar-color: #555 transparent; /* Color de la barra y fondo (Firefox) */

}

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

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

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

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

#CONTAINER p
{

    line-height: 1.6;
    margin-left: 10%;
    margin-right: 10%;

}

#DONATEBUTTON
{

    height: 8%;
    width: 20%;
    background-color: rgb(74, 122, 100);
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0px 4px 10px rgba(173, 173, 173, 0.2);
  
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin-top: 5vh;
    margin-bottom: 10vh;

    color: white;


}

#DONATEBUTTON:hover
{

    background-color: rgb(52, 85, 62);

}

.DONATELOGO
{

    height: 70%;
    width: auto;

}

@media (max-width: 768px) 
{

    #HEADER
    {

        width: 100vw;
        height: 8vh;

    }

    #MODEBAR
    {

        height: 80%;
        width: 90%;

    }

    #BACKGROUND
    {

        width: 100vw;
        height: 100vh;
        flex-direction: column-reverse;

        overflow-y: auto;

    }

    #ad-space 
    {

        width: 100vw;
        height: 10vh;
        max-height: 10vh;

        overflow: hidden; /* Para evitar que el contenido del anuncio se desborde */
        position: relative; /* Asegura que el anuncio se quede dentro del contenedor */


    }

    #CONTAINER
    {

        width: 100vw;
        height: 80vh;

    }

    #DONATEBUTTON
    {

        width: 50%;

    }

}