@charset "UTF-8";
/* CSS Document */

* {
    box-sizing: border-box;
}

body {
    background-color: #5C934A;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: sans-serif;
}

div.container {
    max-width: 1000px;
    margin:auto;
    background-color: #5C934A;
    display: grid;
}

div.row {
    clear: both;
    width: 100%;
    min-height: 140px;
    margin-bottom: 20px;
    margin: auto;
    overflow: hidden;
    height: 100%;
}

h2 {
    margin-top: 0;
	font-family:'Oleo Script', cursive;
}

/* Top Bar */

div.topBar {
    background-color: #233E2A;
	background-image: url("images/0dbbd277e157410072e876edd75c818c.jpeg");
    min-height: 200px;
    text-align: center;
    padding-top: 1px;
}

div.topBar h1 {
    margin-top: 23px;
	margin-bottom: 0;
    font-weight: normal;
    font-size: 4em;
    color: #233E2A;
	font-family:'Oleo Script', cursive;
}

div.topBar h2 {
	font-weight: normal;
	font-size: 2em;
	color: #233E2A;
}

/* Nav Bar */

div.nav {
    padding:0;
    text-align: center;
    min-height: 20px;
	background-color:white;
}

div.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #3F8A53;
    color: white;
	font-family: 'Roboto Slab', serif;
}


div.nav li {
    display: inline-block;
}

div.nav li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: white;
}

div.nav li a:hover {
    background-color: #3A7C3B;
}

div.nav li a.active {
    background-color: #5C934A;
}

div.nav li a.active:hover {
    background-color: #68B964;
}

/* Column 1 */

div.column1 {
    padding:20px;
    width: 20%;
	float: left;
	height:100%;
	background-color: #233E2A;
	color: white;
	margin-bottom:30px;
}

div.column1 h2{
	text-align: center;
	font-size: 2em;
	color: white;
}

div.column1 h3{
	text-algin: center;
	color: white;
	font-family: 'Roboto Slab', serif;
}

.column1 img{
	border-radius: 60%;
	height:185px;
	width: 175px;
}

.center{
	display: block;
	margin-left:auto;
	margin-right:auto;
}

div.column1 p {
	font-size: 17px;
	font-family: 'Rubik', sans-serif;
	text-align: center;
}

div.column1 a{
	color: white;
}

/* Column 2 */

div.column2{
	padding: 20px;
	width:80%;
	background-color: whitesmoke;
	float: left;
	height: 100%;
	margin-bottom:60px;
}

div.column2 h2{
	font-size: 2em;
	text-align: center;
}

div.blank1{
	width: 10%;
	float: left;
	color: whitesmoke;
}

div.text{
	width:80%;
	text-align: left;
	float: left;
	font-size: 17px;
}

div.text p{
	font-family:'Rubik', sans-serif;
}

div.blank2{
	width: 10%;
	float: left;
	color: whitesmoke;
}

/* Resume Page */

div.skillscolumn {
	width: 50%;
	height: 100%;
	float: left;
	padding: 20px;
	text-align: center;
	margin-bottom: 25px;
}

.skillscolumn ul{
	text-align: left;
	font-family: 'Rubik', sans-serif;
}

.skillscolumn h3{
	font-weight: bold;
	text-align: left;
	color: green;
	font-family: 'Roboto Slab', serif;
}

.skillscolumn h2{
	font-size:2em;
	font-weight: bold;
}

div.educationcolumn{
	width: 50%;
	height: 100%;
	float: left;
	padding: 20px;
	text-align: center;
}

.educationcolumn a{
	color: green;
}

.educationcolumn ul{
	text-align: left;
	font-family: 'Rubik', sans-serif;
}

.educationcolumn h3{
	font-weight: bold;
	text-align: left;
	color: green;
	font-family: 'Roboto Slab', serif;
}

.educationcolumn h2{
	font-size:2em;
	font-weight: bold;
}


/* Icon Styles */
div.column1 i {
	font-size: 3em;
}

div.column1 i:hover{
	color: green;
}

/* Nav Break Points */

@media only screen and (max-width:500px){
    
    div.nav li {
        width: 100%;
    }
    
    div.nav li a {
        font-size: 1.2em;
    }
   
}

/* Column 1 and 2 Break Points */

@media only screen and (min-width:320px){
	
	div.container{
		max-width: 960px;
		margin: auto;
		overflow: hidden;
	}
	
	div.column1 h2{
		font-size: 13px;
		overflow: inherit;
	} 
	
	div.column1 h3{
		font-size: 10px;
	}
	
	div.column1 img{
		width: 45px;
		height: 35px;
	}
	
	div.column1 p{
		font-size: 8px;
	}
	
	div.skillscolumn h2{
		font-size: 16px;
	}
	
	div.skillscolumn h3{
		font-size: 10px;
	}
	
	div.skillscolumn ul{
		font-size:8px;
	}
	
	div.educationcolumn h2{
		font-size: 16px;
	}
	
	div.educationcolumn h3{
		font-size: 10px;
	}
	
	div.educationcolumn ul{
		font-size:8px;
		overflow:scroll;
	}
}

@media only screen and (min-width:375px){
	
	div.container{
		max-width: 960px;
		margin: auto;
		overflow: hidden;
	}
	
	div.column1 h2{
		font-size: 13px;
		overflow: inherit;
	} 
	
	div.column1 h3{
		font-size: 10px;
	}
	
	div.column1 img{
		width: 65px;
		height: 55px;
	}
	
	div.column1 p{
		font-size: 10px;
	}

}

@media only screen and (min-width:425px){
	
	div.container{
		max-width: 960px;
		margin: auto;
		overflow: hidden;
	}
	
	div.column1 h2{
		font-size: 18px;
		overflow: inherit;
	} 
	
	div.column1 h3{
		font-size: 15px;
	}
	
	div.column1 img{
		width: 65px;
		height: 55px;
	}
	
	div.column1 p{
		font-size: 12px;
	}

}


@media only screen and (min-width:768px){
	
	div.container{
		max-width: 960px;
		margin: auto;
		overflow: hidden;
	}
	
	div.column1 h2{
		font-size: 25px;
	}
	
	div.column1 h3{
		font-size: 20px;
	}
	
	div.column1 img{
		width: 115px;
		height: 100px;
	}
	
	div.column1 p{
		font-size: 16px;
	}

	div.column2 h2{
		font-size: 30px;
	}
	
	div.column2 h3{
		font-size:20px;
	}
	
	div.column2 ul {
		font-size: 15px;
	}
}

@media only screen and (min-width:1024px){
	
	div.container{
		max-width: 960px;
		margin: auto;
		overflow: hidden;
	}
	
	div.column1 h2{
		font-size: 3em;
	}
	
	div.column1 h3{
		font-size: 20px;
	}
	
	div.column1 img{
		width: 155px;
		height: 148px;
	}
	
}