@font-face {
  font-family: 'noto-emoji-mono';
  src: url('../fonts/NotoEmoji-VariableFont_wght.woff2');
  font-weight: 100;
}

@font-face {
  font-family: 'charterbold_italic';
  src: url('../fonts/charter_bold_italic-webfont.eot');
  src: url('../fonts/charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/charter_bold_italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'charterbold';
  src: url('../fonts/charter_bold-webfont.eot');
  src: url('../fonts/charter_bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/charter_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'charteritalic';
  src: url('../fonts/charter_italic-webfont.eot');
  src: url('../fonts/charter_italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/charter_italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'charterregular';
  src: url('../fonts/charter_regular-webfont.eot');
  src: url('../fonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/charter_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

:root {
  --text: #5C6A72;
  --link: #35a77c;
  --link_visited: #89A79C;
  --accent1: #E5F0F4;
  --accent2: #666666;
  --background: #FFFBEF;
  --code: #e3e3e3;
  --button-text: #ffffff;
  --blockquote: #99C6D3;
    --contentbox: #EDEADA;
  --tagbutton: #3A94C5;
  --field: #fffee0;
  --note: #fffee0;
  --mark: #FFFF99;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #f8f8f2;
    --link: #83c092;
    --link_visited: #52785C;
    --accent1: #A5B0B4;
    --accent2: #f8f8f2;
    --contentbox: #14141a;
    --background: #1e2326;
    --code: #44475a;
    --button-text: #282a36;
    --blockquote: #4C6369;
    --tagbutton: #7FBBB3;
    --field: #44475a;
    --note: #44475a;
    --mark: #FFFF99;
  }
}


body {
  font-size: 18px;
  font-family: charterregular, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  font-weight: normal;
  line-height: 1.6;
  margin-top: 6em;
  background-color: var(--background);
  color: var(--text);
  display: flex;
  justify-content: center;
}

.root {
  box-sizing: border-box;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

a {
  color: var(--link);
}

h1>a {
  color: var(--text);
  text-decoration: none;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
}

.hidden {
  display: none;
}

.intro-text {
padding: 3px;
}

.root {
  width: 100vw;
  max-width: 40em;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1.site-title {
  color: var(--text);
  font-family: charterbold;
  font-weight: 900;
  margin: 2rem;
}

a.post-tag-link {
  background-color: var(--tagbutton);
  color: black;
  font-family: Arial, sans-serif;
  font-weight: 500;
  padding: 1px 4px;
  font-size: 1rem;
  border-radius: 5px;
}

.nav-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.nav-items {
  width: 100%;
  text-align: center;
  list-style-type: none;
  line-height: 2.5;
  padding: 0;
}

.nav-items>.page-link {
  display: inline;
  font-size: 1em;
  padding: 5px 10px;
}

.no-underline {
  text-decoration: none;
}

a.no-colour-link {
  color: var(--text);
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inline-list {
  display: inline;
  padding-right: 1rem;
}

.post-list {
  padding: 0px
}

.post-list>li {
  display: flex;
  margin-bottom: 0.5rem;
}

.post-list>li>span {
  width: 12rem;
  max-width: 30vw;
  flex: none;
}

.post-list>li>a {
  margin-left: 2rem;
}

.post-title,
h2 {
  margin: 2px;
  font-family: charterbold;
}

.home-page-boxes {
  width: 100%;
  display: grid;
  overflow: auto;
  grid-template-rows: repeat(auto-fit, fit-content(10rem));
  grid-template-columns: repeat(auto-fit, minmax(16em,1fr));
}

.latest-post {
  grid-column-start: 1;
  grid-column-end: -1;
}

.small-boxes {
  box-sizing: border-box;
  min-width: ;
}

.content-box {
  background-color: var(--contentbox);
  margin: 0.4rem;
  padding: 0.8rem;
}

blockquote {
  border-left: 4px solid var(--accent1);
  border-radius: 0px
}

ul.no-bullets {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.tags-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  max-width: 700px;
  text-align: center;
  margin-left: 0px
}

.page-content {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
}

.respond-to-post {
  margin-top: 1rem;
}

a.reply-by-email,
a.reply-on-mastodon {
  box-sizing: content-box;
  margin: 2rem;
  border: 0px;
  padding: 0;
  font-size: 1.2rem
}


.nav-bar a:hover,
a.reply-by-email:hover,
a.reply-on-mastodon:hover {
  text-decoration: underline;
  background: var(--background);
  border: 0px;
  color: var(--link);
}

.spoiler {
  background-color: gray;
  color: transparent;
  user-select: none;
}

.spoiler:hover {
  background-color: inherit;
  color: inherit;
}

figcaption {
  max-width: 100%;
  text-align: center;
}

.emoji-mono {
  font-family: noto-emoji-mono;
  font-size: 0.9rem;
}

.anchor-icon>a {
  text-decoration: none;
}

.book-list-item {
  display: flex;
}

.book-cover {
  flex: 0;
  max-width: 100px;
}

.book-details {
  margin: 2rem;
}


.inline-image {
  max-width: 100%;
}


pre {
  font-size: 0.9rem;
  background-color: var(--contentbox);
  padding: 5px;
}

.anchor-icon>a:hover {
  color: var(--link);
  font-weight: 900;
  text-decoration: underline;
}