/*
    Blog Styles

    bl -> blog list
    bp -> blog page
 */

nav.pagination {
  & > span {
    color: var(--code);
  }

  & > a {
    color: var(--accent-hover);
    transition: color var(--glow-duration);

    &:is(:hover, :active, :focus-visible) {
      color: var(--accent);
    }
  }
}

@media (max-width: 480px) {
  body:has(.bp) img#watermelon {
    opacity: 50%;
    top: 4rem;
  }
}

a.bl.rss {
  color: var(--code);
  transition: filter var(--glow-duration);

  &:is(:hover, :active, :focus-visible) {
    filter: drop-shadow(0 0 0.76px var(--code));
  }

  & > svg:is(:hover, :active, :focus-visible) {
    --glow: var(--code);
    filter: none;
  }
}

ul.pointless.bl {
  list-style-type: disc;

  & > li {
    display: list-item;

    & > a > span {
      font-family: monospace;
      font-size: small;
      opacity: 0.5;
    }
  }
}

section {
  &.bl {
    padding-inline: 1em;
  }

  &.bp {
    h2 {
      font-size: 1.35em;
    }

    pre:has(code) {
      overflow-x: auto;
      white-space: pre;
      font-size: medium;
      padding: 0.42em;
    }
  }
}

img {
  width: 100%;
  object-fit: contain !important;
}

@media (min-width: 480px) {
  section {
    &.bl {
      max-width: fit-content;
    }
    &.bp {
      max-width: 50vw;
      max-width: 50dvw;
    }
  }
}