:root {
	--deep-purple: rgb(67, 49, 87);
	--merc-purple: rgb(85, 66, 104);
	--merc-lilac: rgb(165, 125, 160);
	--merc-lavender: rgb(190, 157, 171);
	--beige: rgb(247, 234, 214);
	--champagne: rgb(243, 208, 167);
	--champagne-tuple: 243, 208, 167;
	--ochre: rgb(212, 156, 106);
	--burnt-ochre: rgb(192, 130, 80);
	--plum: rgb(96, 60, 68);
	--coral: rgb(170, 109, 115);
	--g1: rgb(20, 19, 19);
	--g2: rgb(33, 29, 28);
	--g3; rgb(59, 53, 50);
	--g4: rgb(112, 95, 95);
	--g5: rgb(119, 108, 102);
}

/* latin-ext */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 100 700;
  font-display: auto;
  src: url(./antonio/gNMEW3NwSYq_9WD3yHoiFbez.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 100 700;
  font-display: auto;
  src: url(./antonio/gNMEW3NwSYq_9WD3yHQiFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Antonio-fallback';
  text-transform: uppercase;
  size-adjust: 99%;
  src: local('Arial Narrow');
}

@font-face {
    font-family: 'tex_gyre_heros_cnbold';
    src: url('texgyreheroscn-bold.otf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'tex_gyre_heros_cnregular';
    src: url('texgyreheroscn-regular.otf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'tex_gyre_heros_cnitalic';
    src: url('texgyreheroscn-italic.otf');
    font-weight: 400;
    font-style: italic;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


html {
	/* background-color: var(--champagne); */
	background-color: black;
	font-family: "Antonio", "Antonio-Fallback";
}

ul {
	list-style: none;
}

body {
	margin: 0;
	margin-bottom: 32px;
}

#pulp {
	object-fit: cover;
	z-index: -2;
	width: 100%;
	height: auto;
	position: absolute;
	top: -21.8vw;
}

#stinky {
	display: block;
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: auto;
	
	z-index: -1;
	
	margin-bottom: -100vw;
}


img[src="THE_REALER_JOHN_FORTRESS.svg"] {
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
	height: 275px;
	width: auto;
}

#viewporthero {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	
	/*max-height: 100vw;*/
	min-height: 100vh;
}

#viewporthero.conventional {
	min-height: initial;
}

@media screen and (min-width: 1280px) {
	#viewporthero.conventional > article {
		max-width: min(80%, 1920px);
		min-width: initial;
	}
	.warning {
		padding-left: 16px;
		padding-right: 16px;
	}
}

#container {
	overflow: hidden;
	position: relative;
}

nav ul {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

nav ul li {
	word-wrap: none;
}

nav ul li:last-of-type {
	margin-left: auto;
}

nav {
	width: 100%;
	padding-right: 3em;
	padding-left: 3em;
	padding-top: 2em;
	box-sizing: border-box;
}

#biglogo, #wishlistbutton, nav, article {
	filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.7));
}

#wishstrip {
	display: flex;
	/*justify-content: flex-end;*/
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
}

article {
	flex-grow: 1;
}

#wishlisthero {
	display: flex;
	flex-direction: column;
	margin-right: 3em;
	margin-left: 3em;
	max-width: 800px;
}


#wishlisthero > img {
	margin-bottom: 1em;
	width: 100%;
	height: auto;
}

#wishlistbutton {
	width: 94.8%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	text-align: center;
	color: var(--beige);
	background-color: rgb(47, 113, 168);
}
#wishlistbutton:hover {
	background-color: rgb(20, 82, 133);
}
.butan img, .butan svg {
	vertical-align: baseline;
	height: 1cap;
	margin-right: 0.25ex;
	width: auto;
	
}

#wishlistbutton img {
	vertical-align: baseline;
	height: 1.05cap;
	position: relative;
	top: 0.025cap;
}

.butan {
	font-family: "Antonio", "Antonio-fallback";
	font-size: 36px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: -0.02ex;

	color: var(--beige);
	background-color: var(--merc-purple);
	
	text-decoration: none;

	display: inline-block;
	
	padding:
		0.25em
		0.5ex
		calc(0.25em + 0.15cap)
		0.5ex
	;

}

.butan.extbut {
	margin-left: auto;
}

.censor::before {
	content: "";
	display: inline-block;
	height: 1cap;
	vertical-align: baseline;
	width: 0;
	background-color: var(--beige);
}

.censor:nth-of-type(1)::before {
	width: 5ex;
}
.censor:nth-of-type(3)::before {
	width: 3ex;
}
.censor:nth-of-type(4)::before {
	width: 2ex;
}

