@charset "UTF-8";

:root
{
	--sans-serif: 'Avenir Next', sans-serif;

	--bgblue: #00004e;
	--darkestblue: #000052;
	--darkblue: #003680;
	--brightblue: #0852ff;
	--lightblue: #006bff;
	--lighterblue: #529aff;
	--lightestblue: #b6d4ff;

	--purple: #412094;
	--lightpurple: #5c1cff;

	--red: #e0410e;
	--brown: #4d2e1c;
	--lightbrown: #975e2f;
	--lighterbrown: #e08230;
	--peach: #e0a070;

	--darkyellow: #deac00;
	--brightyellow: #ffcd00;
	--lightyellow: #ffde4a;

	--green: #008600;

	--offwhite: #f6ffff;
	--lightgray: #f4efea;
	--white: #fff;

	--background: var(--bgblue);
	--box: var(--white);
	--text: var(--black);
	--subtle: var(--lighterblue);
	--interactive: var(--brightblue);
}

*
{
	box-sizing: border-box;
}

/* Scaling */

html
{
  font-size: 10px;
}

body
{
  font-size: 1.8rem;
}

@media (max-width: 240px) { html { font-size: 2.4px; }}
@media (min-width: 240px) { html { font-size: 1vw; }}
@media (min-width: 240px) { body { font-size: 4.8rem; }}
@media (min-width: 480px) { body { font-size: 3.6rem; }}
@media (min-width: 720px) { body { font-size: 2.4rem; }}
@media (min-width: 960px) { body { font-size: 1.8rem; }}
@media (min-width: 1000px) { html { font-size: 10px; }}

html, body
{
	margin: 0;
	padding: 0;
}

html
{
	background: var(--background);
}

body
{
	background-image: url("../img/town-bg.png");
	background-size: 200rem;
	background-position: center ;
	background-repeat: no-repeat;
	min-height: 100vh;
	padding-top: 4rem;
	display: grid;
	align-items: start;
	justify-content: center;
	background-color: var(--background);
	color: var(--text);
	font-family: var(--sans-serif);
	font-weight: 500;
}

#container
{
	display: grid;
	justify-content: center;
	align-content: center;
	align-items: start;
	padding: 0;
	margin: 0 auto;
	position: relative;
	--background: var(--box);
	--text: var(--black);

	background-color: var(--background);
	color: var(--text);
	border-radius: 2rem;
	border: 0.25rem solid var(--white);
	background: linear-gradient(var(--brightblue) 0, var(--brightblue) 32rem, var(--offwhite) 32rem, var(--offwhite));

	padding-top: 56%;
}

#container::before
{

	position: absolute;
	top: -3rem;
	padding-top: 1rem;
	left: 0;
	background-image: url("../img/title-art.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	content: "";
	width: 100%;
	height: 55.6rem;
}

#tagline
{
	position: absolute;
	color: var(--brown);
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	width: 43rem;
	top: 45rem;
	left: 37rem;
}

#tagline a
{
	color: inherit;
	text-decoration: none;
}

#tagline a::after
{
	position: absolute;
	content: "";
	width: 95.8rem;
	height: 54rem;
	top: -45rem;
	left: -37rem;
}

.hidden
{
 position: absolute;
 visibility: hidden;
 pointer-events: none;
 z-index: -1;
}

section#demo
{
	padding: 2rem;
	background: var(--offwhite);
	margin-top: -2rem;
}

#demo .title
{
	text-align: center;
	margin: .25em 0 0 0;
}

a
{
	color: var(--brightblue);
}

a.steam
{
	display: inline-flex;
	gap: 0.125em;
}

a.steam::before
{
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: currentColor;
	position: relative;
	top: 0.125em;
	mask-image: url("../img/platform-logo-steam.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

#demo .details
{
	text-align: center;
	color: var(--lighterblue);
	margin: 0.5em 0 2em 0;
}

form
{
	display: flex;
	flex-flow: row wrap;
	gap: 0;
	align-items: center;
	margin: 0 auto;
}

form .control-group,
form .label,
form .control
{
	display: contents;
}

@media (min-width: 720px)
{
	form
	{
		max-width: 50ch;
	}
}

form .label
{
	flex: 0 0 auto;
	display: none;
}

label,
input,
button
{
	font: inherit;
}

input
{
	padding: .5em .25em .5em .75em;
	flex: 1 1 auto;
	border: .25rem solid var(--lightestblue);
	border-radius: 0.5em 0 0 0.5em;
}

button
{
	flex: 0 0 auto;
	font: inherit;
	padding: .5em .75em;
	background-color: var(--brown);
	border: .25rem solid var(--brown);
	color: var(--white);
	border-radius: 0 0.5em 0.5em 0;
	cursor: pointer;
}

#elistSignup
{
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: start;
	gap: 0.25em;
	padding: 0.25em 0;
}

#elistSignup .control
{
	order: 1;
}

#elistSignup .label
{
	order: 2;
	display: contents;
	color: var(--lighterblue);
	font-size: 0.85em;
}

#elistSignup input
{
	flex: 0 0 auto;
}

.success,
.error
{
	text-align: center;
	margin: 2em auto;
}

.success code
{
	display: block;
	margin: 1em auto;
}

#screenshots
{
  background: var(--lightestblue);
  padding: 3rem 2rem;
  margin: 0;
  border-radius: 0 0 1.75rem 1.75rem;
}

#screenshots ul
{
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1em;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

#screenshots ul li
{
  margin: 0;
  position: relative;
  width: 12em;
  height: calc(12em * .625);
}

#screenshots li a
{
  cursor: pointer;

}

#screenshots img
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.25em;
  -webkit-object-fit: cover;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  z-index: 100;

  box-shadow: var(--lighterblue) .25em .25em 0;
  transition: all .2s ease;
}

  #screenshots img:hover
  {
	transform: translateY(-.25em);
	box-shadow: var(--lighterblue) .5em .5em 0;
  }

#viewer
  {
	width: 100vw;
	height: 100vh;
	display: grid;
	place-content: center;
	background: rgba(0,0,0,0.75);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: 250ms opacity ease;
	z-index: 1000;
  }

  #viewer #image
  {
	display: block;
	width: 100vw;
	height: 62.5vw;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 100rem;
	max-height: 62.5rem;
	transform: scale(0);
	transition: 500ms transform ease;
	cursor: pointer;
	z-index: 10000;
  }

  #viewer
  {
	width: 100vw;
	height: 100vh;
	display: grid;
	place-content: center;
	background: rgba(0,0,0,0.75);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: 250ms opacity ease;
	z-index: 1000;
  }

  #viewer #image
  {
	display: block;
	width: 100vw;
	height: 62.5vw;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 128rem;
	max-height: 80rem;
	transform: scale(0);
	transition: 500ms transform ease;
	cursor: pointer;
	z-index: 10000
  }

  #zoomedImage
  {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
  }

  body.viewer
  {
	overflow: hidden;
	pointer-events: none;
  }

  body.viewer #viewer
  {
	opacity: 1;
	pointer-events: all;
  }

  body.viewer #viewer #image
  {
	transform: scale(1);
  }

  body.viewer #viewer #image
  {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
  }


.website input
{
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}