$max-container-width: 1600px;

:root {
	--max-container-width: #{$max-container-width};

	--color-background: hsl(210, 100%, 90%);
	--color-text: hsl(210, 100%, 15%);
	--color-highlight: hsl(210, 80%, 40%);
	--color-highlight-weak: hsl(210, 80%, 80%);
	--color-accent: hsl(150, 50%, 50%);

	--color-card-background: hsl(210, 100%, 95%);
	--color-card-text: var(--color-text);

	--color-button-background: var(--color-highlight);
	--color-button-text: white;
	--color-button-hover-background: var(--color-highlight-weak);
	--color-button-hover-text: var(--color-text);

	--color-link: hsl(210, 100%, 50%);
	--color-link-visited: hsl(270, 50%, 50%);

	--transition-duration: 0.4s;
}

body {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: sans-serif;
}