@charset "utf-8";
body{
	background-image: url("images/Pixels_Background.png");
	background-color: #262626;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-size: 100%;
	margin: 0px;
}
footer{
	margin-top: 40px;
	background-color: #404040;
    border-top: 2px solid #2E2E2E;
    border-bottom: 5px solid #2E2E2E;
}
h1{
	text-align: center;
	color: #FFFFFF;
	font-family: Calibri;
	font-size: 25px;
	margin: 0px;
	margin-bottom: 10px;
}
h2{
	text-align: left;
	color: #FFFFFF;
	font-family: Calibri;
	font-size: 90%px;
	margin: 5px 0px;
}
p{
	color: #FFFFFF;
	font-family: Calibri;
	font-size: 20px;
	margin: 0px;
}
article{
	/*background-color: #494949;*/
	margin: 0px 4%;
	padding: 10px 10px;
	padding-right: 15px;
/*	border: 2px solid #2E2E2E;
	border-right: 5px solid #2E2E2E;
	border-bottom: 5px solid #2E2E2E;*/
}

.bio_article{
	width: 100%;
	padding: 0px;
	margin: 0px;
	background-color: #313131;
}
.bio_div{
	align-content: center;
	float: left;
	width: 100%;
}
.bio_img {
	width: 100px;
	height: 100px;
	padding: 0px;
	margin: 10px 10px 5px 10px;
	float: left;
	display: block;
	border-radius: 50%;
}
.bio_textDiv{
	margin-top: 30px;
}
.bio_name{
	font-size: 25px;
	padding-bottom: 0px;
	margin: 0px;
}
.bio_position{
	margin: 0px;
	padding-top: 0px;
	font-size: 14px;
	color: #CCCCCC;
}
.bio_description{
	padding: 0px 5px 10px 10px;
	font-size: 16px;
	margin: 0px;
}
.bio_socialLink{
	margin: 0px 5px 10px 10px;
	width: 50px;
	height: 50px;
}
.sectionOne{
	width: 100%;
	background-color: #424242;
	margin: 0px;
}
.sectionTwo{
	width: 100%;
	background-color: #3B3B3B;
	margin: 0px;
}
.spacer{
	width: 100%;
	height: 5px;
}
.description{
	text-align: center;
}
.parallaxImage{	
	display: block;
	margin: 0px auto;
	width: 90%;
	height: auto;
}
.gameThumbnail{
	display: block;
	margin: auto;
	width: 100%;
	height: auto;
	border: 2px solid #2D2D2D;
}
.gameDescription{ margin-bottom: 10px;}
.gameButton{
    align-content: center;
	width: 200px;
    color: #2E2E2E;
    font-family: Calibri;
    font-weight: bold;
	text-decoration: none;
    background-color: #EFC884;
    border: 5px solid #EFC884;
    border-radius: 4px;
}
.gameButton:hover{
	color: #ffffff;
	background-color: #E8C07B;
	border-color: #E8C07B;
}
.contactButton{
	text-decoration: none;
	display: block;
	margin: 15px 20%;
	text-align: center;
	background-color: #767676;
	font-family: calibri;
	font-size: xx-large;
	font-weight: bold;
	color: #FFFFFF;
	border: 5px solid #767676;
	border-radius: 4px;
}
.contactButton:hover{ background-color: #4B4B4B; border-color: #4B4B4B;}

.socialLink{ display: block; margin: 0px auto; }
.textLink{ color: #828282; }
.footerCopyright{
	font-size: 18px;
	text-align: center;
	margin: auto 10%;
	margin-top: 5px;
}
.footerText{
	color: #6A6A6A;
    text-align: center;
    font-weight: lighter;
    font-family: Calibri;
    margin-top: -2px;
	margin-bottom: 5px;
	font-size: 18px;
	
}

@media only screen and (min-width: 768px) { /*For Smaller Laptop Monitors*/
	article{
		margin: 0px 2%;
		padding: 15px 30px;
		padding-right: 35px;
	}
	h1{	font-size: 60px; }
	h2{	font-size: 50px; margin: 5px 0px}
	p{ font-size: 30px; }
	.spacer{ height: 20px; }
	.parallaxImage{	width: 95%; }
	.gameButton{ font-size: 25px; padding: 2px 5px; }
	.contactButton{ margin: 15px 40%; }
	.textLink:hover{ color: #8B8B8B; }
	.footerCopyright{ font-size: 20px; margin: 5px; }
	.footerText{ font-size: 20px; margin: 5px; }
	.bio_socialLink{ width: 50px; height: 50px; margin: 0px 20px 15px 20px;}
	.bio_img{width: 200px; height: 200px; margin: 20px 25px 10px 20px; }
	.bio_name{font-size: 60px;}
	.bio_description{ padding: 0px 15px 15px 20px; margin: 0px; font-size: 30px;}
	.bio_position{font-size: 30px;}
	.bio_textDiv{ margin-top: 55px; }
	
}


@media only screen and (min-width: 1275px){ /*For Normal Monitors*/
	article{
		margin: 0px 15%;
		padding: 10px 30px;
		padding-right: 35px;
	}
	.parallaxImage{	width: 70%; }
}

@media only screen and (min-width: 1930px){ /*For Ultra Wide Monitors*/
	article{
		margin: 0px 25%;
		padding: 10px 30px;
		padding-right: 35px;
	}
	.parallaxImage{	width: 50%; }
}