html {
	box-sizing: border-box;
	font-size: var(--base-font-size);
	font-display: swap;
	scroll-behavior: smooth;
}

body {
	background: var(--background-color);
	font-family: var(--font-serif);
	color: var(--text-color);
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	overflow-x: hidden;
}

h1 {
	font: 600 1.4rem/1.4rem var(--font-serif);
	color: var(--color-darkest);
	letter-spacing: -1px;
	margin: 0 0 1.25rem 0;
}

	h1 a {
		text-decoration: none;
		color: var(--color-darkest);
	}

h2 {
	font: 400 1.2rem/1.2rem var(--font-serif);
	color: var(--color-darker);
	letter-spacing: normal;
	margin: 0 0 1rem 0;
}

	h2 a {
		text-decoration: none;
	}

	h2.big {
		font: 600 1.4rem/1.4rem var(--font-serif);
		color: var(--color-darkest);
		letter-spacing: -1px;
		margin: 0 0 1.25rem 0;
	}

h3 {
	font: 500 1.1rem/1.1rem var(--font-sans-serif);
	color: var(--color-darkest);
	letter-spacing: normal;
	margin: 0 0 1rem 0;
}

	h3 a {
		text-decoration: none;
		color: var(--color-darkest);
	}

		h3 a:hover {
			text-decoration: underline;
		}

	h3.big {
		font-size: 1.3rem;
		line-height: 1.3rem;
	}

	h3.bigger {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}

h4 {
	font: 600 1rem/1rem var(--font-sans-serif);
	color: var(--color-dark);
	letter-spacing: normal;
	margin: 0 0 .5rem 0;
}

	h4 a {
		text-decoration: none;
		color: var(--link-color);
	}

		h4 a:hover {
			text-decoration: underline;
		}

	h4.overview {
		display: inline-block;
		margin-right: 10px;
		margin-left: 10px;
	}

h5 {
	font: 700 1rem/1rem var(--font-serif);
	color: var(--color-dark);
	letter-spacing: normal;
	margin: 0 0 .5rem 0;
}

	h5 a {
		text-decoration: none;
		color: var(--link-color);
	}

		h5 a:hover {
			text-decoration: underline;
		}

table {
	padding: 0;
	margin: 0;
	border-spacing: 0;
}

	table th,
	table td {
		white-space: nowrap;
		font-size: var(--base-font-size);
		line-height: 1rem;
	}

	table thead {
		background: var(--color-lighter);
	}

	table img {
		width: 100%;
		display: block;
	}

	table a {
		text-decoration: none;
	}

span.text-label {
	font-size: .75rem;
	line-height: .75rem;
	vertical-align: middle;
}

p {
	margin: 0 0 1rem 0;
	font: var(--text-font);
}

ul, ol {
	margin: 0 0 1rem 0.75rem;
	padding-left: 0.75rem;
}

li {
	font: var(--text-font);
}

ul.tags {
	list-style: none;
	display: flex;
	align-items: center;
}

	ul.tags li {
		display: flex;
		align-items: center;
		margin: 0 5px 0 0;
	}

		ul.tags li a {
			padding: 10px;
			border-radius: 8px;
			background: var(--border-ligh-color);
			color: var(--text-color);
			text-decoration: none;
		}

ul.no-bullets {
	list-style: none;
}

ul.no-margins {
	margin: 0;
	padding: 0;
}

ul.halves {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

ul.thirds {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

ul.quarters {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

a {
	color: var(--link-color);
	transition: all 0.2s;
	text-decoration: none;
}

	a:hover {
		opacity: .9;
	}

img {
	max-width: 100%;
	border: none;
	display: block;
	height: auto;
}

img, table, td, th {
	border: none;
}

label, a {
	cursor: pointer;
}

map, area {
	cursor: pointer;
}

svg {
	fill: currentColor;
	width: 100%;
	height: 100%;
	display: inline-block;
}

hr {
	height: 1px;
	background: var(--border-color);
	border: none;
	clear: both;
	margin: 15px 0;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='submit'],
input[type='checkbox'],
button,
select,
textarea,
.button {
	margin: 0;
	display: inline-block;
	box-sizing: border-box;
	border: none;
	font: var(--input-font);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='search'],
input[type='tel'],
input[type='number'],
input[type='checkbox'],
select,
textarea {
	padding: 8px;
	border: 1px solid var(--border-color);
	color: var(--text-color);
	border-radius: 15px;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'],
input[type='password'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
select {
	min-width: 125px;
}

select {
	padding-top: 6px;
}

input[type='checkbox'] {
	cursor: pointer;
}

input::placeholder {
	color: var(--color-gray);
}

textarea {
	line-height: 1.2rem;
}

.close {
	background: var(--modal-close-background-color);
	color: var(--modal-close-color) !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
	align-content: space-around !important;
	text-decoration: none !important;
	border-radius: 50% !important;
	position: absolute !important;
	z-index: 2 !important;
	cursor: pointer !important;
}

	.close::before {
		content: "\f00d";
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		font: 500 1.2rem/1.2rem var(--font-icon) !important;
	}

.square {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.circle {
	position: relative;
	border-radius: 50%;
	aspect-ratio: 1/1;
}

	.circle:before {
		border-radius: 50%;
		width: 100%;
		padding-bottom: 100%;
		content: "";
		background: white;
		display: block;
	}

	.circle .circle-content {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		vertical-align: middle;
		white-space: normal;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.circle img {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		border-radius: 50%;
		z-index: 1;
		aspect-ratio: 1/1;
	}

iframe {
	max-width: 100%;
	border: none;
	padding: 0;
	margin: 0;
}

.label {
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--color-light-border);
	color: var(--sub-text-color);
	display: inline-flex;
	align-items: center;
}

	.label.success {
		background: var(--color-success-light);
		color: var(--color-success);
	}

	.label.error {
		background: var(--color-error-light);
		color: var(--color-error);
	}

	.label.info {
		background: var(--color-info);
		color: var(--color-info-reverse);
	}

	.label.warning {
		background: var(--color-warning-light);
		color: var(--sub-text-color);
	}

	.label i {
		margin-right: 5px;
	}

@media screen and (max-width: 834px) {
	input[type='text'],
	input[type='email'],
	input[type='tel'],
	input[type='password'],
	input[type='search'],
	input[type='date'],
	select {
		min-width: 100px;
	}

	select {
		padding: 8px;
	}
}

@media (max-device-width: 667px) {

	ul.halves,
	ul.thirds,
	ul.quarters {
		display: block;
	}

	img {
		max-width: 100%;
	}
}