.butan:hover {
	background-color: var(--deep-purple);
}

#currentlink {
	background-color: var(--beige);
	color: var(--merc-purple);
}


.dlbutton {
	background-color: #4f6d3e;
}
.dlbutton:hover {
	background-color: #304e22;
}

#currentlink.dlbutton {
	background-color: var(--beige);
	color: #304e22;
}



footer {
	background-color: black;
	/*
	position: absolute;
	top: 69vw;
	width: 100%;
	*/
}

footer::before {
	display: block;
	position: relative;
	width: 100%;
	content: "";
	height: 72px;
	bottom: 72px;
	margin-bottom: -72px;
	background-image: linear-gradient(transparent, black);
}

footer a:hover {
	filter: drop-shadow(0px 0px 5px rgba(var(--champagne-tuple), 0.5));
}

#footcont {
	display: flex;
	flex-wrap: wrap;
	background-color: red;
	grid-column-gap: 2px;
	justify-content: center;
	color: var(--beige);
	background-color: var(--beige);
	margin-bottom: 1em;
	font-family: 'tex_gyre_heros_cnbold';
	font-weight: 700;
	
	width: 1030px;
	margin: 0 auto;
	
	align-content: first-baseline;
}


#footcont > div {
	background-color: black;
	display: block;
	padding: 0px 16px;
}

#gpg, #socials {
	width: 240px;
	box-sizing: border-box;
}
#disclaimer {
	width: 514px;
	box-sizing: border-box;
}

#footcont > #disclaimer {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#disclaimer > p {
	display: block;
	padding-left: 16px;
}

.oopsie {
	font-size: .75em;
}
#gpg {
	display: block;
}
#gpglink {
	display: block;
	color: var(--beige);
	margin: 0 auto;
}
#gpg_ornament {
	display: none;
}
#gpglink:hover #gpg_ornament {
	display: inline;
}

#footcont > #socials {
	font-size: 20px;
	line-height: 1.4;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#socials a {
	text-decoration: none;
}
#socials a:hover {
	text-decoration: underline;
}
#socials a, #socials a:visited {
	color: var(--beige);
}

#container {
	min-height: calc(78.2vw);
	justify-content: space-between;
	flex-direction: column;
	display: flex;
}
#socials svg {
	height: 1.5cap;
	position: relative;
	top: 0.15em;
	width: auto;
	margin-right: 0.25em;
	margin-left: 16px;
}
#disclaimer {
	font-size: 16px;
	line-height: 1.25;
}
.atto {
	margin-right: -0.15ex;
	margin-left: -0.15ex;
}

@media screen and (max-width: 1030px) {
	#footcont {
		width: 514px;
	}
	#footcont > #disclaimer {
		margin-top: 2px;
		padding-top: 16px;
		display: block;
	}
	#gpg {
		margin-bottom: 16px;
	}
	#viewporthero {
		max-height: initial;
		height: initial;
		min-height: calc(71.9vh + 64px);
	}

	
}

@media screen and (max-width: 1100px) {
	nav ul {
		/*justify-content: stretch;*/
	}
	nav ul li {
		flex-grow: 50;
	}
	nav ul li a {
		width: 100%;
		box-sizing: border-box;
	}
	nav ul li:last-of-type {
		margin-left: initial;
	}
}

@media screen and (max-width: 514px) {
	#footcont {
		background-color: black;
		gap: 16px;
	}
	#gpg, #socials, #disclaimer {
		width: 240px;
		margin: 0 auto;
	}
	#footcont {
		width: initial;
		flex-direction: column;
		background-color: black;
	}
}

article {
	font-size: 16px;
	margin: 5em auto;
	max-width: 1024px;
	min-width: 80%;
	background-color: var(--beige);
	font-family: 'tex_gyre_heros_cnregular';
	font-weight: 400;
	padding: 16px;
	line-height: 1.3;
	display: block;
}

h1, h2, h3, h4, h5, h6, .devcard, .warning, #downloadbuttons {
	font-family: 'tex_gyre_heros_cnbold';
	font-weight: 700;
}

.warning {
	font-size: min(max(16px, 2.4vw), 36px);
	background-color: #6d403e;
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 10px,
		rgba(0, 0, 0, 0.1) 10px,
		rgba(0, 0, 0, 0.1) 20px
	);
	color: var(--beige);
	padding-bottom: min(.98vw, 16px);
	padding-top: min(.98vw, 16px);
	text-align: center;
	margin: -16px -16px 0 -16px;
	text-transform: uppercase;
	display: block;
}

article ul {
	list-style: square;
	margin-left: 16px;
}

article p, article ul {
	margin-top: 1em;
	margin-bottom: 1em;
}

