html {
	height: 100%;
}
html, body {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: larger;
	line-height: 1.4em;
	font-family: Palatino, Book Antiqua, serif;
	color: #ccc;
	background-color: #202022;
}

body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 3em;
}

a {
	color: #bbb;
	text-decoration: underline;
	transition: color .2s;
}
	a:hover {
		color: #ddd;
	}

h1 {
	font-size: 1.7em;
	text-align: center;
	margin-bottom: 2em;
	margin-top: 1.5em;
}

p {
	margin-bottom: 1em;
}

.nowrap {
	white-space: nowrap;
}

.hidden {
	display: none;
}

.thin {
	font-weight: 300;
}


.album, .intro, .news-container {
	align-self: center;
	width: 50vw;
	display: flex;
	flex-direction: column;
}

.intro {
	text-align: center;
}

.album:first-of-type {
	margin-top: 0;
}

.album:last-of-type {
	margin-bottom: 4em;
}

.album {
	margin-top: 2em;
	margin-bottom: 2em;
}

	.album .main {
		width: 100%;
		text-align: center;
	}

		.album .main img {
			transition: box-shadow .3s;
			box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
			width: 100%;
			height: auto;
		}

		.album .main a:hover img {
			box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.1);
		}

		.album .main h3 {
			font-weight: 500;
			margin-bottom: 0;
		}
			.album .main h3 small {
				font-weight: 400;
			}

		.album .main p,
		.intro p,
		.news-block p {
			color: #888;
			margin-top: 1em;
			margin-bottom: 1.5em;
		}

	.album .links {
		display: flex;
		flex-flow: nowrap row;
		justify-content: center;
		align-content: center;
	}
		.album .links a {
			padding: .5em;
		}
			.album .links a img {
				width: 2em;
				height: 2em;
				opacity: .7;
				transition: opacity .3s;
			}
			.album .links a:hover img {
				opacity: 1;
			}

.news-container {}

	.news-container .news-block {
		margin-bottom: 2em;
	}

		.news-container .news-block img {
			width: 100px;
			float: left;
			margin-top: .4em;
			margin-right: 1em;
			margin-bottom: .5em;
		}

		.news-container .news-block p {
			margin-top: .2em;
			margin-bottom: 0;
		}

#social {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: .9em;
}
	#social a {
		padding: .2em .3em;
	}

	#social p {
		margin-top: 0;
		margin-bottom: .2em;
	}

.divider {
	margin: auto;
	margin-top: .5em;
	margin-bottom: .5em;
	width: 20%;
	text-align: center;
	color: #666;
	font-size: 3em;
}
	/* .divider:before {
		content: '〜';
	}*/

.message {
	text-align: center;
	padding: 3em;
    margin-top: 5em;
}

@media screen and (orientation:portrait) {
	body {
		font-size: 2em;
	}
	.album, .intro, .news-container {
		width: 90%;
	}

	.news-container .news-block {
		margin-bottom: 3em;
	}

	.news-container .news-block img {
		width: 150px;
		height: 150px;
	}
}

@media screen and (orientation:landscape) and (max-height: 640px) {
	.album, .intro, .news-container {
		width: 80vw;
	}

	.album .main img {
		width: 40vw;
	}
}