@font-face {
    font-family: "Noto Sans";
    src: url("/NotoSans-VariableFont_wdth,wght.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url("/NotoSans-Italic-VariableFont_wdth,wght.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: italic;
    font-display: swap;
}

:root {
  --fonts-main: "Noto Sans", sans-serif;
}

h1 { font-family: var(--fonts-main); font-size: 0.875rem; text-align: center; color: #444; }
body { font-family: var(--fonts-main); font-size: 0.75rem; color: #444; }
pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace; }
table th { padding-top: 1em; }
table th {
  img {
    border: 1px solid #bbb;
    opacity: 0.7;
  }

  .syntax-pre {
    display: inline-block;
    border: 1px solid #bbb;
    width: 18px;
    height: 18px;

    &:before {
      content: "pre";
      font-size: 0.625rem;
      color: #666;
    }
  }
}
table td { background-color: #f5f5f5; height: 2em; vertical-align: middle;}
table td code { font-size: 1.2em; }
table td h1 { font-size: 1.8em; text-align: left; }
table td h2 { font-size: 1.4em; text-align: left; }
table td h3 { font-size: 1.2em; text-align: left; }

table.sample { border-collapse: collapse; border-spacing: 0; margin: 4px; }
table.sample th, table.sample td { border: solid 1px #bbb; padding: 4px; height: 1em; }

a, a:link, a:visited{ color: #169; text-decoration: none; }
a:hover, a:active{ color: #c61a1a; text-decoration: underline;}

.syntaxhl .mi { color: #0000DD; font-weight: bold }
.syntaxhl .nf { color: #0066BB; font-weight: bold }
.syntaxhl .k { color: #008800; font-weight: bold }
.syntaxhl .nb { color: #007020 }
.syntaxhl .s1 { background-color: #fff0f0 }

span.more_info { font-weight: normal; }