/* lets try not to make this a mess, this time around */

/* THIS IS THE DARK! THEME */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #2b2a22;
  --col:       #d2d1b3;
  --a:         #ffeb89; 
  --avisited:  #9e8f77; 
  --ahover:    #987229;
  --ahoverbg:  #f3efbc;
  --bgbars:    #000000;
  --bgdots:    #212121;
}

/* THIS IS THE LIGHT! THEME */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #d2d1b3;
  --col:       #2b2a22;
  --a:         #b29443; 
  --avisited:  #544936; 
  --ahover:    #fdd58b;
  --ahoverbg:  #93906d;
  --bgbars:    #ffffff;
  --bgdots:    #212121;
}

.header, .banner, #wrap, .footer {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
    background: var(--bg);
}

body {
    background: var(--bg);
    color: var(--col);
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    margin: 0;
    min-height: 100vh;
    background:
      radial-gradient(var(--bgdots) 1px, transparent 1px) 0 0 / 3px 4px,
      var(--bgbars);
  }

   #wrap { 
  padding: 20px; 
}

  a              { color: var(--a) }
  a:visited      { color: var(--avisited) }
  a:hover        { color: var(--ahover); background: var(--ahoverbg); }

  hr             { border: none; border-top: 1px solid var(--col); margin: 16px 0; }

  h1             { font-size: 1.8em; color: #d2d1b3; }
  h2             { font-size: 1.4em; color: #d2d1b3; }
  h3             { font-size: 1em; font-weight: normal; color: #d2d1b3; }
  p              { margin: 4px 0; }

  .warnsmall, .muted  { font-size: 0.8em;}
  .warnsmall          { color: #c46868; }
  .warn               { color: #c46868; }

  /* some misc */
  li::marker { content: '~ ';}
  summary { list-style: none; }          /* kill that ugly triangle. ew. */
  summary::before { content: '[+] '; color: var(--col); }
  summary.muted::before { color: inherit; }
  details > summary::before { content: "[+] "; }
  details[open] > summary::before { content: "[-] "; }
  summary::-webkit-details-marker { display: none; }

  /* header and footer and lightswitch */
  .header, .footer {
    padding: 20px;
    text-align: center;
  }

.about-header {
    text-align: center
}
.about-text {
    text-align: left
}

.memberlist {
  display: flex;
  justify-content: center;
  align-items: center;
}

.member { display: flex; align-items: center; gap: 10px; }
.mature-tag { border: 1px solid; padding: 0 3px; font-size: 0.8em; }

    #lightswitch {
    float: left;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

/* column layouts */
.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px 40px;
}

.three-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px 40px;
}

.lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}