/* Toggle and Defaults */
@media (prefers-color-scheme: dark) {
  :has([name="toggle-color-scheme"]:checked) { color-scheme: light; }
}
@media (prefers-color-scheme: light) {
  :has([name="toggle-color-scheme"]:checked) { color-scheme: dark; }
}
/* TOGGLE BUTTON */
#dark-mode-toggle {display: none;}
.toggle {
  display: block;
  width: 30px;
  height: 15px;
  background: var(--toggle-bg);
  border-radius: 15px;
  position: absolute;
  right: 25px;
  top: 15px;
  cursor: pointer;
  transition: background 0.3s;
}
.toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  background: var(--toggle-circle);
  border-radius: 50%;
  transition: transform 0.3s;
}
#dark-mode-toggle:checked + .toggle::before {
  transform: translateX(15px);
}

/* Var and Colors */
:root {
  --toggle-bg:     light-dark(#94a3b8, #475569);
  --toggle-circle: light-dark(#ffffff, #0f172a);
  --col-tx:        light-dark(black,  var(--lightest));
  --col-tx-hi:     white;
  --col-tx-tt:     light-dark(var(--darkest), var(--lightest));
  --col-tx-em:     light-dark(black,           white);
  --col-bg-page:   light-dark(white,           var(--darkest));
  --col-bg-alt:    light-dark(var(--lightest), black);
  --col-bg-button: light-dark(var(--neutral),    var(--neutral));
  --col-bg-select: light-dark(var(--dark),     var(--light));
  --col-bg-menu-o: light-dark(white,           var(--dark));
  --col-bg-menu-e: light-dark(var(--lightest), var(--darkest));
  --col-bd-button: light-dark(var(--light), var(--dark));
  --col-tx-fake:   light-dark(#99b, #446);
  --col-ts:        light-dark(#ffffff77, #33333377);
  --col-bd:        var(--neutral)
}

/* BASE */
body {
  color-scheme: light dark;
  transition: background 0.3s, color 0.3s;
  color:      var(--col-tx);
  /*background: var(--col-bg-page);*/
  background: linear-gradient( to bottom,
    light-dark(var(--dark),    var(--light)) 0%,
    light-dark(var(--dark),    var(--light)) 16%,
    light-dark(var(--lightest), black)       95%,
    light-dark(var(--lightest), black)      100%);
}
header, footer {background: var(--col-bg-alt);}
main           {background: var(--col-bg-page);}
/* HEADER */
h1 a, h1 a:visited {color: var(--col-tx-tt);}
header p           {color: var(--col-tx-em);}
/* Shadow */
header {
  border-radius: 16px 0 16px 0;
  box-shadow:
    inset light-dark(var(--dark), var(--light)) 0 0 0 3px, 
    inset var(--neutral)  0 0 0 6px, 
    inset light-dark(var(--light), var(--dark)) 0 0 0 9px; 
}
/* media and Pseudo Elements */
@media (min-width: 448px) {
header h1::before {
    content: "~ $";
    color: var(--col-tx-fake);
  }
header h1::after {
    content: "▉";
    font-weight: 100;
    font-size: 30px;
    -webkit-animation: 1.5s blink step-end infinite;
       -moz-animation: 1.5s blink step-end infinite;
        -ms-animation: 1.5s blink step-end infinite;
         -o-animation: 1.5s blink step-end infinite;
            animation: 1.5s blink step-end infinite;
  }
}
/* Blink Cursor Anim */
@keyframes "blink" {
  from, to { color: transparent; }
  50% { color: var(--col-tx-fake); }
}
@-moz-keyframes blink {
  from, to { color: transparent; }
  50% { color: var(--col-tx-fake); }
}
@-webkit-keyframes "blink" {
  from, to { color: transparent; }
  50% { color: var(--col-tx-fake); }
}
@-ms-keyframes "blink" {
  from, to { color: transparent; }
  50% { color: var(--col-tx-fake); }
}
@-o-keyframes "blink" {
  from, to { color: transparent; }
  50% { color: var(--col-tx-fake); }
}