main {
  max-width: 720px;
  margin: 8rem auto;
}

section:not(.footnotes) {
  margin: 2.4rem;
  padding: 1.6rem 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

summary {
  display: flex;
  align-items: start;
  outline: none;
  list-style: none;
  user-select: none;
  cursor: pointer;
  margin-bottom: 1.6rem;
}

summary > h1,
summary > h2,
summary > h3,
summary > h4,
summary > h5,
summary > h6 {
  display: inline-block;
  margin: 0;
}

details > *:not(summary) {
  margin-top: 0;
  margin-bottom: 1.6rem;
  margin-left: 2rem;
}

.details-marker::before {
  content: '▶︎';
  display: inline-block;
  margin-right: 0.5ch;
  flex-shrink: 0;
  transition: 0.3s;
}

details[open] > summary {
  margin-bottom: 0.4rem;
}

details[open] > summary .details-marker::before {
  transform: rotate(90deg);
  transform-origin: 40% 45% 0;
}

ul > li > p {
  display: inline;
}

ul > li.task-list-item {
  list-style-type: none;
}

ol > li > p {
  display: inline;
}

.table-of-contents {
  margin-top: 0.8rem;
  margin-bottom: 2.4rem;

  ul {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.navbar {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: white;

  .logo {
    height: 4.8rem;
    line-height: 4.8rem;
    font-size: 2.4rem;
  }

  .active {
    text-decoration: wavy underline;
  }
}

.post-item {
  display: block;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  margin-bottom: 0;
}

.post-title {
  font-size: 2.4rem;
  font-weight: bold;
}

.post-info {
  font-size: 1.4rem;
  display: flex;
  gap: 2.4rem;
  margin: 1.2rem 0;
  color: rgba(0, 0, 0, 0.5);
}

.post-comment {
  > .comment-title {
    font-size: 2rem;
    font-weight: bold;
  }

  > .comment-item {
    margin-top: 1.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .avatar {
      width: 2.4rem;
      height: 2.4rem;
    }
  }

  > .comment-none {
    margin: 2.4rem 0;
  }
}

.type-label {
  font-size: 1.4rem;
  margin-left: 4rem;
}

.type-cloud {
  margin: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  justify-content: center;
}

.pagination {
  margin-top: -1.6rem;
  margin-bottom: -0.8rem;

  .page-count {
    font-size: 1.5rem;
    height: 3.6rem;
    line-height: 3.6rem;
  }
}

.footer {
  font-size: 1.4rem;
}