/*everything included in body*/
body {
	margin: 0px;
    background-color: white;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/*top bar*/
	/*title*/
		header {
			position: relative;
			overflow: hidden;
			color: Black;
			background-color: white;
			margin: 0;
			z-index: 1;
		}

		h1.header {
			margin-left: 5px;
		} 

		a.home {
			color: saddleBrown;
			font-family: Geneva, Tahoma, Verdana, sans-serif;
			text-decoration: none;
			float: none;
  			position: absolute;
  			top: 50%;
  			left: 5%;
  			transform: translate(-5%, -50%);
			vertical-align: middle;
		}

		a.home:hover, a.home:active {
			color: saddleBrown;
			text-decoration: none;
		}

	/*social icons*/
		.social-icons {
			float: right;
			margin: 0;
		}
		.fa {
 			font-size: 70px;
 			width: 50px;
 			text-align: center;
 			text-decoration: none;
 			margin: 5px 2px;
		}

		.fa-linkedin {
			padding: 10px;
 			background: saddleBrown;
  			color: white;
			vertical-align: middle;
			transform: translate(0%, -30%);
		}

		.fa-medium {
			padding: 10px;
 			background: saddleBrown;
  			color: white;
			vertical-align: middle;
			transform: translate(0%, -30%);
		}
	
		.fa-github {
			padding: 10px;
			background: saddleBrown;
			color: white;
			vertical-align: middle;
			transform: translate(0%, -30%);
		}

		.fa-instagram {
			padding: 10px;
			background: saddleBrown;
			color: white;
			vertical-align: middle;
			transform: translate(0%, -30%);
			margin-right: 5px;
		}

/*footer*/
	footer {
    		border-top: 1px solid #d5d5d5;
	}

	h3.footer-text {
		color: rgb(169,169,169);
		font-family: Geneva, Tahoma, Verdana, sans-serif;
	}

/*welcome*/
	#wrapper {
    		margin-left:auto;
    		margin-right:auto;
    		width:960px;
	}

	.welcome {
		background-image: url("/images/background_photo.jpg");
		opacity: 0.8
		text-align: center;
		vertical-align: middle;
		background-size: 100vw auto;
		z-index: -1;
	} 

	.welcome-box-blue {
		background-color: lightblue;
		height: 50px;
		width: 100vw;
	}

	.welcome-box-black {
		background-color: black;
		height: 50px;
		width: 100vw;
	}
	
	.yellow-box {
		background-color: gold;
		text-align: center;
		width: 400px;
		padding: 10px;
		font-family: Geneva, Tahoma, Verdana, sans-serif;
		font-size: 2em;
		font-weight: bold;
		color: black;
		display: inline-block;
		margin-top:60px;
		margin-left:27px;
	}


	h1.welcome-text {
		font-family: Geneva, Tahoma, Verdana, sans-serif;
		font-size: 10px;
		color: saddleBrown;
		/*transform: translate(75%, 50%);*/
	}

	@media only screen and (max-width: 768px) {
  		h1.welcome-text {
    			font-size: 20px;
  		}
	}

	.blue-text-box {
		background-color: lightblue;
		padding: 20px;
		margin-left: 500px;
		margin-right: 100px;
		margin-top: 20px;
		font-weight:bold;
		font-family: Geneva, Tahoma, Verdana, sans-serif;
		color: black;
	}

	h3.about-text {
		font-family: Arial, Helvetica, sans-serif;
		color: saddleBrown;
	}

	a.welcome {
		color: saddleBrown;
		font-weight: bold;
		background-color:lightblue;
		text-decoration: none;
		font-family: Geneva, Tahoma, Verdana, sans-serif;
	}

/*resume*/
	.offWhite {
		clear:both;
		background-color: floralWhite;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.brown-box {
		margin: auto;
		font-family: Geneva, Tahoma, Verdana, sans-serif;
		font-weight: bold;
		font-size: 2em;
		color: white;
		width: 200px;
		text-align: center;
		padding: 10px;
		background-color: saddleBrown;
	}

/*contact*/
	.contact {
		background-color: white;
		padding-top: 20px;
	}

	.blue-box {
		margin: auto;
		font-family: Geneva, Tahoma, Verdana, sans-serif;
		font-weight: bold;
		font-size: 2em;
		color: gold;
		width: 200px;
		text-align: center;
		padding: 10px;
		background-color: lightblue;
	}

	input {
		width: 300px;
	}

	textarea {
		font-family: Arial, Helvetica, sans-serif;
		width: 300px;
	}

/*blog post list*/
	.black-box {
		margin: auto;
		font-family: Geneva, Tahoma, Verdana, sans-serif;
		font-weight: bold;
		font-size: 2em;
		color: lightblue;
		width: 200px;
		text-align: center;
		padding: 10px;
		background-color: black;
	}

	.blue-contact-box {
		background-color: lightblue;
		padding: 20px;
		margin: auto;
		font-weight:bold;
		font-family: Geneva, Tahoma, Verdana, sans-serif;
		color: black;
	}

	ul.posts { 
   		/* margin: auto; */
    		font-size: 1.5em;
	}

	ul.posts li {
    		list-style: none;
	}

	a.posts {
		/*background-color: floralWhite;*/
		color: black;
		height: 101px;
		width: 100%;
		text-decoration: none;
	}
	
	.grid_container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}

	.grid_item {
		padding-right: 10px;
		padding-left: 10px;
		padding-top: 30px;
		padding-bottom: 15px; 
	}

	img.link {
		width: 300px;
		height: 200px;
	}

	img.link:hover {
		opacity: 0.75;
	}

/*blog post*/

img.post {
	width: 60vw;
	height: 40vw;
	margin-left: 20vw;
}

h1.post {
	padding-top: 5vw;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	margin-left: 20vw;
	margin-right: 20vw;
	font-size: 3em;
}

h2.post, h3.post {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	margin-left: 20vw;
}

.post-content {
	margin-left: 20vw;
	margin-right: 20vw;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 150%;
}