@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/electrolize/v18/cIf5Ma1dtE0zSiGSiED7AXEBuI8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC53FwrK3iLTcvneQg7B5iqpJlhKnPCkaL5UUM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_fjbvMwCp504jAa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body{
  color-scheme: light dark;
  margin: 0;
  --main-bg: light-dark(#EEEEEE,#111111);
  --main-text: light-dark(#111111,#EEEEEE);
  --link-color: light-dark(darkblue,steelblue);
  --secondary-background: #151515;
  --secondary-color: #EEEEEE;
  background: var(--main-bg);
  color: var(--main-text);
  font-size: 16px;
  font-family: Inter;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  visibility: visible;
  display:flex;
  flex-direction: column;
  min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Electrolize";
  font-weight: 400;
  font-style: normal;
  margin-bottom: 0;
}
p{
  margin-top: 0;
}
a{
  color: var(--link-color)
}
header, footer{
  width:100%;
  margin: 0;
  padding: 0;
  background-color: var(--secondary-background);
  display: flex;
  align-items: flex-end;
}
footer{
  justify-content:center;
  margin-top: 1.5rem;
  padding-top: 5px;
}
.headeritem{
  color: var(--secondary-color);
  margin: 0 1% 3px 1%;
}
.footeritem{
  color: var(--secondary-color);
  margin: 0 1% 3px 1%;
  text-decoration: none;
}
.footeritem span{
  text-decoration: underline;
}
.logo {
  font-size: 1.5rem;
  text-align: center;
  margin: 0 1% 0 5%;
}
.logo span:nth-child(odd) {
  color: #111111;
  padding: 100% 0 0 0;
  background-color: #EEEEEE;
}
.logo span:nth-child(even) {
  color: #EEEEEE;
  padding: 100% 0 0 0;
  background-color: #111111;
}
#content{
  margin: auto;
  max-width: min(80%,1000px);
  min-width: 300px;
  line-height: 1.6;
  flex:1;
}
#theme_select{
  border: none;
  text-align: center;
  align-self: center;
  margin-left: auto;
  margin-right: 2%;
}
table {
  border: 1px solid #ddd;
  border-collapse: collapse;
}
td,th {
  border: 1px solid #ddd;
  padding: 0 5px 0 5px;
}
pre{
  overflow-x: scroll;
  margin-top:0;
}
.pre_code{
  background-color: var(--secondary-background);
  color: var(--secondary-color);
  font-family: "Electrolize";
  font-weight: 400;
  font-style: normal;
  padding-left: 1rem;
  display: flex;
  align-items: flex-end;
}
.copy_code_div{
  margin-right: 1rem;
  margin-left: auto;
}
.copy_code_button{
  background-color: #222222;
  color: var(--secondary-color);
  font-family: "Electrolize";
  font-weight: 400;
  font-style: italic;
  height:2rem;
  width: 4rem;
  border:none;
  margin:0;
}
.copy_code_button:hover{
  background-color: #333333;
}
.copy_code_button:active{
  background-color: #444444;
}
.alert{
  border-left: solid var(--alert-color);
  margin-left:0;
  padding-left:1rem;
  .alert-heading::before{
    content: '';
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display:inline-block;
    mask: var(--alert-icon);
    background: var(--alert-color);
    transform: translate(0px,2px);
  }
}
.alert-warning{
  --alert-color: #d29922;
  --alert-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16"> <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/> <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/> </svg>');
}
.alert-note{
  --alert-color: #1f6feb;
  --alert-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/> <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/> </svg>');
}
.alert-tip{
  --alert-color: #238636;
  --alert-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16"> <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/> </svg>')
}
.alert-important{
  --alert-color: #ab7df8;
  --alert-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-square" viewBox="0 0 16 16"> <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/> </svg>')
}
.alert-caution{
  --alert-color: #f85149;
  --alert-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-octagon" viewBox="0 0 16 16"> <path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1z"/> <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/> </svg>')
}
img {
    max-width: 100%;
}