body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', arial, sans-serif;
}

a {
	color: #e8423e;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: #d50000;
}

.wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero {
	width: 50%;
	height: 400px;
	/*border: 5px dashed black;*/
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
}

	.portrait {
		width: 256px;
		border-radius: 50%;
		margin-right: 64px;
	}
	
	.title {
		font-family: "Roboto Slab", sans-serif;
		font-size: 3rem;
		font-weight: 300;
		border-bottom: 5px solid #e8423e;
	}

.content {
	/*border: 5px dashed black;*/
}
	
	.functions li {
		list-style-type: none;
		margin-bottom:  48px;
		font-size: 1.5rem;
		font-weight: 700;
		color: #212121;
	}
	
	.functions li:last-child {
		margin-bottom: 0;
	}
	
.footer {
	width: 100%;
	margin-top: 128px;
	margin-bottom: 32px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	font-size: 1.2rem;
}

.credits {
	font-family: "Roboto", sans-serif;
	font-size: 0.9rem;
	font-weight: 300;
	margin-bottom: 8px;
}

/*
 * For tablets and smaller
 */
@media all and (max-width: 960px) {
	.hero {
		/*flex-direction: column;
		justify-content: center;
		align-items: center;*/
		width: 70%;
	}
	
		.portrait {
			width: 212px;
			margin-right: 32px;
		}
		
	.content {
		width: 100%;
		padding-left: 32px;
		padding-right: 32px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
		.functions {
			padding-left: 0;
		}
		
		.functions li {
			font-size: 1.4rem;
			margin-bottom: 32px;
		}
}

/*
 * For phones
 */
@media all and (max-width: 700px) {
	.hero {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
		.portrait {
			width: 192px;
			margin-right: 0;
		}
		
	.footer {
		margin-top: 64px;
		flex-direction: column;
		align-items: center;
		line-height: 1.7rem;
	}
		
		.filler {
			display: none;
		}
}