html
{
	font-family: 'Slabo 27px', serif;
	background-color: #E7FEFF;
}

.socialmedia
{
	float: left;
}

.links
{
	float: right;
}

#aboutme
{
	display: inline-block;
}

.picture-right
{
	float: right;
	margin: 10px;
}

.picture-left
{
	/*float: left;*/
	margin: 10%;
}

.picture-left.thumbnail
{
	width: 200px;
	height: 200px;
}

.picture-right.thumbnail
{
	width: 200px;
	height: 200px;
}

.thumbnail
{
	width: 20%;
	height: 20%;
}

.horizon
{
	width: 100%;
	height: 200px;
}


.website-image
{
	display: inline-block; /*Eliminate width, height, and margin-left for mobile devices*/
	width: 20%;
	height: 20%;
	margin-left: 10%;
}
html
{
	font-family: 'Slabo 27px', serif;
	background-color: #E7FEFF;
}

.socialmedia
{
	float: left;
}

.links
{
	float: right;
}

#aboutme
{
	display: inline-block;
}

.picture-right
{
	float: right;
	margin: 10px;
}

.picture-left
{
	/*float: left;*/
	margin: 10%;
}

.picture-left.thumbnail
{
	width: 200px;
	height: 200px;
}

.picture-right.thumbnail
{
	width: 200px;
	height: 200px;
}

.thumbnail
{
	width: 20%;
	height: 20%;
}

.horizon
{
	width: 100%;
	height: 200px;
}


.website-image
{
	display: inline-block; /*Eliminate width, height, and margin-left for mobile devices*/
	width: 20%;
	height: 20%;
	margin-left: 10%;
}

@media screen and (max-device-width: 900px) {
	html{
		font-size: 4em;
	}
	.website-image
	{
		display: inline-table;
		width: 100%;
	}
	.picture-left
	{
		margin: 0%;
	}

	.horizon
	{
		display: none;
	}
	.website-image img
	{
		display: none;
	}

	.socialmedia img
	{
		height: 5%;
	}
}
Create a CSS "viewport" that is mobile-friendly
Create a CSS "viewport" that is mobile-friendly
