:root {
  /* Light mode */
  --light-switch-shadow: #373d4e;
  --light-switch-icon: url("light-bulb.png");
  --light-switch-text: "dark";
  --light-switch-img: url("sigh-light.gif");
  --light-text: #222430;
  --light-bg: #ffffff;
  --light-theme: #d34a97;

  /* Dark mode */
  --dark-switch-shadow: #fce477;
  --dark-switch-icon: url("dark-bulb.png");
  --dark-switch-text: "light";
  --dark-switch-img: url("sigh-dark.gif");
  --dark-text: #f7f7f7;
  --dark-bg: #000000;
  --dark-theme: #bd93f9;

  /* Default mode */
  --switch-shadow-color: var(--light-switch-shadow);
  --switch-icon: var(--light-switch-icon);
  --switch-text: var(--light-switch-text);
  --switch-img: var(--light-switch-img);
  --text-color: var(--light-text);
  --bg-color: var(--light-bg);
  --theme-color: var(--light-theme);
}

/* Switched mode */
.theme-switch:checked ~ #page {
  --switch-shadow-color: var(--dark-switch-shadow);
  --switch-icon: var(--dark-switch-icon);
  --switch-text: var(--dark-switch-text);
  --switch-img: var(--dark-switch-img);
  --text-color: var(--dark-text);
  --bg-color: var(--dark-bg);
  --theme-color: var(--dark-theme);
}

/* Theme switcher */
.theme-switch { /* Hides the checkbox */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@font-face {
  font-family: PixelifySans;
  src: url("PixelifySans-Regular.ttf");
}


.switch-label {
  cursor: pointer;
  display: flex;
}

.switch-label::before {
  content: var(--switch-icon);
  image-rendering: pixelated;
}

.switch-label::after {
  align-self: center;
  content: var(--switch-text);
  color: var(--switch-shadow-color);
  font-size: 24px;
  line-height: 40px;
  opacity: 0;
  padding-left: 15px;
  transition: opacity .2s;
}

.switch-img {
  background: var(--switch-img);
  background-repeat:no-repeat;
  padding:25%;
}

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

.theme-switch:focus ~ #page .switch-label::after,
.switch-label:hover::after {
  opacity: 1;
}

/* Styling */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#page {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: PixelifySans;
  min-height: 100%;
}

#content {
  margin: auto;
  max-width: 40ch;
  padding: 2ch;
}

a {
  color: var(--theme-color);
}

footer {
  padding: 20px 0;
  margin: 20px 0;
  border-top: 5px solid transparent;
  border-image: linear-gradient(to bottom right, red 0%, orange 10%, yellow 20%, green 30%, blue 40%, purple 50%);
  border-image-slice: 1;
}