@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Bitter:400,400i,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(245, 244, 244)
    }
body p{
    font-family: 'Open Sans', sans-serif;
    font-size: .8em;
    text-align: left;
}
header{
    width:70%;
    margin-left: auto;
    margin-right: auto;
}
header h1{
    margin-left:auto;
    font-family: 'Bitter', serif;
    text-align: center;
    margin: 20px;
}
header h1 span{
    color:rgb(255, 123, 123); 
}
header h2{
    font-family: 'Bitter', serif;
    font-weight: 400;
}
header img{
    height: 9em;
    margin:0 3em 3em 3em;
}
header .caja{
    display: flex;
    justify-content: center;
}
header .perfil{
    width: 60%;
    margin-right: 4em;
}
.perfil ul{
    display: flex;
    flex-direction: row;
    
    
}

.perfil ul li{
    list-style: none;
    margin: 5px;
    width: 100px;
    background-color: rgb(255, 123, 123);
    text-align: center;
    border-radius: 5px;
}

.perfil ul li:hover{
    opacity: .5;
}

.perfil ul li a{
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    
    
    color: white;
}
header p {
    padding: 1em 0em;
}
header nav{
    clear:both;
}
header nav ul{
    background-color: rgb(255, 123, 123);
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    list-style: none;
        margin:0 0 1.2em 0;
        padding:.6em;
        display:flex;
            flex-direction:row;
            align-content: space-around;
            justify-content:space-around;
    }
header nav ul li a{
    color: #fffff4;
    text-decoration:none;
    display:block;
    text-align:center;
    }
main{
    width:70%;
    margin-left: auto;
    margin-right: auto;
}
main section{
    justify-content: flex-start;
}
main section h2{
    margin-left:auto;
    font-family: 'Bitter', serif;
    font-weight: 100;
    font-size: 1.3em;
    margin: 0 2em;
    width: 200px;
}
main section h3{
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    margin: 1em 0;
    color: rgb(92, 115, 190);
}
.materias{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nivel1{
    width: 120px;
    margin:0;
}
.nivel2{
    width: 120px;
}

.nivel1 h3 span{
    color: rgb(255, 123, 123);
}

.contenido1{
    width: 600px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

main section ul li{
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    list-style: none;
    margin:0;
    padding:0;
    }

main section img{
    width:200px;
    height: 200px;
}
main .destacado{
    float:right;
    background-color: rgba(255, 123, 123, 0.53);
    width: 200px;
    padding: 1em;
    height: 600px;

}
.destacado p{
    text-align: center;
    font-size: 12px;
}
section{
        margin: 1em;
}
body main section #tp{
    background-color: aqua;
    width: 40%;
    height 5vh;
}

.contenido2{
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.grupal{
    width: 600px;
    
}


footer{
    background-color: rgb(216, 216, 216);
    margin: 5em 5em 5em 5em;
    padding: 1em;
    font-size: .8em;
    display: block;
}