:root {
color-scheme: light dark; /* both supported */

/* define light mode colors, default mode */
    --light-theme-switch-text: "dark mode";
    --light-theme-text-color: #444444;
	--light-theme-bg: url("../images/bg-light.jpg");
	--light-theme-color: #600008;

/* define dark mode colors */ 
    --dark-theme-switch-text: "light mode";
    --dark-theme-text-color: #eeeeee;
	--dark-theme-bg:url("../images/bg-dark.jpg");
	--dark-theme-color: /*#ff7f01;*/ #bbbb55;
 }

/* default, OS is set to light mode */
@media (prefers-color-scheme: light) {
#outer {
  --switch-text: var(--light-theme-switch-text);
  color: var(--light-theme-text-color);
  background: var(--light-theme-bg);
  --theme-color: var(--light-theme-color); 
 }
/* switched mode, define DARK mode colors */
.theme-switch:checked ~ #outer {
  --switch-text: var(--dark-theme-switch-text);
  color: var(--dark-theme-text-color);
  background: var(--dark-theme-bg);
  --theme-color: var(--dark-theme-color); 
 }
}

/* OS is set to dark mode */
@media (prefers-color-scheme: dark) {
#outer {
  --switch-text: var(--dark-theme-switch-text);
  color: var(--dark-theme-text-color);
  background: var(--dark-theme-bg);
  --theme-color: var(--dark-theme-color); 
 }
/* switched mode, define LIGHT mode colors */
.theme-switch:checked ~ #outer {
  --switch-text: var(--light-theme-switch-text);
  color: var(--light-theme-text-color);
  background: var(--light-theme-bg);
  --theme-color: var(--light-theme-color); 
 }
}

h1, h2, h3 { color: var(--theme-color); }

/* formats the theme switch button and hides the checkbox */
.theme-switch {
position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.switch-label { cursor: pointer; display: flex; }
.switch-label { margin:0px; border-radius:6px; border:2px solid #888888; overflow:auto; float:left; margin-left:10%; }
.switch-label::after { align-self: center; content: var(--switch-text); font-size: 18px; line-height: 30px; opacity: 0; padding-left: 15px; padding-right: 15px;
}
.theme-switch:focus ~ #outer .switch-label::after,
.switch-label::after { opacity: 1; }
.language-button { margin:0px; border-radius:6px; border:2px solid #888888; overflow:auto; float:right; margin-right:10%;
align-self: center; font-size: 18px; line-height: 30px; opacity: 1; padding-left: 15px; padding-right: 15px; text-align:center; }
.language-button a { text-decoration:none; color: var(--switch-text); }