* {
	margin: .2em;
	padding: .2em;
	border: .2em;
	box-sizing: border-box;
	justify-content: center;
	list-style-type: none;
  font-family: Roboto;
}


eader {
	background-color: white;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 150px;
	margin: auto;
}

nav ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	justify-content: space-between;
	text-decoration: none;
}

ul li a {
	display: block;
	font-family: sans-serif;
	color: #5753C9;
	flex-direction: column-reverse;
	justify-content: space-between;
	text-decoration: none;
}

header img {
	justify-content: center;
	display: block;
	margin: auto;

	width:100%;
}

body {
  background-color: #fff;
  width: 80%;
  margin: 0 auto;
}

#foto {
   
    justify-content: center;
    display: block;
    margin: auto;
    box-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
h1 {
  background-image: linear-gradient(to right, #f77062 0%, #fe5196 100%);
font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;  
    font-size: 1.5em;
    display: flex;
}
div{
      box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

h2{
    background-color: cornflowerblue;
font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;  
    font-size: 2;
    display: flex;
     margin: .5em;
    display: flex;
    flex-direction: row;
    color: white;
}
h3 {
    text-align: center;
    font-size: 17px;
    font-weight: 100;
    color: white;
    display: block;
    margin: 0em;
    padding: 0em;
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #562cb5;
   
}
.cajamaterias ul  li{
     width: 100%;
  border: 1px solid #fff;
  background: rgba(0, 0, 139, 0.62);
    text-decoration: none;
  padding: 20px;
  margin: auto;
  color: #fff;
  text-align: center;
  font-family: Roboto;
}
.cajamaterias a{
    color: white;
}
ul li a {
	display: flex;
	font-family: 'Raleway', sans-serif;
	color: #3D4E81;
	list-style: square;
	flex-direction: row;
	justify-content: center;
	text-decoration: none;
	font-size: 1em;
}


@media screen and (max-width: 30em) {
  html,
  body {
    background-color: #fff;
    width: unset;
  }
}