@charset "utf-8";

html{
    height: -webkit-fill-available;
}


body{
    background-color: #EDF1F7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    min-height: -webkit-fill-available;
}

/*header*/

header{
    background-color:#683e68;
    
}

header .contenedor{
    display: flex;
    justify-content:space-between;
    align-items: center;
}

#logo{
    width:5em;
    margin-left: 4em;
    
}

header ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  
}

header ul li{
    
    width: 4em;
    margin-left: 4em;
    margin-right: 4em;
    display: flex;   
}

header ul li a{
    color: white;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family:arial;
    font-weight: 700;
    display: block; 
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

header ul li a:hover{
    background-color: white;
    color: #020101;
}


/*main*/

main{
    background-color:#EDF1F7;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    }

.presentacion{
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    margin-bottom: 3em;
    text-align: center;
    max-width: 20em;
}

h1{
    font-family: arial;
    font-style: italic;
    text-align: center;
    color:#c196c1;
}

#imagen{
    width:12em;
    display:block;
    margin:auto;
    border-radius: 10em;
    border: .50em solid #c196c1;
  
}
.presentacion p{
    font-family: arial;
    color: #3d3d3d;
    
}

.titulos h2{
    font-family: arial;
    background-color: #683e68;
    color: white;
    text-align: center;
    
}

h2{
    font-family: arial;
}


#materias{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    flex-wrap: wrap; 
    
}


 .curso{
    background-color:white;
    width:30em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 1em ;
    border: 1px solid #d1d1d1;
    
}


.aprobadas{
    background-color:white;
    width:30em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 1em;
    border: 1px solid #d1d1d1;
    

}

.faltantes{
    background-color:white;
    width:30em;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    border-radius: 1em;
    border: 1px solid #d1d1d1;
}

#materias ul{
    margin-top: 0;
}
#materias ul li {
    font-family: arial;
    list-style:none;
    text-align: center;
    margin-right: 2.5em;
    color: #3d3d3d;

}

#materias h2{
    margin-bottom: .5em;
    color:#c196c1;
}


#integrantes p{
    text-align: center;
    font-family: arial;
    font-weight: 700;
    background-color: #c196c1;
    padding: 6px
    
}

#integrantes p a{
    text-decoration: none;
    color:white;
    
    
}

#integrantes p:hover{
    background-color:white;
    
}
#integrantes a:hover{
    color: #c196c1;
}



#transbordador{
    text-align: center;
    display: flex;
    flex-direction:row;
    justify-content:space-around;
    flex-wrap: wrap; 
}

.historia{
    background-color: white;
    width:45em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 1em;
    margin-bottom: .50em;
    border: 1px solid #d1d1d1;
    
}

.webapp{
    background-color:white;
    width:45em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 1em;
    margin-bottom: .50em;
    border: 1px solid #d1d1d1;
    
   }
 
section img{
    max-width: 100%;
}

section h3{
    font-family: arial;
    color: #c196c1;
}

#transbordador p{
    font-family: arial;
    color: #3d3d3d;
    font-size: 15px;
    padding: 5px;
    text-align: left;
}

/*footer*/
footer{
    font-family: arial;
    color: #3d3d3d;
    font-size: 12px;
    text-align: center;
  }  

    
    
}