html,body {
    margin: 0; 
    padding: 0;
    height: 100%;
    }

@import url('https://fonts.googleapis.com/css?family=Raleway|Roboto+Slab|Source+Code+Pro|Source+Sans+Pro&display=swap');
    div, p, nav {font: 22px 'Source Sans Pro', sans serif;}
    #nombre {font: 2rem Raleway, sans serif; text-shadow: 2px 2px #c0c0c0;}
    hr {border-top: 5px solid blue;}
    header {font: bold 1.1rem 'Roboto Slab', serif; text-align: center;}
    li {list-style-type: square;}
    p {margin: 0px;}
    .title {font: 1.1rem 'Source Code Pro', monospace;}
    strong {font-size: 1.1rem}
    .position {margin-bottom: 1.5rem;}
#logo_gradient {
    position: absolute;
background-image: url('images/gradient_logo.jpeg');
background-repeat: repeat-x;
background-size: contain;
background-position:  top center;
width: 100%;
padding-bottom: 158px;
}
.navcontainer {display: flex; justify-content: center; width: 50vw; margin-left: 25vw;}
.container {display: flex; justify-content: center; margin: 0% 0.5rem; flex-wrap: wrap;}

#logo {position: relative; margin-top: 10px; z-index: 10; width: 400px; height: auto;}

nav {padding-left: 5px; margin: 1rem 0rem 2rem; display: flex; justify-content: space-between;}	
.navlink {background-color: #7a3700; padding: 0.5rem 1rem; margin-right: 1rem;}
a.navlink:link {color: wheat;}
a.navlink:visited {color: wheat;}
a.navlink:hover {color: whitesmoke;}
a.navlink:active {color: #fff;}

#about_me {
    margin-top: 3rem;
    display: flex; 
    width: 50%; height: auto;
    justify-content: center;
    border: 1px solid #000;
    overflow: auto;
}
#photo {width: 134px; height: 200px; margin-right: 1rem;}
.td_right {padding-right: 7rem;}

@media screen and (max-width: 812px) {div, p, nav, li {font: 16px 'Source Sans Pro', sans serif;}
.container {display: flex; justify-content: center; flex-wrap: wrap;}#logo {position: relative; margin-top: 10px; z-index: 10; width: 350px; height: auto;}.inner_container {display: block; width: 100%; height: auto; overflow: auto;}
nav{padding-left: 5px; margin: 1.5rem 0rem 2rem; display: flex; justify-content: space-between;}#about_me {margin-top: 1rem; display: flex; width: 95%; height: auto; justify-content: flex-start; border: 1px solid #000; overflow: auto;}#photo {width:67; height: 100; margin-right: 0.5rem} .td_right{padding-left: 1rem; padding-right: 3rem;}}
@media screen and (max-width: 320px) {.container {display: flex; justify-content: space-evenly; margin: 0% 0.5rem; flex-wrap: wrap;}#logo {position: relative; margin-top: 10px; z-index: 10; width: 310px; height: auto;}
nav{padding-left: 5px; margin: 2.2rem 0rem 2rem; display: flex; justify-content: space-between;}#about_me {margin-top: 1rem; display: flex; width: 150%; height: auto; justify-content: flex-start; border: 1px solid #000; overflow: auto;}#photo {width:34; height: 50;}.td_right{padding-left: 1rem; padding-right: 1rem;}}