/*GENERAL*/
@charset "UTF-8"; 

@font-face {
    font-family: 'Encode Sans Semi Expanded'
    src url(font/EncodeSansSemiExpanded-Regular.woff2);}

@import url(https://fonts.googleapis.com/css?family=Amaranth:400,400i|Viga&display=swap');

/*font-family: 'Amaranth', sans-serif;
font-family: 'Encode Sans Semi Expanded', sans-serif;
font-family: 'Viga', sans-serif;*/

html {
    font-family: 'Encode Sans Semi Expanded', sans-serif;
}


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

body {
    background-color: #f4f4f4;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}



/*HEADER*/

header {
background-color: #0cab91;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

body header img {
    background-color: white;
    padding: .6rem;
    max-height: 3rem;
}

body header nav {
    background-color: #0cab91;
    display: flex;
    height: 3rem;
}

body header nav ul {
    list-style-type: none;
    background-color: #0cab91;
    display: flex;
}

body header nav ul li {
    display: flex;
}

body header nav ul li a {
    color: white;
    border-left: .07rem solid #0bb99c;
    background-color: #0cab91;
    text-decoration: none;
    padding: 1rem;
    font-size: small;
    font-family: 'Viga', sans-serif;
    
}

body header nav ul li a:hover {
    background-color: #0e937d
}


/*MAIN*/

body main {
    margin: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-wrap: wrap;
}

.personalinfo {
    margin-bottom: 2rem;
}

.avatar {
    border-radius: 50%;
    height: 150px;
    width: 150px;
    
}

.personalinfo div {
    margin: .5rem 0 0 0;
}

.personalinfo h1 {
    font-family: 'Amaranth', sans-serif;
}

.materias div {
    background-color: #dbdbdb;
    margin-bottom: 1rem;
    padding: 1rem;
}

.materias div ul {
    list-style: none;
}

.titulomaterias {
    border-bottom: .1em solid #0e937d;
    color: #0e937d;
    margin-bottom: .5rem
}

.portfolio {
    background-color: #FADE36;
    padding: .5rem;
    margin-top: 1rem;
}

.portfolio h4 {
    margin: 0;
    color: #333333;
}

footer {
    background-color: #333333;
    padding: 2rem;
    font-size: small;
    color: white;
}

.datosacademicos h3 {
    margin: 2rem 0 1rem 0;
}
.datosacademicos div div {
    background-color: #dbdbdb;
    margin-bottom: 1rem;
    padding: 1rem;
}

.datosacademicos div div h4 {
    color: #333333;
    font-size: small;
    margin-bottom: .5rem;
}

.datosacademicos div div ul {
    list-style: none;
    font-size: small;
}

.datosacademicos div div ul li {
}

body main section div div img.academico {
    width: 30%;
    height: auto;
    background-color: white;
    padding: .3rem;
    border-radius: .25rem;
}

.resaltado {
    font-weight: bold;
}


/*PLAN*/

.mainplan h1 {
    margin-bottom: 2rem;
}

.mainplan section h2 {
    color: #0e937d;
    border-bottom: .1em solid #0e937d;
    margin-bottom: 1rem;
}

.mainplan section h4 {
    margin-bottom: .5rem;
}

.mainplan section {
    margin-bottom: 2rem;
    background-color: #dbdbdb;
    padding: 1rem;
}
.mainplan section ul {
    list-style-position: outside;
    padding-left: 1rem;
}

.mainplan section ul li {
    margin-bottom: .5rem;
}


/*MAPA*/

.mapapersonal {
    max-width: 100%;
}


/*MEDIA QUERYS*/

@media ( min-width: 38rem ) {
    .personalinfo {
        display: flex;
        align-items: center;
    }
    .avatar {
        max-height: 6rem;
        max-width: 6rem;
        margin-right: 2rem;
    }
    
    .materias {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;        
    }
    
    .materias div {
    background-color: #dbdbdb;
    margin-right: 1rem;
}
    footer {
        display: flex;
        justify-content: center;
    }
    
    footer p {
        max-width: 30rem;
        text-align: center;
    }
}

@media ( min-width: 50rem ) {
        
    .mainplan div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .mainplan div section {
        margin: 0 2rem 0 0;
        width: 33%;
    }
    
    .datosacademicos div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .datosacademicos div div {
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .datosacademicos div div:first-child {
        margin-right: 1rem;        
    }
    .datosacademicos div div:last-child {
        margin-left: 1rem;        
    }
    
    .datosacademicos img {
        min-width: 10vh;
    }
}