:root {
  --bg_h: #1d2021;
  --bg:   #282828;
  --bg_s: #32302f;
  --bg1:  #3c3836;
  --bg2:  #504945;
  --bg3:  #665c54;
  --bg4:  #7c6f64;

  --fg:  #fbf1c7;
  --fg1: #ebdbb2;
  --fg2: #d5c4a1;
  --fg3: #bdae93;
  --fg4: #a89984;

  --red:    #fb4934;
  --green:  #b8bb26;
  --yellow: #fabd2f;
  --blue:   #83a598;
  --purple: #d3869b;
  --aqua:   #8ec07c;
  --gray:   #928374;
  --orange: #fe8019;

  --red-dim:    #cc2412;
  --green-dim:  #98971a;
  --yellow-dim: #d79921;
  --blue-dim:   #458588;
  --purple-dim: #b16286;
  --aqua-dim:   #689d6a;
  --gray-dim:   #a89984;
  --orange-dim: #d65d0e;
}

body {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  padding: .75rem;
  background: var(--bg_s);
  color: var(--fg);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;

a:link { 
  color: var(--green);
  }
a:visited { 
  color: var(--green-dim);
  }
H1,H2,H3,H4,H5 {
  color: var(--yellow);
  }

/* position */
/* mobile-first: sidebar on top */
.sidebar {
  width: 100%;
}
.main {
  margin-left: 5;
  flex: 1 0 auto;
}
.icon {
  height: 2cap;          /* same height as the font-size */
  width: auto;          /* keep original proportions */
  display: inline-block;
  vertical-align: middle;
}
.footer {
   margin-left: 5;
   flex-shrink: 0;
}

/* desktop: sidebar locked to the left */
@media (min-width: 48rem) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 10;
    width: 15rem;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--fg4);
    margin-top: 1.25rem;
  }
  .main {
    margin-left: 16rem;
    margin-top: 3rem;
  }
  .footer {
    margin-left: 16rem;
  }
  .content-section {
    padding: 1rem;
    margin: 0.5rem 0;
}

}
/* Normal Colors */

.red {
  color: var(--red);
}

.green {
  color: var(--green);
}

.yellow {
  color: var(--yellow);
}

.blue {
  color: var(--blue);
}

.purple {
  color: var(--purple);
}

.aqua {
  color: var(--aqua);
}

.gray {
  color: var(--gray);
}

.orange {
  color: var(--orange);
}

/* Dim Colors */

.red-dim {
  color: var(--red-dim);
}

.green-dim {
  color: var(--green-dim);
}

.yellow-dim {
  color: var(--yellow-dim);
}

.blue-dim {
  color: var(--blue-dim);
}

.purple-dim {
  color: var(--purple-dim);
}

.aqua-dim {
  color: var(--aqua-dim);
}

.gray-dim {
  color: var(--gray-dim);
}

.orange-dim {
  color: var(--orange-dim);
}

/* Foreground Colors */

.fg {
  color: var(--fg);
}

.fg1 {
  color: var(--fg1);
}

.fg2 {
  color: var(--fg2);
}

.fg3 {
  color: var(--fg3);
}

.fg4 {
  color: var(--fg4);
}

/* Background Colors */

.bg-hard {
  color: var(--bg_h);
}

.bg {
  color: var(--bg);
}

.bg-soft {
  color: var(--bg_s);
}

.bg1 {
  color: var(--bg1);
}

.bg2 {
  color: var(--bg2);
}

.bg3 {
  color: var(--bg3);
}

.bg4 {
  color: var(--bg4);
}