:root {
  --fg-color: black;
  --bg-color: white;
  --transition-curve: cubic-bezier(0.76, 0, 0.24, 1); /* easeInOutQuart */
  color-scheme: light;
}

[data-theme="dark"] {
  --fg-color: white;
  --bg-color: black;
  color-scheme: dark;
}

* {
  font-family: Helvetica, Arial, sans-serif;
}

body {
  background: var(--bg-color);
  color: var(--fg-color);
  transition: background 300ms, color 300ms;
}

header {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.2em;
}

header label {
  position: absolute;
  top: 0.3em;
  right: 0.3em;

  content: "";
  width: 3em;
  height: 1em;

  background: transparent;
  box-shadow: inset 0em 0em 1em var(--fg-color);
  border-radius: 1.5em;
  cursor: pointer;
}

header label:after {
  position: absolute;
  top: 0.125em;
  right: 0em;

  content: "";
  width: 2.75em;
  height: 0.75em;

  background: linear-gradient(90deg, lightgreen, blue);
  border-radius: 1.5em;
  cursor: pointer;

  clip-path: circle(0.3em at 0.3em);
  transition: clip-path 300ms ease-out;
}

header input:checked + label:after {
  clip-path: circle(0.3em at 2.25em);
}

header label:before {
  content: "🔆";
  position: absolute;
  top: 50%;
  right: 3.2em;
  transform: translate(0, -50%);
}

header input:checked + label:before {
    content: "🕶";
}

header input {
  display: none;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
}

footer a {
  background-size: 32px 2px;
}

footer a span {
  transition: clip-path 300ms var(--transition-curve);
  clip-path: inset(0px 0px 0px 100%);
}

footer a:hover span {
  clip-path: inset(0px 0px 0px 0px);
}

a img {
  width: 32px;
}

form {
  display: flex;
}

fieldset {
  margin: 0.1em;
}

legend {
  background: var(--fg-color);
  color: var(--bg-color);
  padding: 0.2em;
}

select {
  /* [hotfix] constrains the select element to fit within the fieldset/label element, which prevents the width from expanding past its parent, on mobile devices with small screens (but only on Android?) */
  width: 100%;
  max-width: fit-content;
}

a {
  text-decoration: none;
  background-image: linear-gradient(90deg, lightblue, lightgreen);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: right bottom;
  transition: background-size 300ms var(--transition-curve), color 300ms var(--transition-curve);
}

a:hover {
  color: blue;
  background-size: 100% 100%;
}