@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
@import url('https://fonts.googleapis.com/css?family=Voces');

@keyframes fade-in {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

body {
	font-family: 'Shadows Into Light', cursive;
	font-size: 32px;
	line-height: 48px;
}

hr {
	display: block;
	margin-top: 64px;
	margin-bottom: 64px;
	border: none;
}

.container {
	width: 900px;
}

.centered {
	display: block;
	margin: auto;
}

.fade-in {
	animation-name: fade-in;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-direction: linear;
	animation-fill-mode: forwards;
	opacity: 0;
}

.delayed-fade-in {
	animation-name: fade-in;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-direction: linear;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	opacity: 0;
}

.slow-delayed-fade-in {
	animation-name: fade-in;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-direction: linear;
	animation-fill-mode: forwards;
	animation-delay: 2s;
	opacity: 0;
}

.character-box-container {
	position: static;
	width: 100%;
}

.character-box {
	width: 400px;
	margin: 64px 8px 64px 8px;
	font-family: 'Voces', cursive;
}

.character-box-header {
	margin-left: 4px;
	margin-bottom: 8px;
	float: left;
}

.character-box-links {
	margin-right: 4px;
	margin-bottom: 8px;
	float: right;
}

.character-link-icon {
	width: 48px;
	height: 48px;
}

.character-box-portrait {
	height: 268px;
	background-color: rgba(0, 0, 0, 0.35);
	background-position: center;
	background-size: cover;

}

.character-box-footer {
	font-size: 20px;
	line-height: 30px;
	margin-left: 4px;
	margin-top: 8px;
}

.character-box:hover {
	background-color: rgba(255, 255, 255, 0);
}

.character-box.left {
	float:left;
}

.character-box.right {
	float: right;
}