@font-face {
	font-family: Pixelated;
	src: url("MedodicaRegular.otf");
}

body {
	background-image: url("media/Jez Timms - dithered.png");
	background-color: rgb(18, 18, 18);
	background-repeat: no-repeat; /* Prevents the image from tiling */
	/*
	 * background-position: center center; /* Centers the image
	 * background-size: cover; /* Ensures the image covers the entire background area
	 */
	background-attachment: fixed; /* Makes the background image fixed */
	font-family: "Pixelated";
}

.content-center {
	display: flex;
	flex-direction: column;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 767px;
	width: 100%;
	height: 90%;
	color: rgba(232, 232, 232, 1);
	overflow: hidden;
}

nav, main, footer {
	background-color: rgba(12, 12, 12, 0.9);
	padding: 8px;
	border-style: solid;
	border-radius: 5px;
	border-color: rgba(232, 232, 232, 1);
	border-width: 2px;
	font-size: 24px;
}

nav {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	margin-bottom: 16px;
}
	
nav a {
	color: white;
	text-decoration: none;
}

nav.subnav {
	margin-top: -18px;
}

main {
	position: relative;
	flex: 1;
	overflow-y: scroll;
	text-align: justify;
	padding: 0 12px 0 24px;
}

main a {
	color: rgb(246, 181, 83);
}

footer {
	overflow: auto;
	margin-top: 16px;
}

footer ul {
	margin: 0;
	height:31px;
	justify-content: center;
}

h4, h5 {
	margin: 2px auto;
}

h6 {
	margin: 8px;
	text-align: right;
}

p {
	text-indent: 4ch;
}

span.underline {
	text-decoration: underline;
}

.img-list-title {
	text-align: center;
}

.img-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.img-grid li {
	display: inline-block;
}

.img-grid li a {
	text-decoration: none;
}

.img-grid img {
	border: 2px solid rgba(18, 18, 18, 1);
	transition: transform 0.5s;
}

.img-grid img:hover {
	transform: scale(1.1);
}

.hover-text {
	text-decoration-line: underline;
	text-decoration-style: dotted;	
}

.hover-text:hover {
	color: rgba(255, 255, 255, 1);
}

.review-imgs {
	float: right;
	margin: 0 16px 0 24px;
}

.review img {
	margin: 2px;
}