.container { --pico-code-color: var(--pico-color); }
span.adverb { color: #ad8900; } span.comment { color: #909995; } span.dyad { color: /* #489100 */ var(--pico-primary); } span.escape { color: #dd0f9d; } span.lambda { color: #d2212d; } span.monad { color: /* #0072d4 */ var(--pico-primary); } span.number { color: /* #009c8f */ #01aaff; } span.rx { color: #009c8f; } span.rxsym { color: #d2212d; } span.stmt { color: #ad8900; } span.special { color: #d2212d; } span.string { color: /* #009c8f */ orange; } span.xyz { color: #d2212d; }
#menu-toggle { display: none; }
.hamburger { display: inline-block; cursor: pointer; width: 32px; height: 32px; position: relative; }
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  content: '';
  display: block; position: absolute; left: 0; height: 4px; width: 32px;
  background: var(--pico-h1-color);
  border-radius: 3px; transition: 0.3s ease;
}
.hamburger span { top: 14px; }
.hamburger span::before { content: ''; top: -10px; position: absolute; }
.hamburger span::after { content: ''; top: 10px; position: absolute; }
.sidebar-nav input, .sidebar-nav .hamburger { display: none; }
.sidebar-nav input, .sidebar-nav .hamburger { display: block; position: fixed; top: 20px; left: 20px; z-index: 1000; }
.sidebar-nav ul {
  position: fixed; left: 0; top: 0; height: 100%; width: 220px; padding: 4rem 0 0 1.6rem; z-index: 999;
  transform: translateX(-100%); transition: transform 0.3s;
  background: var(--pico-primary-background); box-shadow: 2px 0 10px rgba(0,0,0,0.12);
}
.sidebar-nav input:checked + .hamburger + ul { transform: translateX(0); }
button:active { transform: scale(0.96); }
button.outline:active { background: var(--pico-primary-background); }
button:active { background: var(--pico-background); }
.container > header { margin-top: 4rem; }
.container > footer { margin-bottom: 4rem; }
.container .fl { display: flex; flex: 1 }
.container .fr { display: flex; flex-direction: row }
.container textarea { font-family: monospace; font-size: calc(var(--pico-font-size) * 0.7); resize: both; min-height: 20rem; }
.site-header { display: flex; justify-content: space-between; }
.site-header a { color: var(--pico-h1-color); text-decoration: none; }
.site-header a:hover, details summary:hover { color: var(--pico-primary); text-decoration: underline; }
footer hr { margin-top: 4rem; }
h2 { margin-top: 2rem; }
article.flashcard { background-color: var(--pico-color); border-radius: 1rem; padding: 0.4rem; margin-bottom: 0; }
.flashcard { perspective: 1000px; height: 400px; }
.flashcard-inner { display: block; width: 100%; height: 100%; position: relative; transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer; }
.flashcard-front, .flashcard-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; border-radius: 1rem; }
.flashcard-front { background: var(--pico-primary-background); }
.flashcard-back { background: #143642; color: #fff; transform: rotateX(180deg); }
input[type="checkbox"]:checked + label { transform: rotateX(180deg); }
.flashcard-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
/* .flashcard { flex: 1 1 clamp(250px, 30%, 340px);} */
.flashcard { flex: 1 1 clamp(250px, 100%, 100%); }
@media (max-width: 600px) { .card { min-width: 100%; max-width: 100%; flex-basis: 100%; } }
h3 { position: relative; }
a.heading-anchor-link {
  /* hides by default */
  opacity: 0;
  font-size: 1rem;
  position: absolute;
  left: -25px; /* adjust to position at left or right */
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  transition: opacity 0.2s linear;
  color: #555;
}
h3:hover a.heading-anchor-link {
  opacity: 0.7;
}
a.heading-anchor-link:hover {
  opacity: 0.9;
  color: #222;
}