/*
	 _____                     
	|     |_ _ _ _ ___ ___ ___ 
	|  |  |_'_| | | . | -_|   |
	|_____|_._|_  |_  |___|_|_|
			  |___|___|        

	- name:
		Connexio Oxygen version 6.0

	- copyright:
		Copyright (c) 2017–2025 Business Fundamentals BV. All rights reserved.
		This software is proprietary and confidential. Unauthorised copying,
		distribution, or modification of this software is strictly prohibited.

	- code wizards:
		Daniël Rutten        daniel.rutten@businessfundamentals.nl
		Irin Sajan           irin.sajan@businessfundamentals.nl
		Davide Girotto       davide.girotto@businessfundamentals.nl
		Veena Chandamalla    veena.chandamalla@businessfundamentals.nl
*/

:root {
	--background-hue: 0;
	--background-saturation: 0%;
	--background-lightness: 90%;

	--background-color: hsl(var(--background-hue), var(--background-saturation), var(--background-lightness));
	--background-color-lighten: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 10%));
	--background-color-darken: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 5%));
	
	--text-hue: 0;
	--text-saturation: 0%;
	--text-lightness: 11%;
	
	--text-color: hsl(var(--text-hue), var(--text-saturation), var(--text-lightness));
	--text-color-lighten: hsl(var(--text-hue), var(--text-saturation), calc(var(--text-lightness) + 10%));
	--text-color-darken: hsl(var(--text-hue), var(--text-saturation), calc(var(--text-lightness) - 11%));
	
	--primary-hue: 206;
	--primary-saturation: 100%;
	--primary-lightness: 40%;
	
	--primary-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
	--primary-color-lighten: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 10%));
	--primary-color-darken: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 10%));
}

body {
	background-color: var(--text-color-light);
	color: var(--text-color-lighten);
	display: grid;
	font-family: 'Open Sans', 'Segoe UI', sans-serif;
	font-size: 14px;
	font-weight: 300;
	grid-template-rows: auto 1fr auto;
	line-height: 1.5em;
	min-height: 100vh;
	transition: background-color 500ms;
}

h1 {
	font-size: 64px;
	font-weight: 800;
	line-height: 1.3em;
}

h2 {
	font-size: 22px;
	line-height: 1.5em;
}

h3 {
	font-size: 18px;
}

svg path {
	fill: var(--text-color-darken);
}

p {
	hyphens: auto;
	overflow-wrap: break-word;
}

a {
	color: var(--primary-color) !important;
}

	a:hover {
		text-decoration: none !important;
	}

		a:hover i {
			transform: scale(1.25);
		}

.row {
	margin: 60px 0;
}

/*

	Dark mode

*/

html.darkmode body{
	background-color: var(--text-color);
	color: var(--background-color);
}

	html.darkmode svg path {
		fill: var(--background-color-lighten);
	}