@font-face {
	font-family: 'BaselGrotesk';
	font-weight: 430;
	src: url("/landing/fonts/BaselGrotesk-Regular.otf") format("opentype");
}

@font-face {
	font-family: 'BaselGrotesk';
	font-style: italic;
	font-weight: 430;
	src: url("/landing/fonts/BaselGrotesk-Italic.otf") format("opentype");
}

@font-face {
	font-family: 'Ryhmes';
	font-weight: 400;
	src: url("/landing/fonts/RyhmesText-Regular.otf") format("opentype");
}

@font-face {
	font-family: 'Ryhmes';
	font-weight: 400;
	font-style: italic;
	src: url("/landing/fonts/RyhmesText-Italic.otf") format("opentype");
}

@font-face {
	font-family: 'Ryhmes';
	font-weight: 700;
	src: url("/landing/fonts/RyhmesDisplay-Bold.otf") format("opentype");
}

body {
	color: black;
	background-color: var(--color-beige);
}

body.loading form {
	opacity: 0.7;
}

#landing {
	display: flex;
	flex-direction: column;
	min-height: 100svh;

	& > div:first-child {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		gap: var(--spacing-xxxl);
		padding: var(--spacing-xl);
		text-align: center;
		background-color: var(--color-orange);

		& > svg {
			height: 4rem;
		}

		& > div {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding-top: var(--spacing-l);
			border-top: solid 1px black;

			& > div {
				display: flex;
				gap: var(--spacing-l);

				& svg {
					height: 2.4rem;
				}
			}
		}
	}

	& > div:last-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		& form {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--spacing-xxl);
			width: 100%;
			padding: var(--spacing-xl);
			
			& > div {
				display: flex;
				flex-direction: column;
				gap: var(--spacing-xl);
				width: 100%;
	
				& > div {
					display: flex;
					flex-direction: column;
					gap: var(--spacing-xl);
				}

				& > #messages {
					display: none;
					gap: var(--spacing-m);
				}
			}
	
			& > button {
				display: flex;
				align-items: center;
				gap: var(--spacing-s);
				text-align: left;
				font-size: 1.6rem;
				line-height: 2.4rem;
				padding: var(--spacing-m) 1.2rem var(--spacing-m) var(--spacing-l);
				border: solid 1px black;
				border-radius: var(--spacing-s);
				transition: color .3s ease, background-color .3s ease;

				& span {
					transition: color .3s ease;
				}

				& svg {
					height: 2.4rem;
					transition: color .3s ease;
				}
	
				&:hover {
					background-color: black;
					color: white;

					& span,
					& svg {
						color: white;
					}
				}
			}
	
			& label {
				display: flex;
				flex-direction: column;
	
				& input {
					font-size: 1.8rem;
					line-height: 2.8rem;
					font-weight: 400;
					border-bottom: solid 1px black;
					padding: var(--spacing-m) 0;
				}
			}

			&.hide {

				& > div > div:not(#messages),
				button {
					display: none;
				}
			}
		}
	}
}

body.has-messages #messages {
	display: flex !important;
}

/* .message { padding: 1rem; border-radius: 6px; } */
/* .success { background: #dff0d8; color: #3c763d; } */
/* .error { background: #f2dede; color: #a94442; } */

@media screen and (min-width: 1024px) {

	#landing {
		flex-direction: row;

		& > div {
			width: 100%;

			&:last-child form {
				max-width: var(--spacing-col-4);
			}
		}
	}
}