h2 {
	font-size: 1.5em;
	color: var(--deep-purple);
	border-bottom: 2px solid var(--deep-purple);
}

article {
	display: flex;
	flex-direction: column;
}

section:last-of-type > ul:last-of-type,
section:last-of-type > p:last-of-type {
	margin-bottom: 0;
}

#articlecontent {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#articlecontent > section {
	display: block;
}

#articlecontent > #downloadbuttons {
	flex-grow: 1;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-row: auto auto;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	margin: 24px auto;
}


#downloadbuttons > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	background-color: #4f6d3e;
	color: var(--beige);
	padding: 16px;
	text-align: center;
	text-decoration: none;
	font-size: 24px;
}

#downloadbuttons > a:hover {
	background-color: #304e22;
}

#downloadbuttons > a svg {
	margin: 0 auto;
	height: 100px;
	width: auto;
}

.extbut:hover svg path {
	fill: transparent;
	stroke: transparent;
}

.extbut svg .ebu {
	display: none;
}

.extbut:hover svg .ebu {
	display: inline;
	fill: currentColor;
}

.contwrap {
	font-family: 'Courier', 'Courier New';
	max-width: calc(80ch + 32px);
	margin-left: auto;
	margin-right: auto;
	line-height: 23px;
}

.contlist {
	background-color: #ded2c0;
	margin-top: 1em;
	margin-bottom: 1em;
}

.contentr:nth-child(even) {
	background-color: #c6caac;
	border-top: 1px solid #a0bc8a;
	border-bottom: 1px solid #a0bc8a;
	margin-top: -1px;
	margin-bottom: -1px;
}

@media screen and (min-width: 1080px) {
	.contwrap {
		max-width: calc(80ch + 32px + 64px);
		padding-left: 32px;
		padding-right: 32px;
		box-sizing: border-box;
		background-image: url('punch.svg');
		background-size: 32px 32px;
		background-position: 0px -14px;
		filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
	}
	.contlist {
		padding: 16px;
		background-image: url(computerpaper.svg), url(computerpaper.svg);
		background-repeat: no-repeat, no-repeat;
		background-size: auto 1610px, auto 1610px;
		background-position: 3px 23px, calc(80ch + 16px + 2px) 23px;
		background-origin: padding-box;
		border-left: 1px solid #a0bc8a;
		border-right: 1px solid #a0bc8a;
	}
	.contentr {
		height: 23px;
	}
	.contentr:nth-child(even) {
		background-color: initial;
		border-top: initial;
		border-bottom: initial;
		margin-top: initial;
		margin-bottom: initial;
	}

	.contentr:nth-child(6n),
	.contentr:nth-child(6n-1),
	.contentr:nth-child(6n-2) {
		background-color: #c6caac;
	}
	
	.contentr:nth-child(6n-2) {
		border-top: 1px solid #a0bc8a;
		margin-top: -1px;
	}
	.contentr:nth-child(6n) {
		border-bottom: 1px solid #a0bc8a;
		margin-bottom: -1px;
	}
	.contentr:nth-child(1) {
		padding-top: 1em;
		margin-top: -1em;
	}
	.contentr:last-child {
		padding-bottom: 1em;
		margin-bottom: -1em;
	}
}

.contname:after {
	content:" — ";
}
.contentr {
	display: block;
}
.contname {
	font-weight: 700;
}
.contresp {
	font-weight: 300;
}

.contentr {
	/*background-color: #ded2c0;*/
	border-left: 1px solid #a0bc8a;
	border-right: 1px solid #a0bc8a;
	margin-left: -1px;
	margin-right: -1px;
	padding-left: 8px;
	padding-right: 8px;
}

#devcards {
	margin-top: 2em;
	margin-bottom: 2em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	
}

.devcard {
	width: 158px;
	background-color: #ded2c0;
	box-sizing: content-box;
	padding: 16px;
	border: 6px solid rgba(128, 128, 128, 0.2);
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
}


.devcard > .roles {
	display: block;
}

.devcard > .roles .role {
	white-space: nowrap;
}

.devcard .polaroid > img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	box-sizing: border-box;
	display: block;
	background-color: var(--merc-lilac);
	border: 5px solid var(--beige);
}

.polaroid {
	position: relative;
}

.polaroid::before {
	content: "";
	width: 100%;
	aspect-ratio: 1/1;
	position: absolute;
	top: 0;
	box-sizing: border-box;
	border: 5px solid transparent;
	box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	z-index: 2;
}

.devcard .polaroid > h3 {
	text-align: center;
	font-size: 22px;
	line-height: 1.25cap;
	background-color: var(--beige);
	padding-bottom: 8px;
}

