/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body 
{
    height: 100%; /* Tamaño ventana */
}

body 
{
    /* FONDO (COLOR) */
    background-color: rgb(100, 173, 195);
    
    /* MARGEN */
    padding-top: 25px; 
    padding-bottom: 25px;
    margin: 0;
    transform: scale(1);
    zoom: 1.5;
}


@media (max-width: 600px) 
{
  body {
    transform: scale(0.4);        /* escala al 40% */
    transform-origin: top left;   /* escalado desde esquina superior izquierda */
    width: calc(100% / 0.4);     /* 100 / scale = 250% */
    height: calc(100% / 0.4);    /* 100 / scale = 250% */
    margin: 0;
  }
}

img 
{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* PRINCIPAL */
.pagina 
{

    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    display:flex;
    flex-direction: column;
}

/* ANUNCIO (PIE PÁGINA) */
#anuncio-pag 
{
    position: absolute;
    top: 10%;
    height: 50%;
    width: 100%;
    text-align:center;
    font-family: 'Tiny5';
}

/* TARJETA PRESENTACIÓN*/
.tarjeta-presentacion 
{
    position: fixed;
    height: 250px;
    width: 450px;
    border-radius: 12px;
    background-color: rgb(239, 246, 247);
    border: 1.8px solid rgb(53, 109, 125);  
    font-family: 'Tiny5';
}

#tp-foto 
{
    height: 120px;
    width: 100px;
    background-color: black;
    position: absolute;
    top: 25px;
    left: 25px;
    border: 1.6px solid rgb(127, 139, 141);
}

/* DIV APODO */
#tp-apodo 
{

    height: 20px;
    width: 100px;
    position: absolute;
    top: 155px;
    left: 25px;
}

/* RESPUESTA APODO */
#apodo 
{
    text-align: center;
    background-color: rgb(210, 226, 228);
}

#apodo:hover
{
    background-color: rgb(225, 223, 178); 
    cursor: pointer;
}

/* DIV PROYECTOS */
#tp-proyectos 
{
    height: 20px;
    width: 100px;
    position: absolute;
    top: 202px;
    left: 25px;
}

/* TITULO PROYECTOS */

#proyectos 
{
    text-align: center;
}

#proyectos:hover 
{
    color: rgb(184, 159, 0); 
    cursor: pointer;
}

/* DIV PUBLICADOS */
#tp-publicados 
{
    height: 20px;
    width: 100px;
    position: absolute;
    top: 182px;
    left: 25px;
}

/* TITULO PUBLICADOS */
#publicados 
{
    text-align: center;
}

#publicados:hover 
{
    color: rgb(184, 159, 0); 
    cursor: pointer;
}

/* DIV INTERESES */

#tp-intereses 
{
    height: 20px;
    width: 160px;
    position: absolute;
    top: 25px;
    left: 145px;
}

/* TITULO INTERESES */

#intereses 
{
    margin-left: 1px;
}

/* RESPUESTA INTERESES */

#res-intereses 
{
    height: 100%;
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    padding-top: 4px;
    padding-left: 5px;
}

#interes1,
#interes2,
#interes3 
{
    background-color: rgb(210, 226, 228);
    font-size: 12px;
}

#interes1 
{
    position: absolute;
    top: 24px;
    height: 100%;
    width: 30%;
    text-align: center;
    padding-top:4px;
    padding-left: 2px;
}

#interes2 
{
    position: absolute;
    top: 24px;
    left: 53px;
    height: 100%;
    width: 39%;
    text-align: center;
    padding-top:4px;
    padding-left: 2px;
}

#interes3 
{
    position: absolute;
    top: 24px;
    left: 120px;
    height: 100%;
    width: 28%;
    text-align: center;
    padding-top:4px;
    padding-left: 3px;
}

#interes1:hover,
#interes2:hover,
#interes3:hover 
{
    background-color: rgb(225, 223, 178); 
    cursor: pointer;
}


/* DIV IDIOMAS */

#tp-idiomas 
{
    height: 20px;
    width: 130px;
    position: absolute;
    top: 75px;
    left: 146px;
}

/* TITULO IDIOMAS */

#idiomas 
{
    margin-left: 1px;
}

/* RESPUESTA IDIOMAS*/

#res-idiomas 
{

    height: 100%;
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    padding-top: 4px;
    padding-left: 5px;

}

#idioma1,
#idioma2,
#idioma3,
#idioma4,
#idioma5 
{
    background-color: rgb(210, 226, 228);
    font-size: 12px;
}

#idioma1 
{
    position: absolute;
    top: 24px;
    height: 100%;
    width: 20%;
    text-align: center;
    padding-top:4px;
    padding-left: 1px;
}

#idioma2 
{
    position: absolute;
    top: 24px;
    left: 30px;
    height: 100%;
    width: 20%;
    text-align: center;
    padding-top:4px;
    padding-left: 1px;
}

#idioma3 
{
    position: absolute;
    top: 24px;
    left: 60px;
    height: 100%;
    width: 20%;
    text-align: center;
    padding-top:4px;
    padding-left: 1px;
}

#idioma4 
{
    position: absolute;
    top: 24px;
    left: 90px;
    height: 100%;
    width: 20%;
    text-align: center;
    padding-top:4px;
    padding-left: 2px;
}

#idioma5 
{
    position: absolute;
    top: 24px;
    left: 120px;
    height: 100%;
    width: 20%;
    text-align: center;
    padding-top:4px;
    padding-left: 2px;
}

#idioma1:hover,
#idioma2:hover,
#idioma3:hover,
#idioma4:hover,
#idioma5:hover 
{
    background-color: rgb(225, 223, 178); 
    cursor: pointer;
}


/* DIV FAVORITOS */
#tp-favoritos {
    
    height: 20px;
    width: 200px;
    position: absolute;
    top: 125px;
    left: 146px;
}

