@charset "utf-8";

main, body, section {
    margin: 20px auto;
    max-width: 1000px;
}

body {
    background: rgba(242, 199, 242, 0.24);
    
  
}

/* ----------- avaatar ----------- */
#liz{

    max-width: 100%;
    border-radius: 100em;
    margin: 2.2em auto 2em auto;
    display: block;
     box-shadow: 0 .35em .5em rgba(0, 0, 0, .35);
   
}  

/* ----------- menú ----------- */

.menu {
    display: flex;
    justify-content: space-around;
    font-family: 'Roboto Condensed', sans-serif;
   
}
.menu ul{
    list-style: none;
    padding: 0em;
}
.menu ul li{
    float: right;
    background-color:rgb(86, 18, 106);
    margin: 0.2em;
    padding: .5em;
    border-radius: 4em;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .35);
}

.menu ul :hover{
    background-color:#d8b8dd;
    color: rgb(86, 18, 106);
    
}


.menu ul a{
    justify-content: center;
    text-decoration: none;
    color:white;
    font-size:10pt;
    font-weight: 500;
}


/* ----------- redes----------- */
.redes {
    max-height: 2em;
    min-height: 1em;
    padding: 4pt;
    margin-bottom: 3pt;
    flex-direction: column-reverse;
    max-width: 100%;
    border-radius: 100em;
    margin: 2.2em auto 2em auto;
    display: block;
     box-shadow: 0 .35em .5em rgba(0, 0, 0, .35);
}

/* ----------- main ----------- */
main {
    width: 83%;

    background-color: rgba(242, 199, 242, 0.24);
    padding: 1em;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 10pt;
   
}

main {
    flex-grow: 1;
}
h1{text-align: center;
    font-size: 2.6em;
    color:#6d1388;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
    line-height: 1em;
    margin: 0.7em 0 0.3em 0;
    
    }
h2 {text-align: center;
    background-color: #e6d1e8;
    padding: 2pt;
    padding-left: 7pt;
    color: #471677;
        
    
    
}
#soy{text-align: center;
    color: #48135f;
    
     
}

h5{text-align: center;
    color:#490b6a;
    
}

h3 {
    text-decoration: none;
    list-style: none;
    color: #db79b9;
    background-color: 
   
}

h4
{
    justify-content: center;
    margin: 1em;
    color: #5c177b 
    
}
#materias ul{
    color:#823690
    
}


/* ----------- main/equipo ----------- */
  
 #equipo ul li a {
    color:purple;
    text-decoration: underline;
}

#equipo ul li a:hover {
    color: hotpink;
}




footer{
  font-family: 'Roboto Condensed', sans-serif;
    padding: 28pt;
    padding-top: 7pt;
    padding-bottom: 7pt;
    background: #59156d;
    color:white;
    font-size: 8.5pt;
    border-radius: 20px;
    
   }
/* ----------- mapa ----------- */ 

#mapa {
    display: flex;
    max-width: 800%;
}
#map{
    max-width:100%;
    height: auto;    
}

article nav ul li a:hover {
    background-color:#c76cc7 ;
    color:white;
    border-radius: 100px;   
       
}

article ul{
    display: flex;
   flex-direction: column;
    justify-content: center;
    align-content:center;
    
}

article ul li{
    margin: 0.5em;
    font-weight: bold;
    text-align: center;
    font-size: 0.9em;
    display: block;
    padding: 0.4em 0.9em 0.4em 0em;
  

}

article ul li a{ 
   background-color: #7c129b;
   color: aliceblue;
   padding: 0.3em 0.3em;
   margin: 0;
    border-radius: 10em;
   text-decoration: none;
   
}
/* ----------- pertenencia ----------- */



#pertenencia{
    text-decoration: none;
    color: darkmagenta;
    
}
#pertenencia a:hover {
    text-decoration: none;
}

/* ----------- plan ----------- */ 
  
    
#obj { 
  
    color: purple;
    
}
#obj p{
    padding: .1em;
  
}

/* -----------GALERIA ----------- */ 
#web{
    max-width: 100%;
}
#webapp{
    max-width:100%;
}

/* --------- RESPONSIVE --------- */

/*560px de ancho*/

@media (max-width: 35em){
    header {
        justify-content: space-around;
       
    }
   header nav button {
        display: none;
     
    
    }
    
    header nav ul {
        display: flex;
        flex-wrap: wrap;
        
    }
    
    header nav ul {
        flex-basis: 25%;
       
    }
    
 
     #map{
        width: 90%;
        height: auto;
    }
   
    #webapp{
        width: 100%; 
       
    } 
    
/*640px de ancho*/ 
    
    
@media (min-width: 40em){
    #map{
        width: 90%;
        height: auto;
    }
   
    #webapp{
        width: 90%; 
       
    }
    
     .galeria{
        top: 0;
        transition: all .5s ease-in;
    }
    
}    
    
/*800px de ancho*/
    
    
@media (min-width: 50em){
    
    #map{
        width:60%;
    }
    #webapp{
        max-width: 45%;
    }
}
    

/*1200px de ancho*/
       
@media (min-width: 75em){
    
   #map{width:45%;
    }
    
   #webapp{
        width: 50%;
       
       flex-basis: 49%
    }
}