@charset="utf-8"
    
*{ box-sizing: border-box;
    
}

html { height: -webkit-fill-available;

}
body { display: flex;
    flex-direction: column;
    font-family: Noto sans, sans-serif;
    background: #6d766f;
    margin: 0;
    padding: 0;  
}

img {max-width: 100%;
    height: auto;

}


h2 { background: #c3a2f0;
    color: #5a5957;
    text-align: center;
        
}

h4 { background: #78bbd9;
    color: #284040;
    text-align: center;
    padding: .25em;
    
}

p { 
    
}

a{ text-decoration: none;
    


}

ul,
ol{ list-style: none;
    padding: 0
}

header .navegador { display: block;
                    align-items: center
}

header .navegador a img { width: 120px; 

}
.navegador { max-width: 50rem;
    margin: 0 auto;
    padding: 2rem;
    
    
}

header,
footer { 
    background: #5a5957;
    border: solid .25em #b79999;
}

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

header nav ul{ display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-transform: uppercase

    
}

header nav ul li { min-width: 5em;
    margin: .25em
    
}


header nav ul li a{ background: #c3a2f0;
        color: #5a5957;
    border-radius: .25em;
    font-weight: bold;
    padding: .5em 1.2em;
    text-align: center;
    display: inline-block;
    

}

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


.index header nav ul li:first-child a,
.plan header nav ul li:nth-child(2) a,
.mapa header nav ul li:nth-child(3) a {
    background-color: rgba(255, 255, 255, 0.85);
    color: #c3a2f0;
}

main { flex-grow: 1;
    margin: auto;

}

.bio { text-align: center;

}
.bio img { align-items: center;
        height: 300px;
        border: solid .5em #c3a2f0; 
        margin: .5em .5em;
        
}

.bio ol il>img { justify-content: center;
}


section .cuerpo {  
    

}
.cuerpo { display: block;
        margin: auto;
    max-width: 40em;
        justify-content: flex-end;
       text-align: center;
    
            
}

.materias { background: #5a5957;
    color: #dbd2e6;
    margin: 1em;
    padding: 1em; }

.materias p {  border: solid .10em #b79999;}

.portfolio { background: #5a5957;
    color: #dbd2e6;
    margin: 1em;
    padding: 1em;
   
    
    

}

.boton {  display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.boton a {
    background: #c3a2f0;
    color: #5a5957;
    max-width: 15em;
    margin: .25em auto;
    padding: .5em;
    border-radius: .2em;
    text-transform: uppercase;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    
    
               

}

.biblioteca { margin: auto;
            justify-content: center;
            align-items: center;
    
}

.biblioteca p { margin: .5 auto;
    border: solid .10em #b79999;
                color: #dbd2e6;
    
}

.biblioteca h4 { margin: 1 auto;
    text-transform: uppercase;
    

}

.botones {  display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}
.botones a { 
            font-size: 12pt;
            border-radius: .5em;
            background: #78bbd9;
            color: #284040;
            margin: .5em auto;
            padding: .5em;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
    min-width: 15em;
    
                 
    
}

#todalainfo { margin: auto;
    background: #5a5957;
    color: #dbd2e6;
    text-align: left;
    border-top: solid .2em #5a5957;
    
    
}

#todalainfo h2 { 
    display: block;
    flex-wrap: wrap;
    padding: .2em;
    border-radius: .2em;
    max-width: 10em;
    margin-left: 0.5em;
    
}

#todalainfo h3 { margin-left: .5em;
    

}
#todalainfo p { margin: .5em; 
    margin-right: .5em;
    
}

#todalainfo a img { max-width: 250px;
                    margin-left: .5em
                    
    

}

footer { 
    
        
         }

footer p {  margin: auto;
        align-items: center;
        color: white;
    
}


@media all and (min-width: 600px) {
    
    body{ margin: auto;
    
}
    
    .botones {  display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    


}
.botones a { justify-content: center;
            font-size: 12pt;
            border-radius: .5em;
            background: #78bbd9;
            color: #284040;
            max-width: 15em;
            margin: .5em auto;
            padding: .5em;
    text-transform: uppercase;
    font-weight: bold;
                 
    
}
    #todalainfo { max-width: 50rem;
    margin: 0 auto;
    padding: 1rem;
    text-align: left;
        
        
        
    }
    
    footer p { margin: auto;
        
        
    
    }
    
}

@media all and (min-width: 1200px) { 


 body{ margin: auto;
     
    
}
    
    
    .botones {  display: flex;
    flex-wrap: wrap;
    justify-content: center;
    


}
.botones a { justify-content: center;
            font-size: 12pt;
            border-radius: .5em;
            background: #78bbd9;
            color: #284040;
            max-width: 15em;
            margin: .5em auto;
            padding: .5em;
    text-transform: uppercase;
    font-weight: bold;
                 
    
}
     #todalainfo { max-width: 50rem;
    margin: 0 auto;
    padding: 1rem;
     text-align: left;   
        
    }
    
    footer p { margin: auto;
        
        
    
    }
    

}