:root {
  /* Light theme */
  --light-switch-shadow: #373d4e;
  --light-switch-icon: "🌚";
  --light-switch-text: "dark mode?";
  --light-text: #222430;
  --light-header-bg: #ffffff;
  --light-bg: #f8f9fc;
  --light-hover: #c7c7c7;

  /* Dark theme */
  --dark-switch-shadow: #fce477;
  --dark-switch-icon: "🌝";
  --dark-switch-text: "light mode?";
  --dark-text: #f7f7f7;
  --dark-header-bg: #242222;
  --dark-bg: #181818;
  --dark-hover: #3d3d3d;

  /* Default data */
  --switch-shadow-color: var(--light-switch-shadow);
  --switch-icon: var(--light-switch-icon);
  --switch-text: var(--light-switch-text);
  --text-color: var(--light-text);
  --header-bg-color: var(--light-header-bg);
  --bg-color: var(--light-bg);
  --theme-hover: var(--light-hover);
}

.theme-switch:checked ~ header,
.theme-switch:checked ~ section,
.theme-switch:checked ~ footer
 {
  --switch-shadow-color: var(--dark-switch-shadow);
  --switch-icon: var(--dark-switch-icon);
  --switch-text: var(--dark-switch-text);
  --text-color: var(--dark-text);
  --header-bg-color: var(--dark-header-bg);
  --bg-color: var(--dark-bg);
  --theme-hover: var(--dark-hover);
}

.theme-switch { 
    display: none;
}

.switch-label {
  cursor: pointer;
  margin: 0 auto;
}

.switch-label::before {
  content: var(--switch-icon);
  font-size: 30px;
  transition: text-shadow .2s;
}

.switch-label::after {
  content: var(--switch-text);
  color: var(--switch-shadow-color);
  font-size: 28px;
  opacity: 0;
  padding-left: 15px;
  transition: opacity .2s;
}

.switch-label::before,
.switch-label:hover::before {
  text-shadow: 0 0 15px var(--switch-shadow-color);
}

.switch-label::after,
.switch-label:hover::after {
  opacity: 1;
}