.content {}

.content > :first-child {
  margin-top: 0;
}

.content > :last-child {
  margin-bottom: 0;
}

.content p {
  margin-top: 0;
  margin-bottom: 0;
}

.content > p,
.content > ul,
.content > ol {
  margin-top: 10px;
  margin-bottom: 10px;
}

.content img,
.content video,
.content audio {
  display: block;
  max-width: 100%;
  height: auto;
}

.content video {
  margin-inline: auto;
}

.content iframe {
  display: block;
  width: 100%;
  border: 0;
  background-color: #fff;
}

.content > blockquote {
  margin-left: 0;
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: var(--offset) calc(2 * var(--offset));
  border-radius: 0 6px 6px 0;
}

.content > blockquote::before {
  content: "";
  opacity:
    calc(
      0.1 * var(--is-light-theme-on) +
      0.4 * var(--is-dark-theme-on)
    );
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: var(--accent-color);
}

.content > blockquote::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background-color: var(--accent-color);
}

.content > blockquote > p + p {
  margin-block-start: 5px;
}

.content > p > kbd,
.content > ul > li > kbd,
.content > ol > li > kbd {
  font-family: "Spot Mono", monospace;
}

.content > img,
.content > video,
.content > audio,
.content > iframe,
.content > details,
.content > blockquote,
.content > table,
.content > .callout {
  margin-block: var(--offset);
}

.content .link {
  overflow-wrap: break-word;
}

@media (height <= 640px) {
  .content > iframe {
    max-height: calc(100vh - var(--header-height, 0) * 1px - 3em);
  }
}

@media (width >= 768px) {
  .content > p,
  .content > ul,
  .content > ol,
  .content > .details,
  .content > .callout {
    max-width: 81%;
  }
}

@media (width >= 1024px) {
  .content > p {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .content > p,
  .content > ul,
  .content > ol,
  .content > .details,
  .content > .callout {
    max-width: 87.5%;
  }
}

@media (width >= 1680px) {
  .content > p,
  .content > ul,
  .content > ol,
  .content > .details,
  .content > .callout {
    max-width: 100%;
  }
}
