@font-face {
    font-family: 'cursivanombre';  
    src: url(../fonts/cursivanombre.ttf);}

    
    
html{font-size: 16px;}
*{box-sizing: border-box;}

body {background: darkslateblue ; font-family: sans-serif}


/* Logo, VN 21 */
header {background: darkslateblue;}
header nav ul {
    text-align: right;
    text-decoration: none;
    list-style-type: none;
    color: black;     
    font-weight: bold;   
    font-size: 1.2rem;
    font-family: 'Handlee', cursive;
    margin: 0rem;
    }
header a:hover { color: #cfdae2;}

/* Florencia Gonzalo y foto */
.nombre {background: #365b8e; padding: 1rem 0rem 0.5rem 0rem;}
.nombre h2 {
    font-size: 1.8rem; 
    text-align: center; 
    margin: 1rem 0rem 0rem 0rem; 
    font-family: 'cursivanombre';}
.nombre img {
    display: block;
    margin:auto;}
.nombre h3 {
    color: #cfdae2; 
    text-align: center; 
    font-size: 1.5rem; 
    margin: 0.5rem 0rem 0rem 0rem;
    font-family: 'Handlee', cursive;}

/* Niveles y materias */
.materias {
    display: flex;
    flex-direction: row ;
    justify-content: space-around;
    font-family: 'Kalam', cursive;
}
.materias ul {
    list-style-type: none;
    font-size: 0.7rem;}
.materias h4 {
    text-align: center;
    color: cadetblue;}
.materias p {
    font-size: 0.8rem;
    font-family: 'Handlee', cursive;
    color: #b2b2b2;
}

/* separador*/
.separador p {
background: #faecec; 
text-align: center;
font-size: 0.3rem;
margin: 3rem 0rem 3rem 0rem;}

/* Compañeros */
.compa nav ul { 
    text-align: center;
    list-style-type: none;
    display: flex;
    justify-content: space-around;}
.compa nav ul a {
    text-decoration: none;
    color: #cfdae2;
    padding: 0.8rem;
    text-align: center;
    font-family: 'Handlee', cursive;}
.compa ul a:hover {
    background: #4f9690}

/*volver*/
nav a{text-decoration: none; 
    color: cadetblue;
    text-align: center;
    font-family: 'Kalam', cursive;}
nav a:hover { color: #cfdae2;}


.ubafadu {text-align: center; color: #7c7577; font-size: 0.8rem; padding: 0rem;font-family: 'Kalam', cursive;}
.cuatrim {font-weight: bold;font-family: 'Kalam', cursive;}

/* pie de pagina*/
footer {border: 0.5rem;}
footer p {color:#7c7577; text-align: center; font-size: 0.8rem; padding: 0rem 2rem 1rem 2rem;
font-family: 'Kalam', cursive;}


@media (max-width:650px) 
{
    header nav ul { 
        text-align: center;
    }
    .materias {  
        flex-direction: column;
        text-align: center;
    } 
    .compa nav ul a {
        font-size: 1rem;
    }
    .ubafadu {
        line-height: 0.7rem;
        padding: 0rem 0.8rem 0rem 0.8rem;
        margin: 0rem;
    }
    footer p {
        line-height: 0.7rem;
        padding: 0rem 0.8rem 0.5rem 0.8rem;
    }
}