@charset "utf-8";

/* FUENTES TIPOGRÁFICAS */

@font-face {
    font-family: 'oswaldregular';
    src: url('oswald-regular-webfont.woff2') format('woff2'),
         url('oswald-regular-webfont.woff') format('woff'),
         url('oswald-regular-webfont.ttf') format('truetype'),
         url('oswald-regular-webfont.svg#oswaldregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }




@font-face {
    font-family: 'oswaldlight';
    src: url('oswald-light-webfont.woff2') format('woff2'),
         url('oswald-light-webfont.woff') format('woff'),
         url('oswald-light-webfont.ttf') format('truetype'),
         url('oswald-light-webfont.svg#oswaldlight') format('svg');
    font-weight: normal;
    font-style: normal;
    }




@font-face {
    font-family: 'oswaldbold';
    src: url('oswald-bold-webfont.woff2') format('woff2'),
         url('oswald-bold-webfont.woff') format('woff'),
         url('oswald-bold-webfont.ttf') format('truetype'),
         url('oswald-bold-webfont.svg#oswaldbold') format('svg');
    font-weight: normal;
    font-style: normal;
    }



body { background-image: url(http://www.publicdomainpictures.net/pictures/170000/velka/grunge-background-1463561107zwy.jpg)
       }

.img{
    border-radius:70%;
    box-shadow: 0 1rem 1rem 0; 
    color: #330033;
    display:block;
    margin:auto;
   
}

    
a{
    text-decoration: none;
    display: block;
    }

h1 {  font-family:monospace;
    font-weight: 900;
    text-align: center;
    font-size: 5rem;
    color: #ffffff;    
    }

h2 {  font-family:monospace;
    font-weight: 500;
    text-align: center;
    font-size: 3rem;
    color: #cccccc;    
    }

h3 {  font-family: 'oswaldlight';
    font-weight: 200;
    justify-content: space-between;
    text-align: left;
    font-size: 1rem;
    color: #cccccc;    
    }
 
h4 {  font-family: 'oswaldbold';
    font-weight: 350;
    text-align: center;
    font-size:2.5rem;
    color: #660066;    
    }

h5 {  font-family: monospace;
    font-weight: 200;
    text-align: left;
    font-size:1.5rem;
    color: #cccccc;    
    }

p {  font-family: monospace;
     text-align: center;
     font-size: 1.5rem;
     font-weight: 200;
     color: #ffffff;
     }
p2 {  font-family:sans-serif;
     text-align: left;
     font-size: 1rem;
     font-weight: 200;
     color: #ffffff;
     }

p.destacado{
    font-size: 1.2rem;
    text-align: left;
    }

div#pagina{ width: 80%;
    margin: auto;
    }

ul{
    list-style: none;
    font-family: 'oswaldlight';
    font-weight: 300;
    margin: 0;
    padding: 0;
    
}


header nav ul li{
    margin: 0 0 0.5rem 0;
    list-style: none;
   
    
}

header nav ul li a{
    color: #ffffff;
    font-size: 1.5rem;
    text-decoration:none;
    display: block;
    background-color:black;
    text-align: center;
    margin: auto;
    height: 3rem;
    line-height: 3rem;
    font-family: sans-serif;
}

a{
    text-decoration: none;
    color: #ffffff
}

hr{
background-color: black;
    margin: 3rem 5em;

    
}


/* NUEVA REGLA GENERAL */
* {box-sizing: border-box;
   list-style: none;
   margin: 0;
   padding: 0;
    }




/* REGLAS CELULAR */



.padre{
    flex-flow: column;
    flex-wrap: wrap;
    justify-content:space-around;
    align-items: center;
    }
.hijo{
    flex-direction: column;
    justify-content:space-around;
    background-color: black;
    min-width: 24%;

}


.padre2{
    display: flex;
    justify-content:center;
    background-color: #000000;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    }

.hijo2{
    display: flex;
    justify-content:space-between;
    flex-direction: column;
    align-content:flex-start;
    margin: 3rem 5rem;
    }



nav ul li a:hover {color: #9d178d;
    background-color: #660066;    
}



@media screen and (min-width:20rem) {
    nav ul {
        display: flex;
    }

    .padre{display: flex;
           flex-wrap: wrap;
    align-items: flex-start;
        flex-direction: row;
        align-content: center;
        }
    
    

    
    
     
    
    
    
@media screen and (min-width:10rem) {   

img {max-width:100%}
           }

    

@media screen and (min-width:40rem) {
    nav ul {
        display: flex;
    }

    
    
    

    .padre{display: flex;           
    justify-content: space-between;
        flex-direction: row;

       
        
        
    }   }