@import url('../assets/webfonts/DMSans/css2.css');
@import url('../assets/webfonts/FontsAwesome/all.min.css');

:root
{
	color-scheme: light dark;
	
	--base-fontsize: 1rem;
	--base-lightness: 5;
	--base-darkness: 5;
	--button-padding: 10px;
	--fa-width: 1.05em;
	--button-size: calc(var(--base-fontsize) + 24px);
	
	--font-weight-normal: 200;
	--font-weight-semi: 500;
	--font-weight-bold: 700;
	--font-weight-black: 900;
	
	--color-background0: light-dark( hsl(0deg 0% calc((95 - var(--base-lightness)) * 1%)) , hsl(0deg 0% calc((5 + var(--base-darkness)) * 1%)) );
	--color-background: light-dark( hsl(0deg 0% calc((10 + var(--base-lightness)) * 1%)) , hsl(0deg 0% calc((90 - var(--base-darkness)) * 1%)) );
	--color-main-background: light-dark( hsl(0deg 0% calc((100 - var(--base-lightness)) * 1%)) , hsl(0deg 0% calc((0 + var(--base-darkness)) * 1%)) );
	--color-overlay: light-dark( hsl(0deg 0% 0% / 2%) , hsl(0deg 0% 100% / 2%) );
	--color-overlay-1: light-dark( hsl(0deg 0% 0% / 8%) , hsl(0deg 0% 100% / 8%) );
	--color-lines: light-dark( hsl(0deg 0% calc((85 - var(--base-lightness)) * 1%)) , hsl(0deg 0% calc((15 + var(--base-darkness)) * 1%)) );
	--color-lines-active: light-dark( hsl(213deg 100% 23%) , hsl(204deg 99% 43%) );
	--color-text: light-dark( hsl(0deg 0% calc((0 + var(--base-lightness)) * 1%)) , hsl(0deg 0% calc((100 - var(--base-darkness)) * 1%)) );
	--color-link: var(--color-lines-active);
	--color-menu-background: light-dark( hsl(0deg 0% calc((90 - var(--base-lightness)) * 1%)) , hsl(0deg 0% calc((8 + var(--base-darkness)) * 1%)) );
	--color-menu-text: var(--color-text);
	
	--color-menu-button: light-dark( hsl(213deg 100% 23%) , hsl(200deg 100% 38%) );
	--color-menu-button-text: hsl(0deg 0% calc((95 - var(--base-lightness)) * 1%));
	
	--button-background: light-dark( hsl(0deg 0% calc((92 - var(--base-lightness)) * 1%)) , hsl(0deg 0% calc((8 + var(--base-darkness)) * 1%)) );
	--button-color: var(--color-text);
}
*
{
	box-sizing: border-box;
	font-family: 'DM Sans', sans-serif;
	margin: 0;
	padding: 0;
}
html, body
{
	scroll-behavior: smooth;
}
html, body, p, a, button
{
	font-weight: var(--font-weight-normal);
}
strong
{
	font-weight: var(--font-weight-bold);
}
a
{
	color: currentColor;
	text-decoration: none;
}
svg
{
	fill: currentColor;
	height: 1em;
	vertical-align: -12.5%;
}
button, a.button
{
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: calc(var(--fa-width) + (var(--button-padding) * 2));
	min-width: calc(var(--fa-width) + (var(--button-padding) * 2));
	line-height: 1;
	padding: var(--button-padding);
	position: relative;
	text-align: center;
	
	i.icon-main
	{
		scale: 90%;
		translate: -7.5% 7.5%;
		position: absolute;
	}
	i.icon-sub
	{
		scale: 45%;
		translate: 45% -45%;
		position: absolute;
	}
	&:not([disabled])
	{
		cursor: pointer;
	}
}
iframe
{
	border: none;
}
form
{
	display: flex;
	flex-flow: column nowrap;
	gap: 15px;
	
	label
	{
		display: block;
		
		span
		{
			display: block;
		}
	}
}
.fa-hourglass.loading
{
	animation: 0.67s infinite linear loading-rotate;
}
#db p
{
	font-size: var(--base-fontsize);
}
#footer
{
	display: flex;
	flex-flow: column nowrap;
	font-size: calc(var(--base-fontsize) * 1.15);
	gap: 0.8em;
	text-align: center;
	
	.links
	{
		text-align: center;
		
		.link.alpublicidade
		{
			font-size: calc((18.75 / 12) * var(--base-fontsize));
		}
		.link.andrelap
		{
			font-size: calc((9.375 / 12) * var(--base-fontsize));
		}
	}
}
.ellipsis
{
	display: block;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.custom-icon
{
	align-items: center;
	display: inline-flex;
	height: 1em;
	justify-content: center;
	width: 1em;
}
@media (max-width: 767px) or (orientation: portrait)
{
	#footer
	{
		.orientation-landscape
		{
			display: none !important;
		}
	}
}
@media (min-width: 768px) and (orientation: landscape)
{
	#footer
	{
		.orientation-portrait
		{
			display: none !important;
		}
	}
}
@keyframes loading-rotate
{
	100%
	{
		rotate: 360deg;
	}
}