body {
	margin: 0;
	font-family: 'Inter var', sans-serif;
	min-height: 100vh;

	color: #0e0e0e;
	background-color: #fdfdfd;
	background-size: 40px 40px;
	background-image: radial-gradient(circle, #d6d2d2 1px, rgba(0, 0, 0, 0) 1px);
}

body.dark {
	color: #e7e7e7;
	background-color: #0e0e0e;
	background-image: radial-gradient(circle, #2c2a2a 1px, rgba(0, 0, 0, 0) 1px);
}

main {
	max-width: 1536px;
	margin: 0 auto 0 auto;
	padding: 2rem 0 2rem 0;
}

/* Responsive main */

@media screen and (max-width: 640px) {
	main {
		width: 95%;
	}
}

@media screen and (min-width: 640px) and (max-width: 767px) {
	main {
		width: 640px;
	}
}

@media screen and (min-width: 767px) and (max-width: 1023px) {
	main {
		width: 768px;
	}
}

@media screen and (min-width: 1023px) and (max-width: 1279px) {
	main {
		width: 1024px;
	}
}

@media screen and (min-width: 1279px) and (max-width: 1535px) {
	main {
		width: 1280px;
	}
}

/* Toolbar */

.toolbar {
	width: 100%;
	display: flex;
}

.toolbar > * {
	margin-right: 0.75rem;
	flex-shrink: 0;
	flex-grow: 1;
}

.toolbar > *:last-child {
	margin-right: 0;
}

/* Buttons */

.toolbar > button,
.toolbar > .radio {
	background: #f8f8f9;
	opacity: 0.8;
	color: inherit;

	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;

	padding: 0.25rem 1rem;
	border: 1px solid #e1dce1;
	border-radius: 6px;

	min-width: 10rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	transition: all 0.1s ease-in-out;
}

.dark .toolbar > button,
.dark .toolbar > .radio {
	background: #0e0e0e;
	border-color: #444344;
}

.toolbar > button:hover,
.toolbar > .radio:hover {
	opacity: 1;
	border-color: #e45e94;
}

.dark .toolbar > button:hover,
.dark .toolbar > .radio:hover {
	border-color: #8a5e88;
}

.toolbar > button > *,
.toolbar > .radio > button > * {
	margin-right: 0.5rem;
}

.toolbar > button > *:last-child,
.toolbar > .radio > button > *:last-child {
	margin-right: 0;
}

/* Dropdown */

.dropdown-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	margin: 0;
}

.dropdown-list > button {
	margin-top: 0.25rem;
	padding: 0.5rem 0.75rem;

	width: 100%;
	background: none;
	border: 0;
	text-align: left;

	font-family: inherit;
	font-size: 0.9rem;
	color: inherit;
}

.dropdown-list > button:first-child {
	margin-top: 0;
}

.dropdown-list > button > * {
	margin-right: 0.5rem;
}

.dropdown-list > button > *:last-child {
	margin-right: 0;
}

.dropdown-list > button iconify-icon {
	font-size: 1.25rem;
}

/* Radio */

.radio {
	position: relative;
	padding: 0;
}

.radio > button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 100%;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.radio.open {
	opacity: 1;
}

.radio .dropdown {
	position: absolute;
	top: calc(100% + 1rem);
	left: 0;
	right: 0;
	display: none;
	z-index: 1;

	background: #f8f8f9;
	border: 1px solid #e1dce1;
	border-radius: 6px;

	overflow: hidden;
}

.dark .radio .dropdown {
	background: #0e0e0e;
	border-color: #444344;
}

.radio.open .dropdown {
	display: block;
}

.radio .arrow-down {
	opacity: 0.5;
}

.radio-btn {
	display: inline-flex;
	align-items: center;
	font-size: 0.95rem;
	cursor: pointer;
}

.radio-btn:nth-child(odd) {
	background: #ffffff;
}

.dark .radio-btn:nth-child(odd) {
	background: #121212;
}

/* Radio languages */

.radio-languages {
	max-height: 24rem;
	overflow-y: auto;
}

/* Checkbox */

.checkbox {
	font-size: 1.4rem;
	opacity: 0.5;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	transition: opacity 0.2s ease-in-out;
}

.checkbox-btn:hover .checkbox {
	opacity: 0.75;
}

.tick-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 1.5rem;
	transform: translate(-50%, -50%);
	color: #e45e94;

	filter: drop-shadow(-1px -1px 0px #fdfdfd) drop-shadow(1px -1px 0px #fdfdfd)
		drop-shadow(1px 1px 0px #fdfdfd) drop-shadow(-1px 1px 0px #fdfdfd);
}

.dark .tick-icon {
	color: #e8a1c0;

	filter: drop-shadow(-1px -1px 0px #0e0e0e) drop-shadow(1px -1px 0px #0e0e0e)
		drop-shadow(1px 1px 0px #0e0e0e) drop-shadow(-1px 1px 0px #0e0e0e);
}

/* Footer */

.footer {
	margin: 0 auto;
	margin-top: 1rem;
	width: fit-content;
}

.footer > a {
	font-size: 2.5rem;
	color: #382b31;
	opacity: 0.25;
	transition: opacity 0.2s ease-in-out;
}

.dark .footer > a {
	color: #eee2e7;
}

.footer > a:hover {
	opacity: 1;
}
