@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;
    }


/* ESCRITORIO */

body {
    background-color: #211b41;
    }

img{
    display:block;
    margin:auto;
    }

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

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

h2 {  font-family:monospace;
    font-weight: 700;
    text-align: center;
    font-size: 2rem;
    color: #d9aec4;    
    }

h3 {  font-family: 'oswaldlight';
    font-weight: 200;
    justify-content: space-between;
    text-align: left;
    font-size: 1.5rem;
    color: #ffffff;    
    }
 
h4 {  font-family: 'oswaldbold';
    font-weight: 700;
    text-align: left;
    font-size: 2rem;
    color: #211b41;    
    }

p {  font-family: 'sans-serif';
     text-align: left;
     font-size: 1rem;
     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: #9d178d;
    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: #82b8cc;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    }

.hijo2{
    display: flex;
    justify-content:space-between;
    background-color: #82b8cc;
    flex-direction: column;
    align-content:flex-start;
    margin: 3rem 5em;
    }

.padre4{
    flex-wrap: wrap;
}

/* COLOR AL PASAR MOUSE */

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

/* PORTFOLIO */

section ul li a img{
    border-radius: 50%;
}

.padre3{
    max-width:960px;
    width:90%;
    list-style-type:none;
    margin:20px auto;
    padding:0;
    }

.hijo3{
    height:200px;
    width:300px;
    line-height:50px;
    font-size:20px;
    text-align:center;
    margin:5px 2px; 
}




/* ADAPTAR A DISTINTOS TAMAÑOS */


@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;
        }
    
    

    
    
        }
    


.hijo3{flex-direction: row;
    align-content: space-between;
    
}
    
    
    
    
@media screen and (min-width:10rem) {   
/* imagen se adapta */
img {max-width:100%}
           }

    

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

    
    
    

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

       
        
        
    }   }