body {
	background-color: #F8F8F8;
	margin: 0;
  	position: absolute;
  	top: 50%;
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

h1, h2 {
	font-family: 'Raleway', sans-serif;
	color: #36454F;
	
	margin-top: 0%;
	text-align: right;
}


h1 {
	font-size: 6em;
	margin-right: 5%;
	margin-bottom: 0.5%;
}

h2 {
	font-size: 3em;
	text-decoration: none;
	margin-right: 5%;
	margin-bottom: 2.5%;
}

.social {
	float: right;
}

@media only screen and (max-width: 1550px) {
	h1 {
		font-size: 6em;
	}

	h2 {
		font-size: 2.5em;
	}

	.social {
		max-width: 100%;
		height: auto;
	}	
}

@media only screen and (max-width: 1000px) {
	h1 {
		font-size: 4.5em;
	}	

	h2 {
		font-size: 2em;
	}

	.social {
		max-width: 85%;
		height: auto;
	}
}

@media only screen and (max-width: 800px) {
	h1 {
		font-size: 4em;
	}	

	h2 {
		font-size: 1.75em;
	}

	.social {
		max-width: 70%;
		height: auto;
	}

	.turtles {
		background-image: url("images/arrow.png");
	}
}

@media only screen and (max-width: 600px) {
	h1 {
		margin-top: 20%;
		font-size: 3em;
	}
	h2 {
		font-size: 1.25em;
	}

	.social {
		max-width: 55%;
		height: auto;
	}
}



#buttons {
	display: flex;
	justify-content: flex-end;
}

a {
  margin-right: 5%;
  text-decoration: underline solid transparent;
  transition: text-decoration 1s ease;
}

a:hover {
  text-decoration: underline solid #36454F;
}

img {
	max-width: 100%;
	height: auto;
}