@charset "utf-8";

html {
    background-color: #FCFCFC;}

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



body { 
    margin: 1em; 
    padding: 0.5em; } 


header nav ul li{
    display: inline-block; }
nav *{color:black ;
font-family: 'Roboto', sans-serif; font-size: 1em ; } 

nav{
    text-decoration: none;
    display: block;
    text-align: right;
    display: block;
    justify-content: flex-end;
    list-style: none;
    font-family: 'Lato', sans-serif; 
padding-bottom: 1em}


.logocatedra {  display: flex; flex-direction: column}



#sectionprincipal1 { display: flex;
flex-direction: column}

.parteplay1{ display: flex; flex-direction: column;  }

.personal1 { display: flex; flex-direction: column; margin: auto; ; padding: 0.5em; border-radius: 1em ; margin-top: 0.5em; background-color: #f0f0f0}

.academico1 { display: flex; flex-direction: column ; background-color: #392943; ; padding: 0.5em; border-radius: 1em; border: 1px solid #191919; ; margin-top: 0.5em}

.sectionwebapp1 
{display: flex; flex-direction: column  ;}

.parteboceto1 { display: flex; flex-direction: column; ; padding: 0.5em ;border-radius: 1em; border: 1px solid #191919 ; margin-top: 0.5em; background-color: #d7cfdb}

.resultadofinalapp1 {display: flex; flex-direction: column; ; padding: 0.5em ; border-radius: 1em; border: 1px solid #191919; margin-top: 0.5em}


#section1alan { display: flex; flex-direction: column}

.relato {margin-bottom: 1em; margin-top: 1.5em}

.carreradg1 { background : linear-gradient(90deg, rgba(66, 239, 180, 1) 0%, rgba(241, 243, 31, 1) 100%) ;padding: 0.3em; margin-top: 0.5em; margin-bottom: 0.5em; max-width: 1000%;
border: 1px solid #191919;border-radius: 0.5em; text-align: center}

.materiascurso1 {margin-top: 0.3em; color: #f4f4f4; margin-bottom: 0.3em}


.academico1 ul li {list-style:none; color: #ae8ccb ; border-bottom: solid 1px; max-width: 100%; margin-top: 0.2em;}

.textodicealan {color: #f4f4f4; margin-top: 1em}

.carrera1 {color: #f4f4f4}

.imagenalan img {box-sizing: content-box ; 
    margin-top: 0.5em; 
    margin-bottom: 1em;    
    width: 60% ; max-width: 15em;
    border-radius: 9em; }

.centrarimagen1 {align-content: center}

.lista1 {; color: #f4f4f4}


.imgwebapp {margin-top: 1em}

.imgwebapp img   { border-radius: 0.5em ;width: 20%; }

.conclus1 {margin-top: 1em}


h1 {color: cadetblue;
    display: flex;
    flex-direction: column; 
    margin-top: 0em;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 4em;
    font-weight: 300}


h2 {color: #1f1f1f;
    margin:;
    margin-top: ;
    text-align: ;
    font-family: 'Lato', sans-serif;
    font-size: 1.9em;
    font-weight: 400 }


h3 {color: #1f1f1f;
    margin:;
    margin-top: ;
    text-align: ;
    font-family: 'Lato', sans-serif;
    font-size: 1.4em;
    font-weight:400 }

h4 {color: #1f1f1f;
    margin:;
    margin-top: ;
    text-align: ;
    font-family: 'Lato', sans-serif;
    font-size: 1.05em;
    font-weight:400 }

h5 {color: #1f1f1f;
    margin:;
    margin-top: ;
    text-align: ;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    font-weight:400 }

h6 {color: #1f1f1f;
    margin:;
    margin-top: ;
    text-align: ;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    font-weight:300 }




.minombre {color: #f7f7f7; text-align: left; position: absolute; z-index: 2; background-color: rgb(33, 33, 33, 0.4); top: 5em; margin-left: 0.5em }


.overlay {height: 100vh;
width: 90vw;
top: 8em; left: 5em; max-width: 80%; 
position: absolute; 
background: #000000;
z-index: 1;
opacity: 0.5}


    
footer {color:white ; 
        background-color:  #909090;  
        margin-left: 0.5 ; 
        padding: 0.5em; padding-top: 1em; padding-bottom: 1em; 
        justify-content: center ;
        font-family: 'Roboto', sans-serif;
        font-size: 0.8em ;
        display: flex;
        flex-direction: column} 

.separadorfot {padding-top: 2em}





@media (min-width: 1117px) { 
#section1alan {flex-direction: row}
    .overlay { max-height: 25%; } 
    .personal1 {width: 50% ;}
}

@media (min-width: 768px) { 
     .overlay { max-height: 25% }
    .videodefondo { max-height: 10%}
    .videodefondo video {}
    #section1alan {flex-direction: row}
    .personal1 {width: 50%;}
    .academico1 {width: 50%; margin-left: 0.5em;}
    .sectionwebapp1 {flex-direction: row}
    .parteboceto1 {width: 50%;}
    .resultadofinalapp1 {width: 50%; margin-left: 0.5em;}
}

@media (max-width: 375px) { 
    #section1alan {}
    .personal1 {width: 100%;}
    .overlay { ;max-height: 24% ; top 1em; left: 2em; }}
.videodefondo { ;max-height: 30%}
.videodefondo video {max-height: 30%}
.minombre {margin: auto ; font-size: 2.8em; max-width: 90%}
}