* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Open Sans";
}
body {
 background-color: rgb(90, 7, 33);
 background-size: 100%;
 margin: 3em;
 padding: 0;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
width: 100%;
}

nav 
{
  width: 100%;
  background-color: white;
  max-width: 100%;
  text-shadow:  0.5em 0.5em black 0.5em;
}

nav ul li {
    list-style: none;
    display:inline-block;
    background-color: white;
    padding: 0.5em;
    margin: 2em;
    max-width: 100%;
    font-weight: bold;

}

a { 
    text-decoration: none;
    
}

li:hover {
background-color: rgb(90, 7, 33);
color: white;
}

.nombre {
max-width: 100%;
padding: 1em;
margin: 0;

}

article { 
   max-width: 50%;
   max-height: auto;
   padding: 1em;
   margin: 0;
   overflow: auto;
   float: left;
   font-size: 0.7em;
   
}

article h2{
color: white;
margin-bottom: 1em;
}
.texto{
max-width: 50%;
overflow: auto;
float: right;
margin: o;
padding: 1em;
font-size: 0.8em;
}

.pie {
max-width: 100%;
}

footer {
    max-width: 100%;
    margin: 1em;
    padding: 1em;
    overflow:auto;
    width: 100%;
    font-size: 0.7em;
    text-align: center;
   
}

@media screen and (max-width: 40em)
{
nav ul li {
    list-style: none;
    display:block;
    background-color: white;
    padding: 1em;
    margin: 2em;
    max-width: 100%;
    font-weight: bold;
}
    
    article { 
   max-width: 100%;
   max-height: auto;
   padding: 1em;
   margin: 0;
   font-size: 0.7em;
}
   .texto{
max-width: 100%;
margin: o;
padding: 1em;
font-size: 0.8em;
}
footer {
    max-width: 100%;
    margin: 1em;
    padding: 1em;
    overflow:auto;
    width: 1000%;
    font-size: 0.5em;
    text-align: center;
   
}

@media screen and (max-width: 30em)
{
    
nav ul li {
    list-style: none;
    display:block;
    background-color: white;
    padding: 1em;
    margin: 2em;
    max-width: 100%;
    font-weight: bold;
    font-size: 0.7em;
}    
    
.texto{
max-width: 100%;
margin: o;
padding: 1em;
font-size: 0.5em;
}
    
footer {
    max-width: 100%;
    margin: 1em;
    padding: 1em;
    overflow:auto;
    width: 1000%;
    font-size: 0.4em;
    text-align: left;
   
}
    
}