@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@200;400;500&display=swap');


*,
*::after,
*::before{
    margin:0;
    padding:0;
    box-sizing: border-box;
    list-style: none;
}

main {
    padding-top: 0rem;
    align-items: flex-start;
    padding-left: 0rem;
    padding-right: 4rem;
    }

body{background-color: grey; 
    color: floralwhite; 
    font-family: 'Libre Franklin', sans-serif; 
    font-weight: 200;
    list-style-type: none;
    padding: 0rem;
}

.materiascursadas {
    padding-left: 5rem;
    
}
.niveles {
    padding-left: 0rem;  
    display: flex;
    width: 100%;
    box-sizing: 100%;
}

.caja1 {
    display: table-cell;
    margin: 1%;
    padding-left: 0rem;
    border-radius: 0%;
    background-color: rgb(68, 68, 68);
    padding: 1rem;
    margin-bottom: 0.5rem;
    margin-left: 0rem;
    
}

.caja2 {
    display: table-cell;
    margin: 1%;
    padding-left: 0rem;
    border-radius: 0%;
    background-color: rgb(68, 68, 68);
    padding: 1rem;
    min-height: 10rem;
    margin-bottom: 0.5rem;
    
}

.caja3 {
    display: table-cell;
    margin: 1%;
    padding-left: 0rem;
    border-radius: 0%;
    background-color: rgb(68, 68, 68);
    padding: 1rem;
    min-height: 10rem;
    margin-bottom: 0.5rem;
}

.caja4 {
    display: table-cell;
    margin: 1%;
    padding-left: 0rem;
    border-radius: 0%;
    background-color: rgb(68, 68, 68);
    padding: 1rem;
    min-height: 10rem;
    margin-bottom: 0.5rem;
}

.caja li {
    display: table-row;

}

header{ 
    background-color:rgb(68, 68, 68); 
    color: floralwhite; 
    font-family: 'Libre Franklin', sans-serif; 
    font-weight: 200;
    padding:0.5rem;
    width:100%;
    margin:0rem;
    box-sizing: content-box;
    text-decoration: none;
    display: flex;
    justify-content: center;

    }
    .header{
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 30px;

    }
    

    

    footer a span{ 
        text-align: center;
        color: floralwhite;
        font-weight: 400;
        font-size:40px;
        text-decoration: none;
        text-decoration-style: none;
        padding: 1rem;
        justify-content: center;
    }

    nav a{
        text-align: center;
        color: floralwhite;
        font-weight: 200;
        font-size: 15px;
        text-decoration: none;   
        padding: 0.5rem; 
        border-style:solid; 
        border-radius: 1px;
        display: inline-flex;
        }
    
    
    .linkactivo{
        background-color: rgb(102, 99, 99) ; padding: 0.5rem; margin: 0.5rem;
        padding: 20px;
        border-radius: 6px;
    }
    
    
    .linkactivo1{
        background-color: rgb(102, 99, 99) ; padding: 0.5rem; margin: 0.5rem;
        padding: 20px;
        border-radius: 6px;
    }
    .linkactivo1:hover{
        background-color: rgb(173, 173, 173) ;
    }
img{
    width: 250px;
    height: 250px;
}

.perfil img {
    border-radius: 50%;
    border: solid 3px floralwhite;
}

.perfil{ padding: 5rem;}

/* header{;
    text-align: center; 
    font-size: 1.4rem; 
    font-weight: 400;
} */

.uba {
    padding-left: 5rem;
    ;
}

footer {text-align: center; 
    color: black; 
    font-size: 1rem;
    padding: 2rem;
    padding-left: 5rem;
    padding-right: 5rem;
    justify-content: center;
    
}
.grupo-vn26{
    display:flex;
    justify-content: center;
    padding-bottom: 2rem;
}

@media (max-width:576px) {

    body{background:grey;
    justify-content: center;}
    header{
        display: inline-flex;
        text-align: center;
        position: relative;}
    ul li{list-style-type: none;}
    .caja1 {
        text-align: center;
        display: table-caption;}
    .caja2 {
        text-align: center;
            display: table-caption;}
    .caja3 {
        text-align: center;
            display: table-caption;}  
    .caja4 {
        text-align: center;
        display: table-caption;}      
    footer {
        text-align: center;
        padding: 1rem;}
    .uba {
        padding: 1rem;
        text-align: center;
        padding-left: 0.75rem;
        padding-right: 00.75rem;
    }
    .perfil {
        text-align: center;
        padding-top: 0rem;
        padding-left: 5rem;
        padding: 1rem;}
    .perfil img {
        align-items: center;
    }
    .materiascursadas {
        display: flex;
        padding-left: 1rem;}
    .niveles {
        padding-left: 1rem;
        align-items: center;
        display: table-caption;
    }
    nav a {
        display: table-cell;
        font-size: 12px;
        align-items: center; }

    .grupo-vn26 {
        display: inline-flex;
        text-align: center;
        position: relative;}
    }
    
    }