h1,
h2,
h3,
h4,
a,
p {
  transition: color .5s,background-color .5s
}

html {
  background-color: var(--bg-html);
  color: var(--fc);
  line-height: 1.6;
  letter-spacing: .2px;
}

body {
  overflow-y: scroll;
}

svg {
  height: inherit;
  width: inherit;
}

img {
  object-fit: cover;
  vertical-align: middle;
}

strong {
  font-weight: 600;
}

blockquote {
  background-color: var(--bg-highlight);
  color: var(--fc-intense);
  position: relative;

  &::before {
    border-left: 0.4rem solid var(--bg-primary);
    bottom: 0;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
  }
}

kbd {
  background-color: var(--h-background);
  border: 1px solid var(--br-normal);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--br-normal);
  box-sizing: border-box;
  display: inline-block;
  font-size: 0.9rem;
  line-height: 10px;
  padding: 5px;
}

iframe {
  border-radius: inherit;
}

::selection {
  background: var(--bg-soft);
}

@media (min-width: 500px) {
  .sticky {
    --bg-scrollbar-track: transparent;
    --bg-scrollbar-thumb: var(--bg-highlight);
  }

  ::-webkit-scrollbar {
    background: var(--bg-scrollbar-track);
    height: 15px;
    width: 15px;
  }

  pre::-webkit-scrollbar:horizontal {
    @apply md:rounded-b-md;
  }

  ::-webkit-scrollbar-thumb {
    @apply rounded-full;

    background-clip: content-box;
    background-color: var(--bg-scrollbar-thumb);
    border: 3px solid transparent;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--bg-scrollbar-thumb-hover);
  }
}
