body { 
  font-family: Calibri, sans-serif; 
  max-width: 900px; 
  margin: auto; 
  background: #fff; 
  color: #202122; 
}

h1, h2, h3 { 
  border-bottom: 1px solid #adb3bb; 
  padding-bottom: .2em; 
}

.ref { font-size: 90%; }

.rl { color: red; font-weight: bold; }
.bl { color: blue; font-weight: bold; }
.falseblue { color: white; font-weight: bold; }
.h  { color: purple; }

.envy { user-select: none;        
      -webkit-user-select: none;  
      -ms-user-select: none; }

.trueblack { color: #202122; }

.truewhite { color: #FFFFFF; }

.gone { color: #FFFFFF; }

body { 
  font-family: sans-serif; 
  max-width: 900px; 
  margin: auto; 
  background: #fff; 
  color: #202122; 
}

h1, h2, h3 { 
  border-bottom: 1px solid #a2a9b1; 
  padding-bottom: .2em; 
}

.infobox { 
  float: right; 
  width: 300px; 
  font-size: 90%; 
  background: #fcfcfc; 
  border: 1px solid #a2a9b1; 
  padding: 5px; 
  margin: 0 0 1em 1em; 
}

.infobox th { 
  background: #eaecf0; 
  text-align: center; 
}

.toc { 
  border: 1px solid #a2a9b1; 
  background: #f8f9fa; 
  padding: 1em; 
  margin: 1em 0; 
}

.toc h2 { 
  font-size: 100%; 
  border: none; 
  margin: 0 0 .5em 0; 
}

.ref { font-size: 90%; }

.black { color: black; }

.button-wrapper {
  text-align: center;
}


/* d */

body.dark-mode {
  background: #000000 !important;
  color: #e6e6e6 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
  border-bottom: 1px solid #444 !important;
}

body.dark-mode .infobox {
  background: #000000 !important;
  border: 1px solid #444 !important;
}

body.dark-mode .infobox th {
  background: #000000 !important;
}

body.dark-mode .toc {
  background: #000000 !important;
  border: 1px solid #444 !important;
}

/* colored text fix */
body.dark-mode .rl { color: #ff6b6b !important; }
body.dark-mode .bl { color: #6ba4ff !important; }
body.dark-mode .falseblue { color: #6ba4ff !important; }
body.dark-mode .h  { color: #d291ff !important; }
body.dark-mode .black { color: #e6e6e6 !important; }
body.dark-mode .trueblack { color: #000000 !important; }
body.dark-mode .gone { color: #000000 !important; }

/* app */ 

.appearance-panel {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 160px;

  background: #f8f9fa;
  border: 1px solid #a2a9b1;
  padding: 10px;
  font-size: 14px;

  z-index: 1000;
}

.appearance-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.appearance-panel label {
  display: block;
  margin: 5px 0;
  cursor: pointer;
}

body.dark-mode .appearance-panel {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #e6e6e6;
}

body.dark-mode .appearance-panel input {
  accent-color: #6ba4ff; /* i was gonna say smth here btu i forgot */
}

.appearance-panel label:hover {
  background: rgba(0,0,0,0.05);
}

body.dark-mode .appearance-panel label:hover {
  background: rgba(255,255,255,0.08);
}

.season-panel {
  position: fixed;
  top: 260px; /* below the first panel */
  right: 20px;
  width: 160px;

  background: #f8f9fa;
  border: 1px solid #a2a9b1;
  padding: 10px;
  font-size: 14px;

  z-index: 1000;
}

/* fucl you */
body.dark-mode .season-panel {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #e6e6e6;
}

body.dark-mode .season-panel input {
  accent-color: #6ba4ff;
}

.season-panel label:hover {
  background: rgba(0,0,0,0.05);
}

body.dark-mode .season-panel label:hover {
  background: rgba(255,255,255,0.08);
}