body {
  background-color: #fff;
  font-family: "Noto Sans", "Inter", sans-serif;
  line-height: 170%;
}

.site-title {
  font-family: "Fira Mono", monospace;
}

.site-title a {
  text-decoration: none;
  color: inherit;
}

.site-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.page-container {
  margin: 0 auto;
  padding-top: 1em;
  padding-bottom: 4em;
  width: 70%;
  max-width: 650px;
}

/* Index styles. */

.index-container {
  margin-top: 2em;
}

.index-item-container {
  margin-top: 0.5em;
}

.post-index-link {
  text-decoration: none;
  color: inherit;
}
.post-index-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.post-index-date {
  font-family: "Fira Mono", monospace;
  color: #888;
}

.post-index-title {
  margin-left: 0.5em;
}

/* Post styles. */

.post-container {
  margin-top: 4em;
}

.post-publish-date {
  font-family: "Fira Mono", monospace;
  color: #888;
}

.post-container img {
  max-width: 100%;
  border-radius: 10px;
}

.post-title {
  font-weight: bold;
  font-size: 1.5em;
}

.post-content {
  margin-top: 2em;
}

/* Root styles */
.root-content {
  /* margin-top: 2em; */
  font-family: "Noto Sans";
}

.root-content a {
  text-decoration: none;
  color: #1e6fd2;
  font-weight: bold;
}

.root-content a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  background: rgb(255, 249, 160);
}

.timeline-item {
  margin-top: 1em;
  display: flex;
  flex-direction: row;
}

.timeline-item-date {
  flex: 1;
  font-family: "Fira Mono", monospace;
  font-weight: bold;
  /* width: 12em; */
  width: 200px;
  /* margin-right: 10px; */
}

.timeline-item-description {
  flex: 5;
  /* padding-left: 1em;; */
}

/* Styles for responsiveness for mobile. */
@media only screen and (max-width: 600px) {
  .page-container {
    width: 100%;
    margin: 0 auto;
    padding: 0.25em;
  }
}

@view-transition {
  navigation: auto;
}

.view-transition-animation {
  transition: all 0.1s ease;
}