:root {
	--img-width: 270px;
	--img-height: 400px;
}

body {
	background: #1b1a23;
	color:lightgray;
}

h1 {
	display: block;
	position: relative;
	font-size: 1.5em;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#layout-container {
	display: flex;
	background-color: #2b2a33;
	border: 50px solid #2b2a33;
	border-radius: 30px;
}

#deck-title {
	text-align: center;
}

.card {
	display: block;
	width: var(--img-width);
	height: var(--img-height);
	margin-left: auto;
	margin-right: auto;
}

.card:hover {
	z-index: 1;
}

.card-inner {
	width: var(--img-width);
	height: var(--img-height);
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.card-inner.is-flipped {
	transform: scale(200%) rotateY(180deg);
}

.card-front,
.card-back {
	position: absolute;
	width: var(--img-width);
	height: var(--img-height);
	backface-visibility: hidden;
}

.card-deck img,
.card-front img {
	display: block;
	height: var(--img-height);
	margin-left: auto;
	margin-right: auto;
	background: black;
}

.card-back {
	background-color: #1b1a23;
	color: lightgray;
	transform: rotateY(180deg);
	& .card-title {
		text-align: center;
		font-weight: bold;
	}
	& p {
		text-align: left;
		font-size: 0.6em;
		margin-left: 5%;
		margin-right: 5%;
	}
	& p.author {
		font-size: 0.5em;
	}
	& img {
		float: left;
		width: calc(var(--img-width)/3);
		margin: 10px 10px 0px 5px;
	}
}

.card-deck:hover {
	z-index: 0;
}

.card-front img,
.card-deck img,
.card-back {
	border: 1px solid black;
	border-radius: 10px;
}

.dropdown {
	position: relative;
	display: inline-block;
	background-color: #2b2a33;
	padding: 10px;
	font-size: 14pt;
}

.dropdown:hover {
	background-color: #4b4a53;
}

.dropdown-content {
	display: none;
	position: absolute;
	margin: 0px -10px;
	border: 3px solid #1b1a23;
	background-color: #2b2a33;
	width: 15em;
	font-size: 12pt;
	z-index: 1;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-content div {
	padding: 10px;
}

a {
	color: lightgray;
	text-decoration: none;
}

.dropdown-content div:hover {
	background-color: lightgray;
	color: #2b2a33;
	& a {
		color: #2b2a33;
		text-decoration: none;
	}
}