@import url(https://fonts.googleapis.com/css?family=ABeeZee);

* { box-sizing: border-box
}

body {
background-image:  url(imagenes/congruent_pentagon.png);
background-repeat: repeat;
background-position: center;
background-size: cover;
font-family: ABeezee;
}

--#pagina {
max-width: 75em;   
margin: 0 auto;
}

header {
text-align: center;
}

header h1 {
color: deeppink;
font-size: 4em;
}

header nav ul li {
display: inline-block;
margin-right: 4em;
width: 24,65%;
}

header, main, aside, footer {
    padding: 2em;
}

nav ul li a {
color: deeppink;
background-color: transparent;
padding: 0 1em;
width: 100%;
display: inline-block;
text-decoration: none;
   }

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


main {
float: left;
}

#foto img {
width: 100%;
height: auto;
padding: 0.4em;
}

#info {
float: left;
padding: 1em;
margin: 0.5em;
color: deeppink;
font-size: 1em;
text-align: left;
border-color: deeppink;
border: 0.15em;
border-style: solid;
}

.materias{
float: left;
background-color: deeppink;
padding: 1em;
margin: 0.5em;
width: 50em;
display: inline-block;
color: white;
font-size: 1em;
text-align: left;
}

.materias:hover {
background-color: white;
color: deeppink;
}

h3 {
--margin: 1em;
float: left; 
font-size: 1.5em;
text-align: center;
color: deeppink;
}


.portfolio{
float: left;
--margin: 0.2em;
align-content: center;
}

img {
float: left;
margin: 0.4em;
}

footer {
font-size: 0.7em;
background: white;
padding: 2em;
margin: 3.5em;
--margin-top: 5%;
text-align: center;
color: deeppink;
float: left;
}


--.contenedor{
max: 100%;
max-width: 960px;
margin: 0 auto;
overflow: hidden;
}

@media screen and (max-width: 768px) {

header nav {
background-color: transparent;
width: 100%;
padding: 0.5em;
text-align: center;
}
    
.materias{
float: left;
background-color: deeppink;
padding: 1em;
margin: 0.5em;
width: 22em;
height: 22em;
display: inline-block;
color: white;
font-size: 0.8em;
text-align: left;
}

.materias:hover {
background-color: white;
color: deeppink;
}

}

@media screen and (max-width:480px) {

header {
background-color: transparent;
margin: 1em;
padding: 0.5em;
--margin-bottom: 1.5em;
}
    
header nav ul li {
display: inline-block;
}
    
header nav ul li a {
background-color: transparent;
color: deeppink;
}
    
header nav ul li a:hover {
background-color: deeppink;
color: white;
}
    
main {
width: 100%;
font-size: 0.9em;
}

.info {
width: 100%;
}
    
.materias {
width: 100%;
}
    
aside {
float: left;
width: 100%;
margin-top: 0;
}
    
footer { 
font-size: 0.5em;
}
    
}