.polaroid {
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
}

.devcard > .roles {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
}

.devcard > .devlinks {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: auto;
}

.devcard > .devlinks > a {
	height: 20px;
	width: 20px;
	display: inline-block;
	/* background-color: red; */
}

.devlinks a {
	background-size: 20px 20px;
	background-repeat: no-repeat;
	filter: brightness(0%);

}

.devlinks a:hover {
	filter: brightness(0%) drop-shadow(0 0 5px var(--beige));
}

.devlinks a.artstation { background-image: url(artstation_simplified.svg); }
.devlinks a.bandcamp { background-image: url(bandcamp_simplified.svg); }
.devlinks a.bluesky { background-image: url(bsky_simplified.svg); }
.devlinks a.github { background-image: url(github_simplified.svg); }
.devlinks a.instagram { background-image: url(instagram_simplified.svg); }
.devlinks a.linkedin { background-image: url(linkedin_simplified.svg); }
.devlinks a.spotify { background-image: url(spotify_simplified.svg); }
.devlinks a.steam { background-image: url(steam_simplified.svg); }
.devlinks a.twitter { background-image: url(twitter_simplified.svg); }
.devlinks a.vimeo { background-image: url(vimeo_simplified.svg); }
.devlinks a.website { background-image: url(www_simplified.svg); }
.devlinks a.youtube { background-image: url(youtube_simplified.svg); }

@media screen and (max-width: 480px) {
	.devcard .polaroid > h3 {
		font-size: 20px;
		line-height: 1.25cap;
		padding-bottom: 8px;
	}

	#devcards {
		margin-top: 2em;
		margin-bottom: 2em;
		gap: 12px;
	}

	.devcard {
		width: 148px;
		padding: 8px;
		border-width: 3px;
	}
	.butan {
		font-size: 7.5vw;
	}
	.butan.extbut[href~="steamcommunity"] {
		background-color: red;
	}
	nav {
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
	}
	#articlecontent > #downloadbuttons {
		padding: 12px;
		grid-row-gap: 12px;
		grid-column-gap: 12px;
		grid-template-columns: calc(50% - 6px) calc(50% - 6px);
	}
	#downloadbuttons > a {
		padding: 12px;
	}
	#downloadbuttons > a svg {
		width: 75px;
	}
	article {
		padding: 8px;
	}
	#pulp {
		top: 0;
		height: 100vh;
		width: 100vh;
		left: calc(50vw - 50vh);
	}
	#stinky {
		top: 0;
		height: 150vh;
		width: 100vw;	
	}
	
	#wishlisthero {
		min-height: initial;
	}
	#viewporthero {
		min-height: 100vh;
	}
	#wishstrip {
		justify-content: center;
	}
}

@media screen and (max-height: 480px) {
	footer {
		position: relative;
		margin-top: 72px;
	}
}

.nb {
	white-space: nowrap;
}

@media screen and (min-width: 1030px) {
	.faq {
		columns: 2;
		margin-left: 20px;
		margin-right: 20px;
		column-gap: 30px;
		padding-top: 1em;
	}
	#specnotes {
		columns: 2;
		column-gap: 30px;
	}
}

dl > div, #specnotes > section {
	break-inside: avoid;
}

#faq dl dt > span {
	background-color: #DED2C0;
	line-height: 2em;
	font-family: 'Courier', 'Courier New';
	font-weight: 400;
	padding: 8px 2px 8px 2px;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
}

article i {
    font-family: 'tex_gyre_heros_cnitalic';
    font-weight: 400;
    font-style: italic;
}

#faq dl dt {
	margin-bottom: 12px;
	transform: rotate(-1deg);
}

#faq dl dt > span:after,
#faq dl dt > span:before {
	display: inline-block;
	content: "";
	height: 1lh;
	vertical-align: bottom;
	width: 16px;
	
	background-repeat: repeat-y;
	background-image: url(torn.svg);
	background-size: auto 120%;
}

#faq dl dt > span:after {
	margin-right: -16px;
}

#faq dl dt > span:before {
	margin-left: -16px;
	/* beyond scuffed lmao */
	transform: rotate(180deg);
}

.aa {
	display: inline-block;
	text-align: left;
	width: 20px;
}

#faq dl dd {
	text-indent: -20px;
	margin-left: 28px;
	margin-bottom: 1.2em;
}

.qq {
	font-weight: 700;
}

.aa {
	text-indent: initial;
	font-weight: 700;
	font-family: 'tex_gyre_heros_cnbold';
}

.smolemail {
	font-size: 0.8em;
}

.smolemail svg {
	font-size: 1.25em;
}