@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;600;800&display=swap');
* {margin: 0; padding: 0; transition: 0.3s;}
html {
    width: 100%;
    height: 100%;
    background: rgba(55,128,167,1);
background: -moz-linear-gradient(top, rgba(55,128,167,1) 0%, rgba(13,201,179,1) 68%, rgba(13,201,179,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(55,128,167,1)), color-stop(68%, rgba(13,201,179,1)), color-stop(100%, rgba(13,201,179,1)));
background: -webkit-linear-gradient(top, rgba(55,128,167,1) 0%, rgba(13,201,179,1) 68%, rgba(13,201,179,1) 100%);
background: -o-linear-gradient(top, rgba(55,128,167,1) 0%, rgba(13,201,179,1) 68%, rgba(13,201,179,1) 100%);
background: -ms-linear-gradient(top, rgba(55,128,167,1) 0%, rgba(13,201,179,1) 68%, rgba(13,201,179,1) 100%);
background: linear-gradient(to bottom, rgba(55,128,167,1) 0%, rgba(13,201,179,1) 68%, rgba(13,201,179,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3780a7', endColorstr='#0dc9b3', GradientType=0 );}
body {font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.5;

}
.wrap {max-width: 1200px; margin: 0 auto;} 
header {background: url('../img/bg_header.jpg') repeat top center;  text-align: center; color:#dcf1f8; border: 1px dotted white;}
header>h1,h2 {text-shadow: 0.2rem 0.2rem 1rem #000000; font-weight: 800;}
header h2:before {content: ''; display: block; width: 7rem; height: 0.5rem; background-color: rgba(220, 241, 248, 0.32); margin: 0 auto;}
header h2 {font-variant: all-petite-caps;}
main {margin-top: 0.1rem;}
main, footer {padding: 1rem; background-color: aliceblue;}
main h3 {font-weight: 600;}
main p {font-weight: 300;}
#navegar li {
    display: block;
}
#navegar li a {display: block; padding:1rem; text-align: center; text-decoration: none; color: #1c7388; background-color: aliceblue; }
#navegar li a:hover {
    background-color: #4093b2;
    color: aliceblue;
}
#navegar li+li {border-bottom: black 1px solid;} 
#navegar li:first-child {border-bottom: black 1px solid; border-top: black 1px solid;} 


img {border-radius: 50%; background: #d7eaf0; padding:0.5rem; display: inline-block; box-shadow: 0.2rem 0.2rem 1rem #000000;}

h1 { font-size: 3rem;}
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem;}
h3, h4, h5 {color: #4093b2; padding: 1rem 0; border-bottom: 0.5rem solid #4093b2;}
h5 { font-size: 1rem; }
p {text-align: justify;}
article p {margin: 1rem 0;}
footer {margin-top: 0.5rem;;}
footer p {font-size: 0.8rem; text-align: center;}

    @media screen and (min-width:641px){
        body { font-size:15px;}
        main, footer {padding: 0.5rem;}
        #navegar li {display: inline-block; border: 0px!important;} 
section {
display: flex;
justify-content: space-around;
}
article {width: 33%;  }
aside {width: auto;}
          
    } /* De tablets para arriba ajusto el tamaño de fuente para que repercuta en las unidades relativas destinadas a las otras resoluciones. Acomodo el Menu para que se muestre en línea para esta resolucion superior. Además le saco las lineas inferiores y superiores y pongo separadores verticales entre los items de lista. */
.social {margin-top: 4rem;}
aside .social li {display: inline-block;}
aside .social li a {text-decoration: none;padding: 1rem; font-weight: bold;}
.social a#facebook {color: #fff; background-color: #19089d; }
.social a#instagram {color: #fff; background-color: #9d0858; }
.social a#linkedin {color: #fff; background-color: #0077b5; }

.social a:hover {background-color: black!important;}