@font-face {
	font-family: 'BebasNeueRegular';
	src: url('/BebasNeue-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat';
	src: url('/Montserrat-VariableFont_wght.ttf') format('truetype');
}
:root {
	--usc--font-family--logo: 'BebasNeueRegular';
	--usc--font-family--text: Calibri, Helvetica;
	--usc--font-size--tiny: 1.0rem;
	--usc--font-size--small: 1.2rem;
	--usc--font-size--medium: 1.4rem;
	--usc--font-size--large: 2rem;
	--usc--color--primary: #454b62; /* dark blueberry */
	--usc--color--background: #ffffff; /* white */
	--usc--color--secondary: #808080; /* medium grey */
	--usc--color--background-2: #d7d9e3; /* pale blueberry */
	--usc--color--focus: #6ab36a; /* truck green */
	--usc--color--active: #f1f1f1;
	--usc--color--error: #cc0000;
	--usc--color--odd: #fbfbfb;
	--usc--color--even: #f1f1f1;
	--usc--color--off-focus: #a0a0a0;
	--usc--spacing--10: 0.5rem;
	--usc--spacing--20: 1rem;
	--usc--spacing--30: 2rem;
	--usc--spacing--40: 4rem;
	--usc--spacing--50: 6rem;
	--usc--spacing--60: 8rem;
	--usc--spacing--70: 10rem;
	--usc--spacing--80: 12rem;
	--usc--zoom: 1;
}
html {
	font-size: 16px;
}
body {
	font-family: var(--usc--font-family--text);
	font-size: var(--usc--font-size--medium);
	margin: 0;
	min-width: 320px;
}
h1, h2, h3, h4 {
	margin: 0;
}



/* Form */
/* Input fields */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"] {
	border: 0;
	border-bottom: 2px solid var(--usc--color--primary);
	border-radius: 0;
	font-family: var(--usc--font-family--text);
	font-size: var(--usc--font-size--medium);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
	outline: none;
}
/* Buttons */
input[type="submit"],
input[type="button"],
button {
	border: 3px solid var(--usc--color--primary);
	border-radius: 9999px;
	background: var(--usc--color--primary);
	padding: var(--usc--spacing--10) var(--usc--spacing--30);
	color: var(--usc--color--background);
	font-size: var(--usc--font-size--medium);
}
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
button:focus-visible {
	outline: 3px solid var(--usc--color--focus);
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	border: 3px solid var(--usc--color--primary);
	background: var(--usc--color--background-2);
	color: var(--usc--color--primary);
	cursor: pointer;
}
input[type="submit"]:active,
input[type="button"]:active,
button:active {
	background: var(--usc--color--active);
}
/* Checkbox */
input[type="checkbox"] {
	margin: 0;
	width: 20px;
	height: 20px;
}
/* Label */
label {
	color: var(--usc--color--primary);
}
/* Errors */
label.error span {
	color: var(--usc--color--error);
	font-size: var(--usc--font-size--tiny);
}
input[type="text"].error,
input[type="password"].error,
input[type="email"].error,
input[type="tel"].error,
input[type="number"].error {
	border-bottom: 2px solid var(--usc--color--error);	
}
/* --- Form */





.fieldgroup {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	column-gap: var(--usc--spacing--40);
	row-gap: var(--usc--spacing--30);
	background: var(--usc--color--background);
	padding: var(--usc--spacing--20);
	label {
		color: var(--usc--color--off-focus);
		font-size: var(--usc--font-size--small);
	}
	button {
		vertical-align: top;
		margin-top: 2px;
		margin-left: 24px;
		padding: 2px 7px;
		font-size: var(--usc--font-size--tiny);
	}
	p {
		margin-top: var(--usc--spacing--20);
		margin-bottom: var(--usc--spacing--20);
		white-space: nowrap;
		border-bottom: 2px solid var(--usc--color--off-focus);
	}
}



/* Modal */
.modal {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0,0,0,0.5);
	z-index: 1000;

	display: flex;
	flex-flow: column;
	align-items: center;

	animation-name: fadeIn;
	animation-duration: 150ms;
	animation-timing-function: ease;
}
.modal > .modal-underlay {
	position: absolute;
	z-index: -1;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.modal > .modal-content {
	background: var(--usc--color--background);
}
/* --- Modal */