* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
	--backdrop: #1c1b1b;
	--text-color: #f7f7f7;
	--page-color: #242120;
	--link-color: #6b4422;
}

body {
	background-color: var(--backdrop);
	display: flex;
	justify-content: center;
	color: #f7f7f7;
	flex-direction: column;
	font-family: calibri, sans-serif;
	width: 100%;
}

main {
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin-top: 60px
}

.nav-links {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: clamp(960px);
	gap: 70px;
}

.hamburger {
  display: none;
  cursor: pointer;
  background-color: inherit;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: var(--text-color);
  transition: all 0.3s ease;
}

header {
	width: 100%;
	background-color: #000000;
	display: flex;
	justify-content: center;
	align-content: center;
	position: static;
	left: 0;
	top: 0;
}

.top {
	background-color: inherit;
	width: clamp(960px);
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

nav {
	width: clamp(960px);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px
	position: static;
}

nav a {
	font-weight: bold;
}

div {
	display: flex;
	flex-direction: column;
	background-color: var(--page-color);
	width: clamp(45vw, 700px, 85vw);
	justify-content: center;
	align-self: center;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px; 
}

.read-more {
	text-decoration: underline;
	margin-left: 13px;
	margin-bottom: 10px;
}

.scene {
	height: 20px;
	color: var(--backdrop);
	border: none;
}

.title {
	text-align: center;
	background-color: var(--backdrop);
}

.series-title { 
	justify-content: center;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

.chapter-number {
	justify-content: center;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

.chapter-title {
  justify-content: center;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

.story p {
	text-indent: 3%;
	margin: 10px;
}

.comments {
	background-color: #000000;
}

h1 {
	justify-content: center;
	align-self: center;
	margin: auto;
}

button {
	font-family: inherit;
	font-size: clamp(1vw, 18px, 4vw);
	height: clamp(2vh, 36px, 8vh);
	background-color: #000000;
	color: var(--text-color);
	width: clamp(9vw, 108px, 20vw);
	border: 1px solid var(--page-color);
}

.btns {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	background-color: inherit;
}

p {
	font-size: clamp(1vw, 19px, 4vw);
	margin: 2%;
}

.announcement {
	justify-content: center
}

.chapters {
	text-indent: none
}

.gloss-entry {
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	width: 680px;
	max-width: 95%;
	padding: 10px;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

header a {
	text-transform: uppercase;
}

header {
	width: 100vw;
}

.top {
	width: clamp(50vw, 725px, 100vw)
}

.gloss-entry dt {
	color: #f7f7f7;
	font-size: 16px
}

.gloss-entry dd {
	color: #76726f;
	font-size: 16px
}

h1 .placeholder {
	font-size: clamp(32px, 10vw, 50px);
	margin: auto
}

.latest {
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
}

footer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: auto;
}

footer p {
	width: 250px;
}

img {
	max-width: 100%;
	height: auto;
}

p.letter {
	margin-left: 10%;
	margin-right: 10%;
	text-indent: 0%;
	font-family: Georgia, 'serif'
}

@media screen and (max-width: 768px) {
	.hamburger {
		display: block;
	}
	
	.hamburger.active .bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.hamburger.active .bar:nth-child(2) {
		opacity: 0;
	}

	.hamburger.active .bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	
	.nav-menu {
		position: fixed;
		top: 375px;
		left: -100%;
		width: 100vw;
		height: 70vw;
		background-color: #000000;
		text-align: center;
		transition: 0.3s;
	}
	
	.nav-links {
		flex-direction: column;
		background-color: #000000;
		justify-items: center;
		justify-content: center;
		width: 100vw;
		padding: 20px;
	}
	
	.nav-menu.active {
		left: 0;
	}
}