@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

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

a{text-decoration: none}

body{background-color: black;
font-family: 'Lato', sans-serif;}

.contenedor {max-width: 75rem;
    margin: auto;}

header {display: flex; 
    flex-direction: column;
    justify-content: center;
	align-items: center;
	align-content: stretch;
    margin-top: 2%;
}

.caja-foto-perfil{display: flex;
justify-content: center}

.foto-perfil {
width:20%;
border-radius: 15px}

.caja-botonera {
width: 100%;}

h1 {font-weight: 900;
font-size: 2.5rem;
color: #5F9EA0;
text-align: center;
margin-top: 1rem
}

h2 {
color: #191970;
font-size: 1.2rem;
font-weight: 900;
}


h3 {font-weight: 700;
font-size: 2rem;
color: #5F9EA0;
text-align: center;
margin-top: 0,5%;
}

h4 {font-weight: 500;
font-size: 1rem;
color: #191970;
text-align: center;
margin-top: 0.8rem;
}

h5 {font-weight: 400;
font-size: 0.8rem;
color: #191970;
text-align: center;
margin-bottom: 0.5rem;
margin-top: 0}

hr {height:2.2px;
background-color: #191970;
margin-top: 0.5rem}

ul {list-style-type: none;
width: 100%;
margin-right: auto;
margin-left: auto;
color: #00008B	;
font-size: 1rem;
min-height: 2rem
}

.botonera-principal li {
display: inline;
}

.botonera-principal li a {display: inline-block;
background-color: #5F9EA0;
margin-top: 1rem;
width: 25%;
text-transform: uppercase;
color: #FFFFFF	;
font-weight: 900;
text-align: center;
line-height: 2rem;
text-decoration: none;
min-height: 2rem
}

.botonera-principal li a:hover{background-color: beige;
color: darkblue;
}

article {width: 80%;
margin-top: 2%;
margin-left: auto;
margin-right: auto;
background-color: #F5F5DC	;
text-align: center;
padding: 2%;
border-radius: 1rem
}
.materias {
font-weight: 400;
font-size: 0,5rem;
padding-top: 1rem;
}

.caja-materias {display: flex; 
justify-content: space-around}

.titulo-materias {display: flex;
    flex-direction: column;
    justify-content: center}    
    
.legales {width: 100%;
font-size: 0.8rem;
text-align: center;
color: #5F9EA0;
margin-right: auto;
margin-left: auto;
margin-top: 1rem;
padding:1rem;
background-color: #F5F5DC;
 margin-bottom: 1rem
}

.botonera-di {color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2rem;
    width: 18rem;
    height: 2rem;
    line-height: 2rem;
    font-weight: 900;
    background-color: #5F9EA0;
border-radius: 0.5rem}

h2.botonera-di:hover {background-color: black;
color: #5F9EA0;
}

/*responsive*/

@media all and (max-width:599px) {
    
h1 {font-size: 2rem}
    
.caja-foto-perfil{margin-top: 2rem}
        

h2 {font-size: 1rem;
}

h4 {font-size: 0.8rem;
margin-top: 0.5rem
}

h3 {
font-size: 1.5rem;
}

    hr {width: 50%;
    margin-left: 25%}
    
article {
margin-top: 3%;
padding: 1rem;
}

    
.materias { 
font-size: 0.8rem;
background-color: #5F9EA0;
border-radius: 0.5rem;
padding-bottom: 1rem;
margin-bottom:1rem;
color:#F5F5DC
}

.caja-materias {
flex-direction: column;
justify-content: flex-start}
    
.legales {
font-size: 0.7rem;
padding:1.5rem 0.8rem 1.5rem 0.8rem;
min-height: 7rem

    
}
    
    .botonera-di {font-size: 1rem;
    height: 1.5rem;
        line-height: 1.5rem;
    width: 100%;
    }

.foto-perfil {
width:40%;
}