body {
    margin:10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: #f5f5f5;
}

.container {
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap:30px;
    padding:5px;
    font-size:100%;
    
}
.container div {
  
    padding:10px;
}
.one {
    grid-column-start:1;
    grid-column-end:5;
    place-items: center;
}
.two {
    grid-column-start:5;
    grid-column-end:9;
    place-items: center;
}
.three {
    grid-column-start:9;
    grid-column-end:13;
    place-items: center;
}
 nav {
    display:flex;
    justify-content:end;
    background-color: rgb(199, 215, 224);
        } 
 nav a {
    color:#5F9EA0;
    padding: 14px 20px;
    text-decoration:none;
        }

#bio {
    grid-column-start: 5;
    grid-column-end: 12;
}      
#img {
    grid-column-start:1;
    grid-column-end: 5;
}

img {
    max-width:100%;
    height:auto;
    display:block;
    border-radius: 10px;
}
img:hover {
    box-shadow: 0 0 2px 1px rgb(177, 189, 197);
}
h1 {
    color: #5F9EA0;
}
.container p {
    color: #2f3838;
}

.blue {
    width: 200px;
    height:auto;
    max-width:100%;
    height:auto;
    display:block;
    border-radius: 10px;
    box-shadow: 10px 10px 5px rgb(177, 189, 197);
}
.br {
    display:block;
    margin-left:auto;
    margin-right:auto;
}