:root {
	--blue: #004;
	--space: #001;
	--font-space: 'Space Grotesk', var(--font-sans-serif);
}

body {
	background: var(--space);
	color: #fff;
}

a {
	color: #eee;
	text-decoration: underline;
}

main { display: flex }
section {
	flex-grow: 2;
	width: 60%;
	margin-right: 1em;
}
aside {
	flex-grow: 1;
	width: 40%;
}
#signup {
	background: var(--blue);
	padding: 1em;
	border-radius: .5em;
}
aside #signup .button {
	display: block;
	text-align: center;
	margin-bottom: 0.5rem;
}
section#signup h2 { margin-top: 0 }
section[data-patches-target="checkout"] { width: 100% }

header h1 {
	color: #fff;
	text-align: center;
}
header h1 img {
	width: 464px;
	height: 204px;
}

h1, h2, button, a.button, h3, small, input[type=file]::file-selector-button {
	font-family: var(--font-space);
	font-weight: normal;
	letter-spacing: initial;
}
small {
	font-size: 1rem;
	color: #fff;
}
button, button:hover, a.button, input[type=file]::file-selector-button {
	font-size: 1.5em;
	background: #fff;
	border-radius: 0;
	color: #000;
	height: auto;
	padding: .5em 1em;
}
h3 {
	color: #fff;
	font-size: 1.8rem;
	margin-top: 0;
	text-align: center;
}
#jump {
	text-align: center;
	margin-bottom: .5em;
	display: none;
}
a.button { display: inline-block }
a.button, a.button:hover { text-decoration: none }

#video {
	width: 100%;
	aspect-ratio: 16 / 9;
    height: auto;
}

aside h2 {
	margin: 0;
	color: #fff;
}
aside h3 {
	text-align: left;
	margin-top: 1rem;
}
aside p { line-height: 1.5rem }

nav#backer_switch {
	text-align: center;
	line-height: 1.5;
	margin-bottom: .5rem;
}
nav#backer_switch a.active { font-weight: bold }

div.field:not(.checkbox) { margin-bottom: .5em }
div.field:not(.checkbox) label {
	display: block;
	font-weight: bold;
}
div.field.checkbox label {
	display: inline;
	margin-right: .5em;
}
div.field label, div.field label em { font-family: var(--font-space) }
div.field label em.optional {
	font-size: 0.9rem;
	font-weight: normal;
	color: #eee;
}
label.hidden { display: none }
#tooLong { display: none }
.hint { text-decoration: underline dashed }
.hint:hover { cursor: help }

.alert {
	background: #e8b9b9;
	border: 1px solid #a00;
	color: #a00;
	padding: .5em 1em;
	border-radius: .5em;
	line-height: 1.5;
}

.lead {
	font-size: 1.2em;
	margin-bottom: 0;
}

#thankyou {
	background: #d1f0d1;
	border: 1px solid #0a0;
	color: #0a0;
	border-radius: .5em;
	padding: .5em 1em;
}
#thankyou p:last-child { margin-bottom: 0 }

input:not([type=checkbox], [type=radio]), progress, textarea, select { width: 100% }
input:not([type=checkbox], [type=radio], [type=file]), textarea, select {
	background: #c6c6e0;
	border-color: #c6c6e0;
	border-radius: 0;
}
input:invalid, textarea:invalid, select:invalid { border-color: #a00 }
input:placeholder-shown, textarea:placeholder-shown {
	border-color: #c6c6e0;
	font-style: italic;
}
input:focus, textarea:focus, select:focus { border-color: #fff }
select { appearance: menulist-button }
.help {
	margin: .5em 0;
	font-size: .8em;
	line-height: 1.2;
}

progress { background: #8b8baa }
progress::-moz-progress-bar,
progress::-webkit-progress-value {
	background: #fff;
}

.cf-turnstile { margin-bottom: .5em }
#turnstileField noscript {
	display: block;
	margin-bottom: 1rem;
}

body > footer {
	margin: 2em 0;
	font-size: 0.7em;
	text-align: center;
}

p, blockquote { margin-bottom: 1rem }

blockquote > p { margin-bottom: .5rem }
blockquote > footer {
	margin-left: 1.5rem;
	font-size: 0.8em;
	font-style: italic;
}

#frameError:empty { display: none }

#turnstileRetry {
	display: none;
	font-size: 0.8rem;
	line-height: 1.2;
	margin: 0.5rem auto 1rem;
}

#kickstarter {
	width: 100%;
	min-height: 420px;
}

#counter #figures {
	text-align: center;
}
#counter #figures #entered {
	font-size: 5em;
	line-height: 1;
	font-weight: 600;
	font-family: var(--font-space);
}
#counter #figures #slash { color: #ccc }
#counter #figures #maximum {
	transition: color 0.5s;
	transition-timing-function: ease-out;
	font-weight: 500;
	font-family: var(--font-space);
}

input[type=file] {
	border: 1px solid #fff;
	padding: .5em;
	font-size: 1em;
}
input[type=file]::file-selector-button {
	border: none;
	cursor: pointer;
	padding: .3em .7em;
	font-size: inherit;
}

ul#uploads { padding-left: 0 }
ul#uploads li {
	list-style-type: none;
	margin-top: -1px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
ul#uploads li turbo-frame.name {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
ul#uploads li small.email {
	display: block;
	font-size: 0.8rem;
	line-height: 1;
	margin-bottom: .25rem;
}
ul#uploads li a.email_edit {
	font-size: 0.8rem;
}
ul#uploads li form.email_edit_form {
	font-size: 0.8rem;
	width: 100%;
}
ul#uploads li form.email_edit_form .inline_field { display: flex }
ul#uploads li form.email_edit_form input {
	padding: .25rem .5rem;
	font-size: 0.9rem;
}
ul#uploads li form.email_edit_form button {
	font-size: 0.8rem;
	margin-left: .25rem;
}

.names_public {
	margin-top: .5rem;
	line-height: 1.5;
}
.names_public form {
	display: inline;
}
.names_public form button {
	display: inline;
	font-size: 1em;
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}

@media screen and (min-width: 1140px) {
	body { margin: 0 }
}
@media screen and (max-width: 768px) {
	body { margin: calc((100vh / 25) * 1.563) calc((100vw / 25) * 1.563) }
	main { flex-direction: column; }
	section, aside {
		width: 100%;
		flex-grow: 0;
	}
	section { margin-right: 0 }
	.actions { text-align: center }
	#jump { display: block }
}
@media screen and (max-width: calc(((100vw / 25) * 1.563 * 2) + 464px)) {
	header h1 img {
		width: 100%;
		height: auto;
	}
}