@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,900');

body {
	margin: 0;
	padding: 0;
	border: 0;

	min-height: 100vh;

	background-color: #191414;
	font-family: 'Lato', sans-serif;
}

.albums {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 10px;
}

.album-image {
	display: box;
	width: 300px;
	height: 300px;
	text-decoration: none;
}

.album-image:hover > .album-overlay {
	opacity: 1;
}

.album-overlay {
	transition: opacity 0.25s cubic-bezier(0,0,0.3,1);
	will-change: opacity;
	opacity: 0;

	width: 300px;
	height: 300px;

	background-color: rgba(0,0,0,0.75);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	text-align: center;
}

.album-overlay > * {
	padding: 0 10px 0 10px;
}

.album-overlay > .name {
	font-weight: 900;
}


.button {
	text-align: center;
	color: rgba(255,255,255,0.7);
	margin-top: 1em;
	padding: 0.5em 0 0.5em 0;
	font-style: italic;
	cursor: pointer;

	transition: background-color 0.25s cubic-bezier(0,0,0.3,1), color 0.25s cubic-bezier(0,0,0.3,1);
}

.button:hover {
	background-color: #1db954;
	color: white;
}