@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,500;1,500&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans';
}


body{ 
    background-color: black;
    color: white;
    margin-top: 75px;
    margin-left: 0; /*margen para la navbar, agregar manualmente al texto de ser necesario*/
}

/*posicionamiento y tamaño del logo del header*/
.logo_pos{
    height: 75px;
    width: 150px;
}
.p_prox{
    position: absolute;
    display: flex;
    left: 47%;
    top: 60%;
}
/* Logo principal */
.logo_idm_gif{
    position: absolute;
    display: flex;
    left: 44.7%;
    top:45%;
    height: 100px;
    width: 200px;
}
.logo_inst{
    position: absolute;
    display: flex;
    left: 50%;
    top: 65%;
    text-decoration: none;
    color: white;
}
.logo_yt{
    position: absolute;
    display: flex;
    left: 49%;
    top: 65%;
    text-decoration: none;
    color: white;
}
/* Logos marcas de abajo */
.logo_tc2000{
    position: absolute;
    display: flex;
    left: 43%;
    top: 71%;
    height: 35px;
    width: 90px;
}
.logo_tr{
    position: absolute;
    display: flex;
    left: 48%;
    top: 71%;
    height: 30px;
    width: 90px;
}
.logo_formulan{
    position: absolute;
    display: flex;
    left: 53%;
    top: 71%;
    height: 30px;
    width: 90px;
}
#contador{
    position: absolute;
    display: flex;
    left: 47%;
    top: 68%;
    opacity: 0;
    animation: fadeIn 3s forwards;
}
@keyframes fadeIn{
    to{
        opacity: 1;
    }
}
@media(max-width:800px){
    .logo_idm_gif{
        left: 35%;
    }
    .p_prox{
        left: 42%;
        top: 65%;
    }
    .logo_yt{
        left: 45%;
        top: 72%;
    }
    .logo_inst{
        left: 55%;
        top: 72%;
    }
    #contador{
        left: 41%;
    }
    .logo_tc2000{
        top: 76%;
        left: 43%;
    }
    .logo_tr{
        top: 80%;
        left: 43%;
    }
    .logo_formulan{
        top: 84%;
        left: 43%;
    }
}