body:has(#theme:not(:checked)) {
  /* Selenized white */
  --bg_0: #ffffff;
  --bg_1: #ebebeb;
  --bg_2: #cdcdcd;
  --dim_0: #878787;
  --fg_0: #474747;
  --fg_1: #282828;

  --red: #d6000c;
  --green: #1d9700;
  --yellow: #c49700;
  --blue: #0064e4;
  --magenta: #dd0f9d;
  --cyan: #00ad9c;
  --orange: #d04a00;
  --violet: #7f51d6;

  --br_red: #bf0000;
  --br_green: #008400;
  --br_yellow: #af8500;
  --br_blue: #0054cf;
  --br_magenta: #c7008b;
  --br_cyan: #009a8a;
  --br_orange: #ba3700;
  --br_violet: #6b40c3;

  --theme_invert: 0;
}

body:has(#theme:checked) {
  /* Selenized black */
  --bg_0: #181818;
  --bg_1: #252525;
  --bg_2: #3b3b3b;
  --dim_0: #777777;
  --fg_0: #b9b9b9;
  --fg_1: #dedede;

  --red: #ed4a46;
  --green: #70b433;
  --yellow: #dbb32d;
  --blue: #368aeb;
  --magenta: #eb6eb7;
  --cyan: #3fc5b7;
  --orange: #e67f43;
  --violet: #a580e2;

  --br_red: #ff5e56;
  --br_green: #83c746;
  --br_yellow: #efc541;
  --br_blue: #4f9cfe;
  --br_magenta: #ff81ca;
  --br_cyan: #56d8c9;
  --br_orange: #fa9153;
  --br_violet: #b891f5;

  --theme_invert: 100%;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-auto {
  flex: auto;
}

html {
  display: flex;
  justify-content: center;
  font-family: serif;
  font-size: 1.2em;
}

body {
  max-width: 1024px;
  overflow-x: scroll;
  padding: 15px;
  justify-content: center;
  background-color: var(--bg_0);
  color: var(--fg_0);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: sans-serif;
}

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

a:visited {
  color: var(--violet);
}

.site-title {
  font-size: 2.5em;
  margin-bottom: 10px;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: left;
  font-size: 1.2em;
}

pre {
  overflow-x: scroll;
}

img {
  max-width: 100vw;
}

.block {
  border: 1px dotted white;
  padding: 5px 15px;
  margin: 0 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block h1 {
  font-size: 1em;
  text-align: center;
  margin-bottom: 0;
}

.small {
  font-size: 0.8em;
}

.wave {
  background: #111;
  color: #fff;
  text-shadow: 1px 1px 10px #fff, 1px 1px 10px #ccc;
}

footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8em;
}

footer hr {
  width: 100%;
}

footer #socials {
  display: flex;
  flex-direction: row;
  column-gap: 6px;
}

footer img {
  display: inline-block;
}

.theme-invert {
  filter: invert(var(--theme_invert));
}

.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle-switch {
  display: inline-block;
  background: var(--bg_2);
  border-radius: 14px;
  width: 52px;
  height: 28px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
  &:before {
    content: "";
    text-align: center;
    vertical-align: middle;
    font-size: 10px;
    display: block;
    background: var(--bg_0);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
  }
  .toggle:hover &:before {
    background: var(--bg_1);
  }
  .toggle-checkbox:checked + & {
    &:before {
      left: 28px;
    }
  }
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}