#ProgressBarElement {
  border-top: 4px var(--bs-primary) solid;
  position: fixed;
  left: 0;
  top: 0;
  --TransitionWidthDuration: .4s;
  --TransitionLeftDuration: .8s;
  transition: width var(--TransitionWidthDuration), left var(--TransitionLeftDuration);
  z-index: 5;
}

#AppContainer {
  max-width: 650px;
}

.ripple-surface::before { transition: opacity 150ms ease-in,background-color 150ms ease-in; }

/* markdown styling */
#MarkdownContainer code.hljs {
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}

[writea='read.header.thumbnail'] {
  transition: height .3s;
}
[writea='read.header']:hover > [writea='read.header.thumbnail'] {
  height: 250px;
}

[writea='read.content'] {
  transition: opacity .2s;
  opacity: 1;
}

#MarkdownContainer img {
  max-width: 100%;
  border-radius: 12px;
}

blockquote {
  border-left: 3px solid var(--bs-primary);
  padding-left: 12px;
  font-style: italic;
}