.fira-mono-regular {
  font-family: "Fira Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.fira-mono-medium {
  font-family: "Fira Mono", monospace;
  font-weight: 500;
  font-style: normal;
}

.fira-mono-bold {
  font-family: "Fira Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

:root {
  --night: #171614;
  --sand: #b2ad9e;
  --plum: #9E4770;
  --asparagus: #87a878;
  --maple: #d64933;
  --savoy: #6369d1;
  --gamboge: #ec9706;

  --font-family: "Fira Mono", monospace;
  --font-size-base: 1.2em;
  --line-height-base: 1.6;
}

nav a {
  color: var(--sand);
}

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

html {
  color: var(--sand);
  background-color: var(--night);

  font-family: var(--font-family);
  font-size: var(--font-size-base);

  display: flex;
  flex-direction: row;
  justify-content: center;
}

body {
  width: 80%;
  text-align: left;
}

b, strong {
  color: var(--maple);
}

i, em {
  color: var(--savoy);
}

.highlight {
  color: var(--gamboge);
  padding: 2px 4px;
  border-radius: 3px;
}

code {
  background-color: var(--plum);
  font-family: "Mono Fira", monospace;
  padding: 2px 4px;
  border-radius: 3px;
}

.site-title {
  font-size: 2.5em;
  margin-bottom: 10px;
  text-align: align;
  font-family: "Mono Fira", monospace;
  color: var(--asparagus);
  padding: 2px 4px;
  border-radius: 10px;
}

.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 75px;
  object-fit: cover;
  object-position: center;
  border: 3px solid var(--asparagus);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.profile-pic:hover {
  transform: scale(1.05);
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin-bottom: 20px;
}

.post {
  color: var(--sand);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.8em;
}

.book-post {
  color: var(--sand);
  background-color: #0f0f0f;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.8em;
}

.index {
  font-size: 0.8em;
  margin: 0.25rem;
}

.contents {
  font-size: 1em;
  margin-top: .25rem;
  margin-bottom: -1.25rem;
}

.contents-hr {
  margin: 1rem;
}

footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer h6 {
  margin: 0.25rem;
}

footer hr {
  width: 100%;
}