.markup {
  display: inline-block;
  /*white-space: pre-wrap;*/
}
.markup-italic {
  font-style: italic;
}
.markup-bold {
  font-weight: bold;
  color: var(--bright);
}
.markup-h1 {
  font-size: calc(var(--smart-res-unit) * 4.5);
}
.markup-h2 {
  font-size: calc(var(--smart-res-unit) * 3);
}
.markup-h1,
.markup-h2 {
  color: var(--bright);
  font-weight: lighter;
  /*font-style: italic;*/
  margin-top: calc(var(--smart-unit) * 5);
}
li {
  display: list-item; /*default*/
}
.markup-code,
.markup-code-block {
  transition: background-color 0.25s ease-in-out;
  font-family: monospace;
  background: var(--card-bg);
  border-radius: calc(0.5 * var(--smart-unit));
  box-shadow: var(--bs);
}
.markup-code {
  /*white-space: nowrap;*/
  padding: calc(var(--vh) * 0.5) 0.5vw;
  border-radius: calc(var(--smart-unit) * 0.5);
}
.markup-code-block {
  padding: calc(1 * var(--smart-unit));
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.markup-code-keyword {
  color: var(--color);
  font-style: italic;
}
.markup-code-operator {
  color: #555;
  font-weight: bold;
}
.markup-code-value {
  color: var(--color);
}
.markup-quote {
  font-style: italic;
  padding: calc(var(--vh) * 1) 2vw;
  padding-left: 2.5vw;
  border-left: 0.375vw solid var(--color);
  box-shadow: calc(var(--smart-unit) * 0.5) calc(var(--smart-unit) * 0.5)
    calc(var(--smart-unit) * 1) var(--black);
}
.markup-link {
  color: var(--color);
  transition: color 0.125s ease-in-out;
  text-decoration: underline;
  -webkit-tap-highlight-color: rgba(255, 143, 14, 0.25);
}
.markup-anchor {
  pointer-events: none;
  text-decoration: none;
  position: relative;
}
@media <<<yield consts.portrait>>> {
  .markup-anchor {
    top: calc(var(--smart-unit) * -10);
  }
}
.markup-link:hover {
  color: var(--bright);
  /*animation-name: link-hover;
  animation-duration: .25s;
  animation-timing-function: ease-in-out;*/
  text-decoration: underline;
}
.markup-block {
  padding: calc(1 * var(--smart-unit)) 10%;
}
.markup-object {
  width: 100%;
  height: auto;
  border-radius: calc(var(--smart-unit) * 0.5);
  box-shadow: var(--bs);
  /*min-height: 25vw;*/
}
.iframe-container {
  display: block;
  position: relative;
  width: 100%;
  padding-top: calc(9 / 16 * 100%); /*16:9 aspect ratio*/
  box-shadow: var(--bs);
}
.iframe-container > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/*Portrait*/
@media <<<yield consts.portrait>>> {
  .markup-block {
    padding: 1vw 5vw;
  }
  .markup-quote {
    border-left-width: 0.5vw;
  }
}
/*.markup *:not(li){
  display: inline-block;
}*/
.markup-inline {
  display: inline;
}
.markup-code-block * {
  display: inline-block;
  white-space: nowrap;
}
/*.markup .markup-h1, .markup .markup-h2{
  display: block;
}*/
/*.markup > span, .markup-h1, .markup-h2{
  display: inline-block;
}*/
/*.markup *:not(.markup-italic):not(.markup-bold):not(.markup-quote):not(.markup-h2):not(.markup-h1):not(.markup-link):not(.markup-code){
  width: 100%;
}*/
.markup-code-block,
.markup-object,
.markup-block,
.markup-span {
  width: 100%;
}
/*.markup *{
  white-space: pre-wrap;
}*/