body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #B36D67;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	Font-Family: 'Lato', Sans-Serif;
	Font-Size: 16px;
}

li {border-right: 1px solid white;}
li:last-child {border-right: none;}
ul.topnav li a:hover:not(.active, .right) {background-color: #C6A291;}
ul.topnav li a.active {background-color: #6698AD;}
ul.topnav li.right {float: right;}

img.logo {
    display: block;
  	padding: 10px;
    margin-left: auto;
    margin-right: auto;
  }
  
div.clear {clear: both;}
  
div.main {
  	display: block;
  	width: 90%; 
	margin-left: auto;
	margin-right: auto;
  	border-width: 1px;
  	border-color: #6698AD;
  }
  
div.leftcol {
  	float: left;
  	width: 45%;
  }
  
div.rightcol {
  	float: right;
  	width: 45%;
  }
  
div.content {
  	padding: 20px;
  	border-style: solid;
  	border-width: 0px 5px 5px 5px;
  	border-color: #6698AD;
  }
  
div.contact {
    padding: 10px;
    float: right;
    width: 25%;
    font-size: 10px;
    text-align: center;
  }

div.social {
    padding: 10px;
    float: left;
    width: 20%;
    font-size: 10px;
  }

div.author {
    display: block;
  	padding: 10px;
    margin-left: auto;
    margin-right: auto;
	font-size: 10px !important; 
    text-align: center;
  }  
  
h1.styled {
  	color: #B36D67;
  	margin-bottom: 0px;
  	Font-Family: 'Alegreya', Serif;
	Font-Size: 40px;
	font-weight: 800;
  }

h2.styled {
  	color: #6698AD;
  	margin-top: 35px;
  	margin-bottom: -15px;
  	Font-Family: 'Alegreya', Serif;
	Font-Size: 25px;
	font-weight: 500;
	font-style: oblique;
  }
  
h3.styled {
  	color: #6698AD;
  	margin-top: 35px;
  	margin-bottom: -15px;
  	Font-Family: 'Alegreya', Serif;
	Font-Size: 18px;
	font-weight: 500;
  }
  
h3.bio {
  	color: #6698AD;
  	margin-top: 0px;
  	margin-bottom: -15px;
  	Font-Family: 'Alegreya', Serif;
	Font-Size: 18px;
	font-weight: 500;
  }
  
p.styled, ul.styled {
	Font-Family: 'Lato', Sans-Serif;
	Font-Size: 16px;
}




.container{
  display:inline-flex;
  flex-wrap:wrap;
}

.flex-direction{
  flex-direction:row;
}

.div1{
  padding:20px;
  width:300px;
}

.div2{
  width:45%;
}

.bio{
  font-size:16px;
}

@media screen and (max-width: 1000px){
    div.rightcol, div.leftcol {float: none; width:100%}
  
  .flex-direction{flex-direction:column;}
}

@media screen and (max-width: 600px){
    ul.topnav li.right, ul.topnav li {float: none; width:100%}
  
  .flex-direction{flex-direction:column;}
div.div1{
  width:80%;
  }
div.div2{
    width:80%;
  }
}