@font-face {
	font-family: 'AttractorSans_TallBold';
	src: url('/font/AttractorSans_TallBold.ttf'); /* font file source URL */
}
@font-face {
	font-family: 'AttractorSans_SMALLCAPS';
	src: url('/font/AttractorSans_SMALLCAPS.ttf'); /* font file source URL */
}
@font-face {
	font-family: 'Volter_Goldfish';
	src: url('/font/Volter__28Goldfish_29.ttf');
}
@font-face {
	font-family: 'Terminal-Grotesque';
	src: url('/font/terminal-grotesque.ttf');
}
@font-face {
	font-family: 'Golden-Sun';
	src: url('/font/Golden-Sun.ttf');
}
@font-face {
	font-family: 'MedodicaRegular';
	src: url('/font/MedodicaRegular.otf');
}
@font-face {
	font-family: 'VCR-JP';
	src: url('/font/vcr-jp.ttf');
}
@font-face {
	font-family: 'PerfectDOSVGA437';
	src: url('/font/PerfectDOSVGA437.ttf');
}
@font-face {
	font-family: 'vhs-gothic';
	src: url('/font/vhs-gothic.ttf');
}

* {
	box-sizing: border-box;
}

html {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}

h1 {
	font-family: 'AttractorSans_TallBold', Arial, sans-serif;
	font-size: 8px;
}

body {
	background: #000;
	color: #fff;
}

/* red text color */
header, a, .dialog__title, .dialog-line--anno .dialog-line__speaker {
	color: #d62828;
}

/* green text color */
.dialog-line--beans .dialog-line__speaker {
	color: #00d459;
}

header, main, footer {
	margin: 0 auto;
	max-width: 640px;
}

/* header stuff */

header {
	display: grid;
	grid-template-columns: max-content 1fr;
}

header h1 {
	grid-column: 1;
	padding-left: 0rem;
}

.main-nav {
	grid-column: 2;
	align-items: center;
	padding: 0 0.1rem 0 1rem;
}

.main-nav ul {
	font-family: 'Golden-Sun', Arial, sans-serif;
	font-size: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	text-align: center;
	align-items: center;
}

.main-nav .divider {
	flex-grow: 1;
	border-bottom: 1px solid #d62828;
	margin: 5px;
}

header a {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}

main img, main canvas {
	margin: 0 auto;
	display: block;
	image-rendering: pixelated;
}

footer {
	border-top: 1px solid #872020;
	padding: 0.5rem 0;
	text-align: center;
	font-size: 0.9em;
	color: #777;
}

footer a, .page-back {
	color: #872020;
}

.narration {
	font-family: 'vhs-gothic', Arial, sans-serif;
	margin: 3rem auto;
	text-align: center;
	font-size: 1rem;
}

.instruction {
	font-family: 'vhs-gothic', Arial, sans-serif;
	margin: 3rem auto;
	text-align: center;
	font-size: 1rem;
	color: #1A1A1A;
}

/* archive page */
.archive {
	font-family: 'vhs-gothic', Arial, sans-serif;
	margin: 1.5rem auto;
	text-align: left;
	font-size: 1rem;
	list-style: none;
	padding-left: 0;
}
.archive li {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5em;
	margin-bottom: 0.5em;
}


/* dialog sections */

.dialog {
	border: 1px solid #fff;
}

.dialog__title {
	margin: 0;
	background: #6d1010;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

.dialog__title:hover {
	color: #fff;
	background: #d62828;
}

.dialog__title-icon {
	display: inline-block;
	margin-left: 0.1em;
}

.dialog__title-icon:last-of-type {
	margin-right: 0.1em;
}

.dialog__body {
	padding: 2rem;
}

.dialog--collapsed .dialog__body {
	display: none;
}

.dialog-line {
	display: grid;
	grid-template-columns: 4em auto; /* ADJUST THIS SHIT FOR SPEAKER NAME COLUMN WIDTH */
	gap: 0.5em; /* GUTTER BETWEEN SPEAKER NAME AND SPEECH TEXT */
}

.dialog-line__speaker {
	grid-column: 1;
	text-align: right;
}

.dialog-line__speech {
	grid-column: 2;
}

/* next page link etc. */

.page-nav {
	margin: 2rem 0 1rem 0;
	text-align: left;
	display: flex;
}

.page-nav__link {
	font-family: 'Volter_Goldfish', Arial, sans-serif;
	display: inline-block;
	font-size: 1.5rem;
}

/* back page link */
.page-back {
	display: block;
	margin-bottom: 1rem;
}

/* suggestion box section */
.suggest {
	text-align: right;
}

.suggest__input-container, .suggest__message {
	text-align: right;
	margin-bottom: 1rem;
}

.suggest__body, .suggest__submit {
	display: inline-block;
}

.suggest__body {
	width: 20rem;
	height: 3rem;
}

.suggest__submit, .suggest__message {
	font-family: 'Golden-Sun', Arial, sans-serif;
	display: inline-block;
	font-size: 1.5rem;
	background: none;
	border: 0;
	color: #00ff00;
}

.suggest__submit {
	text-decoration: underline;
}

@media only screen and (orientation: portrait) {
	header {
		display: block;
	}

	.main-nav {
		padding-left: 0;
	}

	.main-nav .divider:first-of-type, .main-nav .divider:last-of-type {
		display: none;
	}

	header, main {
		margin: 0 auto;
		max-width: 100%;
	}

	main {
		margin-top: 0.5rem;
	}

	main img {
		width: 100%;
	}

	.suggest__body {
		display: block;
		width: 100%;
		height: 5rem;
	}
}