html {
	position: relative;
	height:   100%;
}

/*black white theme*/
html[data-theme='dark'] {
	--main-backgroundcolor_hex: var(--soft-black-hex);
	--main_backgroundcolor_rgb: var(--soft-black-rgb);
	--header-background_hex:    var(--p-white-soft-hex); /*var(--nav-gray_hex);*/
	--main-color_hex:           var(--p-white-soft-hex);
	--main-color-rgb:           var(--p-white-soft-rgb);
	--header-color:             var(--p-white-soft-hex);
	--border-color:             var(--gray-max_hex);
	--box-shadow:               RGB(68, 68, 68, 0.15);
	--button-color_hex:         var(--green_hex);
	--button-color-focus_hex:   var(--green-darker_hex);
	--signal-color_hex:         var(--p-orange_hex);
	--footer-color:             var(--p-dark-blue_hex);
	--emphasis-color:           var(--green-darker_hex);
}

html[data-theme='dark'] .img_invert {
	/*invert color of icons*/
	filter: invert(1) hue-rotate(180deg);
}

html[data-theme='dark']::before {
	filter: grayscale(.1) opacity(.9) brightness(1);
	/*opacity: 0.4; Ensures the same opacity for the dark theme */
}

html[data-theme='dark'] main img {
	filter: unset;
}

html[data-theme='dark'] header button {
	color: var(--main-backgroundcolor_hex, #444)
}

html[data-theme='dark'] footer,
html[data-theme='dark'] footer table td {
	color: var(--main-backgroundcolor_hex, #444);
}

/*back to white theme*/
html {
	transition: color 300ms, background-color 300ms;
	background: var(--main-backgroundcolor_hex);
	color:      var(--main-color_hex);
}

a {
	text-decoration: none;
	color:           var(--button-color-focus_hex);
}