:root {
	--yellow: #ebc35f;
	--green: #3d543a;
}

body {
	background: var(--green);
	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%;
}
aside #sign {
	background: #1e291c;
	padding: 1em;
	border-radius: .5em;
}

header h1 {
	color: var(--yellow);
	text-align: center;
}
header h1 img {
	width: 464px;
	height: 204px;
}

h1, h2, button, a.button, h3, small {
	font-family: 'League Gothic', var(--font-sans-serif);
	text-transform: uppercase;
	letter-spacing: initial;
}
small {
	font-size: 1rem;
	color: var(--yellow);
}
button, button:hover, a.button {
	font-size: 1.5em;
	background: var(--yellow);
	border-radius: 0;
	color: #000;
	height: auto;
	padding: .5em 1em;
}
h3 {
	color: var(--yellow);
	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 }
aside h3 {
	text-align: left;
	margin-top: 1rem;
}
aside p { line-height: 1.5rem }
aside #lovetriangle {
	float: right;
	max-width: 50%;
}

div.field:not(.checkbox) { margin-bottom: .5em }
div.field:not(.checkbox) label {
	display: block;
	font-weight: bold;
}
div.field.checkbox label { display: inline }

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

.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]), progress { width: 100% }
input:not([type=checkbox]) {
	background: #cae0c6;
	border-color: #cae0c6;
	border-radius: 0;
}
input:invalid { border-color: #a00 }
input:placeholder-shown { border-color: #cae0c6 }

progress {
	-webkit-appearance: none;
	appearance: none;
	height: 1em;
	border-radius: 2em;
	background: #526e4e;
}
#numbers {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0;
}
#numbers span:last-child { text-align: right }

progress::-moz-progress-bar,
progress::-webkit-progress-value {
	background: var(--yellow);
}

.cf-turnstile { margin: .5em 0 }

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;
}

#signatures {
	--gap: 1rem;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9em;
}

#signatures ul {
	flex-shrink: 0;
	display: flex;
	justify-content: space-around;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 45s linear infinite;
}

#signatures ul > * {
	flex: 0 0 auto;
	text-align: center;
	list-style: none;
}

#signatures ul strong { color: #fff }

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

@media (prefers-reduced-motion: reduce) {
	#signatures ul {
		animation-play-state: paused !important;
	}
}

@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 }
	aside #lovetriangle { max-width: 30% }
}
@media screen and (max-width: calc(((100vw / 25) * 1.563 * 2) + 464px)) {
	header h1 img {
		width: 100%;
		height: auto;
	}
}