:root {
	--white: #fff;
	--white-hover: #EFEFEF;
	--white-active: #ccc;
	
	--black: #231C18; /* hsl(22,19,12,100) */
	--black-hover-active: #000;
	
	--red: #FF5A57; /* hsl(1,100,67,100) */
	--red-hover: #FF3A37;
	--red-active: #CF0400;

	--cream: #FCF6EB; /* hsl(39,74,95,100) */
	--cream-hover: #ECE2D1;
	--cream-active: #C6B9A3;
}

.nowrap {
	white-space: nowrap;
}

.bounce-top {
	-webkit-animation: bounce-top 0.9s both;
					animation: bounce-top 0.9s both;
}

table#events {
	text-align: left;
}

table#events .past {
	color: rgba(0,0,0,0.3);
}

/* ----------------------------------------------
 * Generated by Animista on 2024-7-17 13:34:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
	0% {
		-webkit-transform: translateY(-45px);
						transform: translateY(-45px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
		opacity: 1;
	}
	24% {
		opacity: 1;
	}
	40% {
		-webkit-transform: translateY(-24px);
						transform: translateY(-24px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
	}
	65% {
		-webkit-transform: translateY(-12px);
						transform: translateY(-12px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
	}
	82% {
		-webkit-transform: translateY(-6px);
						transform: translateY(-6px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
	}
	93% {
		-webkit-transform: translateY(-4px);
						transform: translateY(-4px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
	}
	25%,
	55%,
	75%,
	87% {
		-webkit-transform: translateY(0px);
						transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: translateY(0px);
						transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
		opacity: 1;
	}
}
@keyframes bounce-top {
	0% {
		-webkit-transform: translateY(-45px);
						transform: translateY(-45px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
		opacity: 1;
	}
	24% {
		opacity: 1;
	}
	40% {
		-webkit-transform: translateY(-24px);
						transform: translateY(-24px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
	}
	65% {
		-webkit-transform: translateY(-12px);
						transform: translateY(-12px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
	}
	82% {
		-webkit-transform: translateY(-6px);
						transform: translateY(-6px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
	}
	93% {
		-webkit-transform: translateY(-4px);
						transform: translateY(-4px);
		-webkit-animation-timing-function: ease-in;
						animation-timing-function: ease-in;
	}
	25%,
	55%,
	75%,
	87% {
		-webkit-transform: translateY(0px);
						transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
	}
	100% {
		-webkit-transform: translateY(0px);
						transform: translateY(0px);
		-webkit-animation-timing-function: ease-out;
						animation-timing-function: ease-out;
		opacity: 1;
	}
}


/* Shine */
.shine figure {
	position: relative;
}
.shine figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	opacity: 0;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.shine figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	0% {
		opacity: 0;
	}
	1% {
		opacity: 100%;
	}
	75% {
		opacity: 100%;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}
@keyframes shine {
	0% {
		opacity: 0;
	}
	1% {
		opacity: 100%;
	}
	75% {
		opacity: 100%;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

html {
	color: var(--black);
	font-size: 1.25em; /* 20px */
	line-height: 1.125;
}

html, body {
	background-color: var(--cream);
}

h1 { font-size: 64px }
h2 { font-size: 44px }
h3, .button, legend { font-size: 28px }
h4 { font-size: 22px }
h5, dt { font-size: 18px }

h1, h2, h3, h4, h5 {
	text-transform: uppercase;
}

/* .blur-black {
	text-shadow: 0 0 1.5px var(--black);
}
.blur-white {
	text-shadow: 0 0 1.5px var(--white);
}
.blur-cream {
	text-shadow: 0 0 1.5px var(--cream);
} */

.subtitle { font-size: 44px }
.body-regular { font-size: 28px }
.body-medium { font-size: 22px }
.body-small { font-size: 18px }

.subtitle, .body-regular, .body-medium, .body-small {
	line-height: 118.7%
}

ol {
	margin: 0;
}

@font-face {
	font-family: 'comics';
	src: url('../fonts/comicsdeluxe-webfont.woff2') format('woff2'),
		 url('../fonts/comicsdeluxe-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'feijoada';
	src: url('../fonts/feijoada-webfont.woff2') format('woff2'),
		 url('../fonts/feijoada-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

.container {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8em;
	padding-bottom: 8em;
}

/* .container > div:not(last-child) {
	margin-bottom: 8em;
} */

.readable, #faq > div {
	max-width: 700px;
	margin: 0 auto;
}

a { text-decoration: underline; color: var(--black); }

.button {
	text-decoration: none;
	text-transform: uppercase;
	background-color: var(--red);
	color: var(--white);
	height: 2.5em;
	line-height: 2.5em;
	display: inline-block !important;
	padding: 0 1em;
	border: 0 none;
	outline: 0;
	cursor: pointer;
}

.button:hover { background-color: var(--red-hover) }
.button:active { background-color: var(--red-active) }

button {
	font-family: feijoada;
}

#what-is-it {
	text-align: center;
}

input[type=email] {
	font-family: feijoada;
	height: 2.5em;
	border: 0 none;
	border-radius: 0;
	outline: 0 none;
	padding: 0 1em;
	line-height: 2.5em;
	margin: 0;
	width: calc(100% - 2em);
}

.ml-form-formContent {
	flex-grow: 10;
}

form#newsletter {
	width: auto;
	margin: 0 auto;
}

fieldset, .ml-block-form {
	display: flex;
	flex-direction: row;
	margin-top: 1em;
}

body {
	font-family: 'feijoada';
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, p {
	margin: 0;
}

h1, h2, h3, a.button, dt {
	font-family: 'comics'
}

img#logo {
	display: block;
	height: auto; 
	width: auto; 
	max-width: 372px; 
	max-height: 377.8px;
	margin: 6em auto 0 auto;
}

#next, #discord, #merch {
	text-align: center;
}

#next, #how-it-works, #what-is-it, #discord, #merch {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

#flipdown { margin: 0 auto }

footer {
	display: flex;
	flex-direction: row;
	background-color: var(--black);
}

footer > div {
	flex-basis: 0;
	flex-grow: 1;
	padding: 3em;
}

footer, footer a {
	color: var(--cream);
	clear: both;
	width: 100%;
}

footer h4 {
	color: var(--white);
}

footer ul {
	padding: 0 0 0 0.5em;
	margin: 0 0 0 0.5em;
}

.footer a:hover { background-color: var(--white-hover) }
.footer a:active { background-color: var(--white-active) }


#basic-details {
	display: flex;
	flex-direction: row;
	max-width: 798px;
	margin: 0 auto;
}

