.byline {

font-family: var(--ui-font);
font-size: 0.8em;
line-height: 1.5em;
margin: 1.5em auto;
max-width: var(--content-width);

.avatar {
  background-color: var(--slate-500);
  border: none;
  border-radius: 50%;
  color: transparent;
  float: left;
  height: 48px;
  margin-right: 0.5em;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: 48px;

  &::before {
    content: "";
    border-radius: 50%;
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.35),
      inset 0 0 0 2px rgba(255, 255, 255, 0.1),
      inset 0 2px 0 0 rgba(255, 255, 255, 0.45),
      inset 0 -2px 0 0 rgba(255, 255, 255, 0.15),
      0 1px 3px 0 rgba(0, 0, 0, 0.12),
      0 1px 2px 0 rgba(0, 0, 0, 0.24);
    height: 100%;
    position: absolute;
    width: 100%;

    @media (prefers-color-scheme: dark) {
      box-shadow:
        inset 0 0 0 1px black,
        inset 0 0 0 2px rgba(255, 255, 255, 0.05),
        inset 0 2px 0 0 rgba(255, 255, 255, 0.22),
        inset 0 -2px 0 0 rgba(255, 255, 255, 0.07),
        0 1px 3px 0 rgba(0, 0, 0, 0.24),
        0 1px 2px 0 rgba(0, 0, 0, 0.48);
    }
  }
}

a {
  color: inherit;
  opacity: 1;
  text-decoration: none;

  &:hover {
    color: var(--accent-color);
    text-decoration: underline;
  }
}

.name {
  font-weight: 600;
  opacity: 0.8;
}

.description {
  opacity: 0.67;

  &::before {
    content: " | ";
  }
}

time,
.read-time {
  opacity: 0.8;
  font-size: 0.9em;
  line-height: 1em;
}

.read-time::before {
  display: inline-block;
  margin: 0 0.25em;
  content: " ยท ";
}

}