/* Earthy Green https://coolors.co/palette/cad2c5-84a98c-52796f-354f52-2f3e46 */

:root {
  --col-tx:        light-dark(#2F3E46, #CAD2C5);
  --col-tx-hi:     light-dark(black, white);
  --col-bg-page:   light-dark(white, #2F3E46);
  --col-bg-alt:    light-dark(#CAD2C5, black);
  --col-bg-button: light-dark(#84A98C, #52796F);
  --col-bd-button: light-dark(#52796F, #2F3E46 );
  --col-tx-fake:   light-dark(#99b, #446);
  --col-bd: #52796F
}

/* BASE */
body {
  color-scheme: light dark;
  background: var(--col-bg-page);
  color:      var(--col-tx);
  transition: background 0.3s, color 0.3s;
}
header, footer {
  width: 100%;
  background: var(--col-bg-alt);
}
/* HEADER */
header {
  box-shadow:
    inset light-dark(#354F52, #84A98C) 0 0 0 3px, 
    inset #52796F  0 0 0 6px, 
    inset light-dark(#84A98C, #354F52 ) 0 0 0 9px; 
}
@media (min-width: 448px) {
  h1::before {
    content: "~ $";
    color: var(--col-tx-fake);
  }
  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;
  }
}
@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); }
}
header p {
  color: var(--col-tx-hi);
}
header nav a {
  color:            var(--col-tx-hi);
  background-color: var(--col-bg-button);
  border: solid     var(--col-bd-button) 2px;
}
header nav a:hover {
  color: white;
  background-color: #84A98C;
  text-shadow: 0 0 4px  black;
}
/* FOOTER */
footer {
  border-top: solid var(--col-bd) 4px;
  box-shadow: 0px 0px 10px 0px black;
}

@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; }
}