#basic-details > div {
	display: flex;
	flex-direction: column;
	flex-basis: 0;
	flex-grow: 1;
	padding: 2em;
	gap: 0.5em;
}

#why {
	background-color: var(--black);
	color: var(--white);
}

#where {
	background-color: var(--white);
	color: var(--black);
}

#when {
	background-color: var(--red);
	color: var(--white);
}

#faq {
	padding: 8em 0;
	background-image: url("../img/photo.jpg");
	background-position: center center;
	background-size: cover;
	color: var(--cream);
	width: 100%;
}

#faq a {
	color: var(--white)
}

#faq a:hover { color: var(--white-hover) }
#faq a:active { color: var(--white-active) }

#faq, #faq button {
	text-align: left;
}

#faq button {
	color: var(--cream);
	padding: 1em 0;
	border-top: 1px solid var(--cream);
}

#faq button:hover { color: var(--cream-hover); text-decoration: underline }
#faq button:active { color: var(--cream-active) }

#faq h2 {
	margin-bottom: 1em;
}

#faq h4 {
	color: var(--white);
}

#faq h4 button:hover {
	color: var()
}

#faq section {
	padding: 0 0 1em 0;
	margin: 0;
}

#email {
	width: 100%;
}

@media only screen and (max-width: 767px) {
	html {
		font-size: 1.25em; /* 20px */
		line-height: 1.125;
	}
	#faq {
		padding: 4em 1em;
		width: 100%;
	}
	footer {
		flex-direction: column;
		padding: 1em;
		gap: 1em;
		width: auto;
	}
	footer > div {
		flex-basis: 0;
		flex-grow: 1;
		padding: 0;
	}
	.button {
		height: 2.75em;
		line-height: 2.75em;
		padding: 0 1em;
	}
	button.button {
		width: 100%;
	}
	input[type=email] {
		height: 2.75em;
		padding: 0 1em;
		line-height: 2.75em;
	}
	img#logo {
		max-width: 310px; 
		max-height: 315px;
		margin: 4em auto 0 auto;
	}
	fieldset, .ml-block-form {
		flex-direction: column;
	}
	.container {
		padding: 0 1em 4em 1em;
		margin: 0 auto;
		gap: 4em;
	}

	#basic-details {
		flex-direction: column;
	}
	#basic-details > div {
		padding: 1em;
		gap: 0;
	}
	/* #flipdown > .rotor-group:last-of-type {
		display: none;
		visibility: hidden
	}
	.flipdown {
		overflow: hidden;
	} */
	/* .container > div:not(last-child) {
		margin-bottom: 3em;
	} */
	h1 { font-size: 58px }
	h2 { font-size: 32px }
	h3, .button, legend { font-size: 24px }
	h4 { font-size: 20px }
	h5, dt { font-size: 18px }
	.subtitle { font-size: 40px }
	.body-regular { font-size: 22px }
	.body-medium { font-size: 22px }
	.body-small { font-size: 18px }

}