@charset "UTF-8";

body {
	margin: unset;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	overflow: clip;
	background-color: var(--background-color, var(--tg-theme-bg-color));
}

main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
	transition: 0s;
}

div#language {
	--filter-width: 2.3rem;
	--filter-height-element: calc(var(--filter-width) - var(--filter-width) / 10);
	--filter-height-close: var(--filter-height-element);
	--filter-button-width: 0rem;
	--filter-row-padding-x: 0rem;
	--filter-row-gap: 0px;
	position: absolute;
	top: 20px;
	left: 20px;
	border: 2px solid var(--section-background-color-inverted);
	filter: brightness(0.2);

	&:hover {
		filter: unset;
	}

	>section>label {
		text-align: center;
	}
}

div#currency {
	--filter-width: 2.3rem;
	--filter-height-element: calc(var(--filter-width) - var(--filter-width) / 10);
	--filter-height-close: var(--filter-height-element);
	--filter-button-width: 0rem;
	--filter-row-padding-x: 0rem;
	--filter-row-gap: 0px;
	position: absolute;
	top: 20px;
	right: 20px;
	border: 2px solid var(--section-background-color-inverted);
	filter: brightness(0.2);

	&:hover {
		filter: unset;
	}

	>section>label {
		text-align: center;
	}
