/* Code for the Color themes (Only available if CSS-Variables are supported by the Browser) */

@supports (--background: #F0ECD1){
	:root {
		--resizable-font-size: 100%;

		--background: #F0ECD1;
		--text-dark: black;
		--text-light: #AB393F;
		--text-link: black;
	}
	.resizable-font{
		font-size: var(--resizable-font-size);
	}
	html {
		background-color: var(--background);
	}

	body {
		border-color: var(--text-light);
	}
	header {
		background-color: var(--background);
	}
	main {
		background-color: var(--background);
		color: var(--text-dark);
	}
	footer {
		background-color: var(--background);
		color: var(--text-dark);
	}
	footer a {
		color: var(--text-dark);
	}
	footer a:hover {
		color: var(--text-light);
	}

	#banner {
		color: var(--text-light);
		background-color: var(--background);
		border-color: var(--text-light);
	}
	nav a {
		color: var(--text-light);
		background-color: var(--background);
	}
	#navigation {
		background-color: var(--background);
	}

	nav a:hover, nav a:focus {
		background-color: var(--text-light);
		color: var(--background);
	}
	label {
		color: var(--text-light);
	}

	select {
		color: var(--text-light);
		background-color: var(--background);
		border-color: var(--text-light);
	}

	select:hover {
		color: var(--background);
		background-color: var(--text-light);
	}

	.panel {
		border-color: var(--text-light);
	}

	#dropdown-menu-trigger {
		border-color: var(--text-light);
		color: var(--text-light);
		background-color: var(--background);
	}
	#dropdown-options {
		border-color: var(--text-light);
	}
	.dropdown-option {
		color: var(--text-light);
		background-color: var(--background);
	}

	nav {
		background-color: var(--background)
	}

	.dropdown-option:hover {
    	color: var(--background);
    	background-color: var(--text-light);
	}

	.arrow::before {
    	background-color: var(--text-light);
	}
	.arrow::after {
    	background-color: var(--text-light);
	}

	button {
  		background-color: var(--background);
  		color: var(--text-light);
	}
	button:hover {
		background-color: var(--text-light);
		color: var(--background);
	}
	p > a {
		color: var(--text-dark);
	}
	p > a:hover {
		color: var(--text-light);
	}
}