html {

	height: 100%;

	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

body {

	display: flex;
	flex-direction: column;

	height: 100%;

	margin: 0;

	background-image: linear-gradient(
		rgba(50, 0, 50),
		rgba(0, 0, 50));
	background-repeat: none;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
		
	color: white;

}

#body_div {

	display: flex;
	flex-direction: column;

	justify-content: center;
	align-self: center;

	width: 80%;
	height: 100%;

	margin: 1%;

	border-radius: 10px;

}

#header {

	display: flex;
	flex-direction: column;

	align-self: center;

	width: 100%;

	padding: 2.5% 0 2.5% 0;

}

.branding_div {

	display: flex;
	flex-direction: column;

	align-self: center;

	max-width: 90%;

	box-shadow: 2.5px 2.5px 1px 2.5px rgba(255, 255, 255, 0.1);

	border-radius: 10px;

}

#banner {

	border-radius: 10px;

}

#social_img_divs {

	display: flex;
	flex-direction: row;

	width: 100%;

	margin-top: 2.5%;

}

.social_img_div {

	display: flex;
	flex-direction: column;

	align-items: center;
	align-content: center;
	align-self: center;
	justify-items: center;
	justify-content: center;
	justify-self: center;

	width: 100%;

	margin: 1%;
	padding: 1%;

	opacity: 1.0;

	box-shadow: 2.5px 2.5px 1px 2.5px rgba(255, 255, 255, 0.2);

	border-radius: 10px;

}

.social_img_div:hover {

	cursor: pointer;

	width: 99.5%;

	opacity: 0.75;

	box-shadow: 4px 4px 0.5px 1px rgba(255, 255, 255, 0.2);

}

#youtube {

	background-image: linear-gradient(
		red,
		rgb(150, 150, 150),
		rgb(25, 25, 25));

}

#youtube_img {

	height: auto;
	max-height: 100%;
	
}

#twitch {

	background-image: linear-gradient(
		rgb(145, 70, 255),
		rgb(100, 100, 100),
		rgb(200, 200, 200));

}

#instagram {

	background-image: linear-gradient(
		rgb(255, 162, 0),
		magenta,
		rgb(255, 0, 0));

}

.social_img {

	max-width: 33.33%;
	height: auto;
	max-height: 90%;

	border-radius: 10px;

}

#footer {

	display: flex;
	flex-direction: row;

	justify-content: center;
	align-self: center;

	width: 90%;

	margin-bottom: 5%;

	padding: 2.5% 0 2.5% 0;

	color: rgba(255, 255, 255, 0.2);

}

@media (max-aspect-ratio: 1/1) {

	#social_img_divs {

		flex-direction: column;

		align-items: center;
		
	}

	.social_img_div {

		width: 50%;

		margin: 3.5%;

	}

	.social_img_div:hover {

		width: 55%;
		
	}


}