/* Mobile onwards */

html {
	height: 100%;
	background-color: #222222;
	background-image: url("../images/painting.jpg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body {
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin: 0px;
	color: #ffffff;
	font-family: "Alegreya Sans", tahoma;		
}

h1 {
	font-size: 60pt;
	text-shadow: 8px 8px rgba(44, 44, 44, 0.6);
	text-align: center;
	margin: 0px;
}

main {
	flex: 1;
}

aside {
	flex: 3;
	text-align: center;	
}

aside:first-child {
	flex: 2;
}

.social-media {
	list-style-type: none;
	padding: 0px;
	background-color: rgba(33, 33, 33, 0.6);
	padding-top: 5px;
	padding-bottom: 5px;
}

.social-media li {
	margin: 10px;
}

/* Greater than mobile */

@media only screen and (min-width:768px) {

	body {
		justify-content: space-between;
		flex-direction: row;
	}

	main {
		flex-grow: 5;
		flex-shrink: 3;
		min-height: 100%;
	}

	aside {
		flex: 1 1;
		text-align: left;
	}

	section.title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);			
	}	
	
	.social-media {
		background-color: none;
		padding: 0px;
	}
}