html {
  background-color: #fbf1c7;
}

body {
  color: #3c3836;
  margin: 1em;
  font-size: 1rem;
}

pre,
code {
  color: #af3a03;
  overflow-x: auto;
}

.header-title {
  font-family: monospace;
}

body {
  font-family: sans-serif;
}

@media (max-width: 20rem) {
  body {
    font-size: calc(1rem + 0.00625 * (100vw - 20rem));
  }
}

th.timestamp {
  max-width: 10ch;
}

nav > ul {
  font-size: smaller;
}

@media (min-width: 40rem) {
  body {
    padding: 1rem 16%;
  }

  th.timestamp {
    width: 22ch;
    max-width: 19ch;
  }

  nav > ul {
    font-size: initial;
  }
}

a,
a > code {
  color: #076678 !important;
  text-decoration: none;
}

a:hover {
  text-decoration: underline dotted;
}

a.active {
  text-decoration: underline;
}

header > h1 {
  margin-bottom: 0.05rem;
}

nav {
  padding-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

nav > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 1.3rem;
}

th {
  background-color: #076678;
  color: #fbf1c7;
}

tr:nth-child(odd) {
  background-color: #ebdbb2;
}

table {
  border-collapse: collapse;
}

td,
tr,
th {
  padding: 0.2048rem;
  border: 1px solid #282828;
}

hr {
  border: 0;
  border-top: 1px solid #282828;
}

.post-content {
  border: 1px solid #282828;
  background-color: #f9f5d7;
  padding: 0.5rem;
  word-wrap: break-word;
  overflow-x: auto;
  text-align: justify;
  font-family: "Palatino Linotype", serif;

  /* Inspired by the "External Link Icon" from the OS Dev Wiki */
  a[href^="http"] {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Eexternal%20link%3C%2Ftitle%3E%3Cpath%20fill%3D%22%23076678%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11%201H6l2%202%20.3.3-4%204%20.6.7%204-4H9l2%202V1ZM2%202h2v1H2v7h7V8h1v2a1%201%200%200%201-1%201H2a1%201%200%200%201-1-1V3a1%201%200%200%201%201-1Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
  }
}

img {
  max-width: 100%;
}

p {
  margin: 0rem 0rem 0.5rem 0rem;
}

p:not(:first-child) {
  margin: 1rem 0rem 0.5rem 0rem;
}

.post-metadata {
  font-size: small;
  color: #928374;
}

.messages {
  border: 1px solid #282828;
  background-color: #ebdbb2;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

.lcat-l-letter {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    color: #fbf1c7;
    background-color: #282828;
  }

  50% {
    color: #282828;
    background-color: #fbf1c7;
  }

  70% {
    color: #fbf1c7;
    background-color: #458588;
  }

  80% {
    color: #fbf1c7;
    background-color: #79740e;
  }

  90% {
    color: #fbf1c7;
    background-color: #cc241d;
  }

  100% {
    color: #fbf1c7;
    background-color: #282828;
  }
}

.giscus {
  padding: 0.5rem;
  margin-top: 1rem;
  width: inherit;
}

.giscus-frame {
  width: 100%;
}