:root {
  color-scheme: light;
  color: #21473d;
  background: #e7efe1;
}

body {
  min-height: 100vh;
  color: #21473d;
  background:
    radial-gradient(circle at 82% 9%, rgba(255, 213, 123, .7), transparent 18%),
    radial-gradient(circle at 16% 4%, rgba(255, 255, 255, .85), transparent 24%),
    linear-gradient(155deg, #d8edef, #f1f2d8 48%, #f6e4bd);
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(44, 94, 78, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 94, 78, .08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 68% 30%, black, transparent 68%);
}

main { position: relative; z-index: 1; }
a, .brand { color: #137d68; }
h1 { color: #173e34; text-shadow: 0 2px rgba(255, 255, 255, .5); }
h2 { color: #a75e25; }
p, li, address { color: #5a746a; }
strong { color: #234b40; }
.date { color: #758a81; }
.card {
  border-color: rgba(55, 91, 77, .17);
  background: rgba(255, 254, 242, .75);
  box-shadow: 0 16px 42px rgba(53, 79, 60, .1), inset 0 1px rgba(255, 255, 255, .72);
  backdrop-filter: blur(12px);
}
.back {
  color: #176f5e;
  border-color: rgba(38, 105, 87, .22);
  background: rgba(255, 255, 255, .46);
}
.back:hover { background: rgba(255, 255, 255, .78); }

:root[data-theme='night'] {
  color-scheme: dark;
  color: #dce9e1;
  background: #07141f;
}
:root[data-theme='night'] body {
  color: #dce9e1;
  background:
    radial-gradient(circle at 82% 8%, rgba(118, 111, 255, .22), transparent 22%),
    radial-gradient(circle at 18% 0, #173b42, #07141f 42%);
}
:root[data-theme='night'] body::before {
  opacity: .18;
  background-image:
    linear-gradient(rgba(129, 190, 184, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 190, 184, .08) 1px, transparent 1px);
}
:root[data-theme='night'] a,
:root[data-theme='night'] .brand { color: #70e4ce; }
:root[data-theme='night'] h1 { color: #eef8f3; text-shadow: none; }
:root[data-theme='night'] h2 { color: #ffd38a; }
:root[data-theme='night'] p,
:root[data-theme='night'] li,
:root[data-theme='night'] address { color: #a9bbb2; }
:root[data-theme='night'] strong { color: #dce9e1; }
:root[data-theme='night'] .date { color: #71877c; }
:root[data-theme='night'] .card {
  border-color: #31564a;
  background: rgba(8, 30, 31, .86);
  box-shadow: 0 18px 45px rgba(0, 7, 15, .3);
}
:root[data-theme='night'] .back {
  color: #9deedf;
  border-color: #31564a;
  background: rgba(112, 228, 206, .04);
}