/*
  Dusty Tome theme by Marina Kittaka.
  Zonelets Theme Pack 1, released under CC0.
  Small accessibility and responsive additions were made for Yasru404.
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  color: #524234;

  font-family: "Palatino Linotype", Palatino, Baskerville,
    "Baskerville Old Face", Garamond, serif;
  font-size: 18px;

  background-color: #243c41;
  background-image: url("../images/bg_dustyTome.jpg");
  background-position: top center;
  background-attachment: fixed;
}

p {
  line-height: 1.6;
}

a {
  color: #5e321d;
  text-underline-offset: 3px;
}

a:hover {
  color: #f0d19a;
  background-color: #0d2527;
}

a:focus-visible {
  outline: 2px dotted #0d2527;
  outline-offset: 3px;
}

hr {
  border: solid #ccad78;
  border-width: 2px 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0.5em 0;
}

code,
pre {
  font-family: "Courier New", monospace;
}

pre {
  max-width: 100%;
  padding: 14px;
  overflow-x: auto;

  background-color: rgba(255, 255, 255, 0.28);
  border: 1px solid #ccad78;
}

.right {
  float: right;
  margin-left: 1em;
}

.left {
  float: left;
  margin-right: 1em;
}

.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

.blog-kicker {
  margin-bottom: 0;

  color: #695b4f;

  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#container {
  width: 90%;
  max-width: 700px;
  margin: 3em auto;

  color: #524234;
  background-color: #f0d19a;

  outline: 6px ridge #695b4f;
}

#content {
  padding: 10px 5% 24px;
}

#postDate {
  display: block;
  margin-bottom: 28px;

  color: #695b4f;

  font-family: "Courier New", monospace;
  font-size: 0.78rem;
}

#postTags:not(:empty) {
  margin-top: -16px;
  margin-bottom: 28px;
}

#header {
  padding: 0 5%;

  background-color: #0d2527;
  border: solid #695b4f;
  border-width: 0 0 6px;
}

#header ul {
  margin: 0;
  padding: 0.5em 0;

  list-style-type: none;
}

#header li {
  display: inline-block;

  margin: 0.2em 1.5em 0.2em 0;

  font-size: 1.2em;
}

#header li a {
  color: #8fd1d5;
  text-decoration: none;
}

#header li a:hover {
  color: #0d2527;
  background-color: #8fd1d5;
}

#header li a:focus-visible {
  outline-color: #8fd1d5;
}

#postlistdiv ul,
#recentpostlistdiv ul {
  padding: 0;

  font-size: 1.2em;
  list-style-type: none;
}

#postlistdiv li,
#recentpostlistdiv li {
  margin-bottom: 0.9em;
}

.post-list-link {
  display: inline-block;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  margin-top: 0.4em;
}

.post-tags:empty {
  display: none;
}

.post-tag,
.tag-filter {
  display: inline-block;

  padding: 2px 6px;

  color: #5e321d;

  font-family: "Courier New", monospace;
  font-size: 0.68rem;
  line-height: 1.3;
  text-decoration: none;

  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #9d7c52;
}

.post-tag:hover,
.post-tag:focus-visible,
.tag-filter:hover,
.tag-filter:focus-visible,
.tag-filter[aria-current="page"] {
  color: #f0d19a;
  background-color: #0d2527;
}

.tag-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;

  margin: 0 0 1.5em;
  padding-bottom: 1em;

  border-bottom: 1px solid #ccad78;
}

.tag-filters:empty {
  display: none;
}

.tag-filter-label {
  margin-right: 3px;

  color: #695b4f;

  font-family: "Courier New", monospace;
  font-size: 0.72rem;
}

.moreposts {
  margin-top: 0.2em;
  font-size: 0.8em;
}

#nextprev {
  margin-top: 2em;
  padding-top: 1em;

  text-align: center;

  border-top: 1px solid #ccad78;
}

#footer {
  padding: 0 5% 10px;
  font-size: 0.8em;
}

noscript {
  display: block;
  margin-top: 1.5em;
  padding: 12px;

  font-family: "Courier New", monospace;
  font-size: 0.78rem;

  border: 1px dashed #695b4f;
}

@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}

@media (max-width: 600px) {
  #container {
    width: calc(100% - 28px);
    margin: 24px auto;
  }

  #header li {
    margin-right: 0.9em;
    font-size: 1rem;
  }

  .right,
  .left {
    float: none;
    margin-right: 0;
    margin-left: 0;
  }
}