/* TITULO FAVORITOS */
#favoritos 
{
    margin-left: 1px;
}

/* RESPUESTA FAVORITOS */

#res-fav1, 
#res-fav2, 
#res-fav3, 
#res-fav4, 
#res-fav5, 
#res-fav6, 
#res-fav7, 
#res-fav8, 
#res-fav9, 
#res-fav10 
{
    background-color: rgb(210, 226, 228);
    font-size: 12px;
}

#res-fav1 
{
    position: absolute;
    top: 19px;
    height: 100%;
    width: 47%;
    margin-top: 4px;
    padding-top: 4px;
    padding-left: 7px;
}

#res-fav2 
{
    position: absolute;
    height: 100%;
    width: 37%;
    left: 143.2px;
    top: 19px;
    margin-top: 4px;
    padding-top: 4px;
    padding-left: 6px;  
}

#res-fav3 
{
    position: absolute;
    top: 42px;
    height: 100%;
    width: 26%;
    margin-top: 6px;
    padding-top: 4px;
    padding-left: 5px;
}

#res-fav4 
{
    position: absolute;
    left: 92px;
    top: 42px;
    height: 100%;
    width: 40%;
    margin-top: 6px;
    padding-top: 4px;
    padding-left: 6px;
}

#res-fav5 
{
    position: absolute;
    left: 57px;
    top: 42px;
    height: 100%;
    width: 15%;
    margin-top: 6px;
    padding-top: 4px;
    padding-left: 5px;
}

#res-fav6 
{
    position: absolute;
    left: 0px;
    top: 68px;
    height: 100%;
    width: 55%;
    margin-top: 6px;
    padding-top: 4px;
    padding-left: 5px;
}

#res-fav7 
{
    position: absolute;
    left: 160px;
    top: 68px;
    height: 100%;
    width: 28.5%;
    margin-top: 6px;
    padding-top: 4px;
    padding-left: 5px;
}

#res-fav8 
{
    position: absolute;
    left: 115px;
    top: 68px;
    height: 100%;
    width: 20%;
    margin-top: 6px;
    padding-top: 4px;
    padding-left: 6px;
}

#res-fav9 
{
    position: absolute;
    left: 177px;
    top: 42px;
    height: 100%;
    width: 20%;
    margin-top: 6px;
    padding-top: 4px;
    padding-left: 3px;
}

#res-fav10 
{
    position: absolute;
    left: 98.5px;
    top: 17px;
    height: 100%;
    width: 20%;
    margin-top: 6px;
    font-size: 13px;
    padding-top: 3.5px;
    padding-left: 9px;
}

#res-fav1:hover,
#res-fav2:hover,
#res-fav3:hover,
#res-fav4:hover,
#res-fav5:hover,
#res-fav6:hover,
#res-fav7:hover,
#res-fav8:hover,
#res-fav9:hover,
#res-fav10:hover 
{
    background-color: rgb(225, 223, 178); 
    cursor: pointer;
}

/* DERECHA */

#tp-biblio 
{
    height: 20px;
    width: 60px;
    position: absolute;
    top: 25px;
    left: 375px;
}

#biblio
{
    margin-left: 0px;
    text-align: center;
    font-size: 15px;
}

#res-biblio 
{
    position:absolute;
    height: 30px;
    width: 35px;
    margin-top: 4px;
    margin-left: 11px;
    background-color: rgb(210, 226, 228);
    font-size: 22px;
    text-align: center;
}

#res-biblio:hover {
   background-color: rgb(225, 223, 178); 
   cursor: pointer;
}

#tp-musica {

    height: 20px;
    width: 60px;
    position: absolute;
    top: 98px;
    left: 372px;

}

#musica 
{
    margin-left: 8px;
    text-align: center;
    font-size: 15px;
}

#res-musica 
{

    position:absolute;
    height: 30px;
    width: 35px;
    margin-top: 4px;
    margin-left: 14px;
    background-color: rgb(210, 226, 228);
    font-size: 26px;
    text-align: center;
    padding-top: 1px;
}

#res-musica:hover {

    background-color: rgb(225, 223, 178); 
   cursor: pointer;

}

#tp-juegos 
{
    height: 20px;
    width: 60px;
    position: absolute;
    top: 168px;
    left: 370px;
}

#juegos 
{
    margin-left: 5px;
    text-align: center;
    font-size: 15px;
}

#res-juegos 
{
    position:absolute;
    height: 30px;
    width: 35px;
    margin-top: 4px;
    margin-left: 15px;
    background-color: rgb(210, 226, 228);
    font-size: 20px;
    text-align: center;
    padding-top: 2px;
}

#res-juegos:hover 
{
    background-color: rgb(225, 223, 178); 
    cursor: pointer;
}