:root {
	--color: #0084ff;
	--color-lighter: color-mix(in srgb, var(--color), white 75%);
	--color-light: color-mix(in srgb, var(--color), white);
	--color-darker: color-mix(in srgb, var(--color), black 25%);
	--color-dark: color-mix(in srgb, var(--color), black);
	--color-gradient: var(--color-lighter) 6%, var(--color-light) 49%,
		var(--color-dark) 100%;
	--color-gradient-inverse: var(--color-dark) 6%, var(--color-light) 49%,
		var(--color-lighter) 100%;
	--border-radius: 0.625em;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color: #0084ff;
		--color-lighter: color-mix(in srgb, var(--color), black 75%);
		--color-light: color-mix(in srgb, var(--color), black);
		--color-darker: color-mix(in srgb, var(--color), white 25%);
		--color-dark: color-mix(in srgb, var(--color), white);
		--color-gradient: var(--color-lighter) 6%, var(--color-light) 49%,
			var(--color-dark) 100%;
		--color-gradient-inverse: var(--color-dark) 6%, var(--color-light) 49%,
			var(--color-lighter) 100%;
	}
}

body {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, auto);
	grid-template-areas:
		'header'
		'main';
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 1em;
}

.header {
	width: 100%;
	height: 100dvh;
	grid-area: header;
}

.main {
	width: 100%;
	grid-area: main;
}

.icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.contentInfoWelcome {
	width: 100%;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;

	@media screen and (min-width: 768px) {
		flex-direction: row;
	}
}

.contentTechnologyTools {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
}