:root {
	--kit-green: rgb(0, 150, 130);
	--kit-green2: rgb(191, 228, 223);
	--kit-blue: rgb(35, 161, 224);
	--kit-red: rgba(162, 34, 35);

	/* general */
	--text-color: light-dark(black, white);

	/* components */
	--container-min-size: 96%;
	--container-border: 2px solid black;
	--container-rounding: 1em;

	--button-padding: 0.5rem;
	--button-gap: 1.5ch;

	/* topbar */
	--topbar-text-color: white;
	--topbar-background: var(--kit-green);
	--topbar-height: 3em;
	--topbar-element-padding: 0 1rem;

	--navigation-border: 1px solid white;
	--navigation-mobile-height: 3rem;
	--navigation-hover-background: var(--kit-green2);
	--navigation-hover-text-color: var(--kit-green);
}


.blue {
	--component-background: var(--kit-blue);
	--component-text-color: white;
}

.green {
	--component-background: var(--kit-green);
	--component-text-color: white;
}