* {
	margin: 0;
	padding: 0;
}

/* Make page take up full height */
html, body {
	min-height: 100vh;
}

body {
	background-color: #000;
	font-family: 'Times New Roman', Times, serif;
}

hr {
	border-width: 0;
	height: 2px;
}

#page-content {
	display: flex;
	min-height: 100vh;
	width: 100%;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	/* justify-content: center; */
}

#page-content > * {
	flex-grow: 1;
}

#page-content > #header, #page-content > #footer {
	flex-grow: 0;
}

#title {
	margin: 1rem 0 1rem 0;
}

#title-image {
	height: 4rem;
}

#title * {
	font-family: 'New Rocker', serif;
	text-decoration: none;
	color: #e1e1e1;
}

#title > h1 {
	font-size: 3em;
}

#title > h2 {
	font-size: 1.5em;
}

#title, #nav-outer {
	display: block;
	width: 100%;
	text-align: center;
	color: #e1e1e1;
}

#nav-outer {
	margin: 1rem 0 1rem 0;
	padding: 0;
	background-color: #111111;
}

#nav-outer > hr {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	color: #e1e1e1;
	background-color: #e1e1e1;
	box-shadow: #e1e1e1 0 0 10px;
}

#nav {
	display: flex;
	margin: 0 auto;
	width: 66%;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

#nav a {
	text-decoration: none;
	font-family: 'IM Fell DW Pica SC', serif;
	font-size: 1.5em;
	color: #e1e1e1;
}

#nav a:hover {
	text-shadow: #e1e1e1 1px 0 10px;
}

#main {
	text-align: center;
	color: #e1e1e1;
}

#preview {
	width: 30%;
}

#under-preview {
	display: block;
	margin: 0 auto;
	width: 33%;
}

#under-preview > * {
	margin: 0.4rem;
}

#content-warnings {
	letter-spacing: 0.5cap;
}

#comic-page {
	scroll-margin: 1rem;
	max-width: 33%;
	max-height: 90vh;
	width: auto;
	height: auto;
	cursor: pointer;
}

#front-page-nav {
	font-size: 1.5em;
}

#comic-nav {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	gap: 0.5rem;
}

#front-page-nav *, #comic-nav * {
	background-color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;
	color: #e1e1e1;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
}

#comic-nav button {
	cursor: pointer;
}

#comic-nav button[disabled] {
	color: #808080;
	cursor: default;
}
#comic-nav #previous-link {
	background-image: url('/media/icons/left_nav_white.png');
}
#comic-nav #previous-link[disabled] {
	background-image: url('/media/icons/left_nav_gray.png');
}
#comic-nav #next-link {
	background-image: url('/media/icons/right_nav_white.png');
}
#comic-nav #next-link[disabled] {
	background-image: url('/media/icons/right_nav_gray.png');
}

#disclaimer {
	color: #808080;
}

#comments-div {
	/* background-color: #e1e1e1; */
	color: #e1e1e1;
	border-radius: 20px;
	padding: 20px;
	font-family: Mulish,Avenir,Inter,Helvetica,Arial,sans-serif;
}

.generic-container {
	/* margin: 1rem 0 1rem 0; */
	text-align: justify;
}

.appropriate-width {
	width: 66%;
	margin: 0 auto;
}

.generic-container > h2 {
	font-family: 'IM Fell English SC', serif;
	text-align: center;
	color: #e1e1e1;
}

.generic-container > p {
	font-family: 'Spectral', serif;
	color: #d7d7d7;
}

.generic-container > hr {
	color: #d7d7d7;
}

.generic-container a {
	color: #e1e1e1;
}

.center-all-vertically {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: center; */
}

.image-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8rem;
}

.image-links > * {
	position: relative;
	width: 5%;
	overflow: hidden;
}

.image-links > *:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.image-links img {
	position: absolute;
	object-fit: cover;
	width: 100%;
}

#spoiler-warning {
	text-align: center;
	color: #d7d7d7;
}

#news {
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 1rem;
}

.news-box {
	background-color: #111111;
}

.news-image {
	width: 10%;
	text-align: center;
}

.news-image > img {
	width: auto;
	height: auto;
	max-height: 90vh;
	max-width: 80%;
	padding: 10%;
	/*margin: auto;*/
}

#news-container {
	display: inline-block;
	box-sizing: border-box;
	width: 26%;
	padding: 1rem;
	text-align: center;
}

#news-container > h2 {
	font-family: 'IM Fell English SC', serif;
	color: #d7d7d7;
}

#news-container > hr {
	color: #d7d7d7;
	background-color: #d7d7d7;
	margin-bottom: 1rem;
}

.news-item {
	display: inline-block;
	margin: 1rem;
	width: 90%;
	text-align: justify;
	text-justify: auto;
	color: #bababa;
	font-family: 'Spectral', serif;
}

.news-item > .thin {
	padding: 0;
	margin: 4px 0 4px 0;
	height: 1px;
	color: #bababa;
	background-color: #bababa;
}

#footer {
	margin: 3rem 0 0 0;
	padding: 0;
	display: inline-block;
	width: 100%;
	height: fit-content;
	background-color: #0f0f0f;
}

#footer > hr {
	margin: 0 0 4px 0;
	padding: 0;
	color: #212121;
	background-color: #212121;
}

#footer > ul {
	display: inline;
	float: right;
	margin: 0;
	padding: 0 4px 0 0;
	list-style-type: none;
	text-align: right;
	color: #404040;
}

#footer a {
	color: #404040;
}

#footer a:hover {
	color: #e1e1e1;
}

@media only screen and (max-aspect-ratio: 3/2) {
	#nav {
		width: 100%;
	}

	#preview {
		width: 80%;
	}

	#comic-page {
		max-width: 80%;
		max-height: fit-content;
	}
	
	#under-preview {
		width: 82%;
	}

	/*#news {
		flex-direction: column;
		align-items: center;
	}

	.news-image {
		width: 80%;
		order: 2;
	}*/

	.news-image {
		width: 10%;
	}
	
	#news-container {
		width: 80%;
	}

	.image-links {
		gap: 1rem;
	}

	.image-links > * {
		width: 20%;
	}

	#footer > ul {
		padding: 0 1rem 1rem 0;
		font-size: smaller;
	}

	.appropriate-width {
		width: 90%;
	}
}