@import "/css/clairobscur-ui.css";
@import "/css/clairobscur-effect.css";
@import "/css/gallery.css";

:root {
  --bg: #3b3228;
  --bg95: #43392d;
  --bg75: #4c4134;
  --altbg: #5d4f40;
  --bg25: #6b6055;
  --sand: #c1a387;
  --cyan: #3eccbe;
  --fg: #afd2e9;
  --scarlet: #e86045;
  --orange: #e68d53;
  --moss: #92a650;
  --celadon: #ace1af;
  --saffron: #f8e2a0;
  --page-padding: 50px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sand) var(--bg) !important;
}

body {
  font-family: "serif";
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  font-size-adjust: ex-height 0.53;
  max-width: 600px;
  padding: 0 4px;
  margin: 0 auto;
  margin-top: 50px;
}
h2 {
  color: var(--fg);
  &::selection {
    color: var(--bg);
    background: var(--saffron);
  }
}
h3 {
  color: var(--sand);
  &::selection {
    color: var(--bg);
    background: var(--saffron);
  }
}

p {
  max-width: inherit;
  margin: 0, 8px;
  &::selection {
    color: var(--bg);
    background: var(--saffron);
  }
}

a {
  color: var(--orange);
  &::selection {
    color: var(--scarlet);
    background: var(--saffron);
  }
}
a[href="#"],
a[href="#"] .bookword {
  color: var(--scarlet);
}
body.clear a[href="#"] .linkword {
  color: var(--bg75);
}

body.obscure a[href="#"] .bookword {
  color: var(--fg) !important;
  text-decoration: none;
}
/*--------------------------------------------*/

.tags {
  display: flex;
  flex-direction: row;
  gap: 2em;
  margin-top: 4em;
  color: var(--sand);
  & > li {
    font-size: 16px;
    list-style-type: none;
    &:first-letter {
      text-transform: uppercase;
    }
  }
}