#FlexContainer {
  display: flex;
  max-width: 1450px;
  margin: auto;
  flex-wrap: wrap;
}

#TOCBox {
  flex-basis: 300px;
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 450px;
}

#MainBox {
  flex-basis: 650px;
  flex-grow: 4;
  flex-shrink: 3;
  max-width: 1000px;
}

#GlobalFooter {
  border-top: #999 2px solid;
  max-width: 1450px;
  margin: auto;
}

#GlobalFooter h1 {
  text-align: right;
}

#LangSelector ul {
  text-align: right;
}

#TOCBox > ul, #MenuBox ul, #LangSelector ul {
  padding: 0;
  list-style-type: none;
}

#TOCBox, #MenuBox {
  padding: 1.2em;
}

#TOCBox li[area-current] {
  padding-left: 1.5em;
  border-left: 3px solid;
  color: red;
}

#LangSelector li {
  display: inline-block;
}

#MainBox article {
  text-wrap: pretty;
  word-wrap: break-word;
}

#TOCBox, #MenuBox, #LangSelector {
  display: none;
}

div[data-caption]:before {
  display: block;
  content: attr(data-caption);
}

#UpdateDate {
  text-align: right;
  font-size: 90%;
}

#MobileMenu, #MobileMenuBtn {
  display: none;
}

#MenuContent {
  display: none;
}

.menu_content_div {
  display: none;
}

.article_category {
  list-style-type: none;
}

.article_category li {
  display: inline-block;
  cursor: pointer;
  margin-inline-end: 1.5em;
}

ul.menu_content_ul {
  list-style: none;
}

@media screen {
  #GlobalHeader a {
    color: inherit;
    text-decoration: none;
  }

  #TOCBox, #MenuBox, #LangSelector {
    display: unset;
  }

  #TOCBox li, #MenuBox li {
    display: block;
    line-height: 2;
  }

  #MainBox {
    padding: 0.35em;
  }

  /* numberSource */
  pre.numberSource code {
    counter-reset: source-line 0;
  }
  pre.numberSource code > span {
    position: relative;
    left: -4em;
    counter-increment: source-line;
  }
  pre.numberSource code > span > a:first-child::before {
    content: counter(source-line);
    position: relative;
    left: -1em;
    text-align: right;
    vertical-align: baseline;
    border: none;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px;
    width: 4em;
    color: #999;
  }
  pre.numberSource {
    margin-left: 3em;
    border-left: 1px solid #999;
    padding-left: 4px;
  }
  pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }

  article > pre code {
    max-height: 20em;
    overflow: auto;
    display: block;
    padding: 1.25em;
  }

  body[lang=en] a[rel=external]:after {
    content: '(external link)';
    font-size: 70%;
    vertical-align: super;
  }
  body[lang=ja] a[rel=external]:after {
    content: '(外部リンク)';
    font-size: 70%;
    vertical-align: super;
  }
}

@media screen and (prefers-color-scheme: light) {
  body {
    color: #333;
  }

  a:hover {
    color: #eb34d9;
  }

  a {
    color: #0a44e4;
  }

  p code, table code, ul code, ol code {
    color: #f03f28;
  }

  em, strong {
    color: #ff497a;
  }

  #GlobalHeader {
    border-bottom: solid 2px #0d509e;
  }

  #CategoryHeader {
    background-color: #145583;
    color: #fff;
  }

  #CategoryHeader > ul {
    margin: 0;
    padding: 0.35em;
  }

  #TOCBox {
    border: #bcd5fc 1px solid;
  }

  #LangSelector ul {
    border-top: #b9d7ec 3px double;
    border-bottom: #b9d7ec 3px double;
  }

  #MenuBox a[area-current] {
    background-color: #ffff90;
    color: #031a34;
  }

  div[data-caption]:before {
    background-color: #a9cbf1;
    color: #000;
  }

  article div.sourceCode, article > pre code {
    border: 1px solid #9484ed;
    background-color: #eff1f5;
  }

  article div.sourceCode code, article > pre code {
    color: #4c4f69;
  }

  /********** Source Code **********/
  /* Catppuccin Latte */
  pre.numberSource code > span > a:first-child::before {
    color: #7c7f93;
  }
  code span.al { color: #fe640b; font-weight: bold; } /* Alert */
  code span.an { color: #df8e1d; font-weight: bold; font-style: italic; } /* Annotation */
  code span.at { color: #df8e1d; } /* Attribute */
  code span.bn { color: #fe640b; } /* BaseN */
  code span.bu { color: #d20f39; } /* BuiltIn */
  code span.cf { color: #7c7f93; font-weight: bold; } /* ControlFlow */
  code span.ch { color: #40a02b; } /* Char */
  code span.cn { color: #fe640b; } /* Constant */
  code span.co { color: #9399b2; font-style: italic; } /* Comment */
  code span.cv { color: #8c8fa1; font-weight: bold; font-style: italic; } /* CommentVar */
  code span.do { color: #9399b2; font-style: italic; } /* Documentation */
  code span.dt { color: #df8e1d; } /* DataType */
  code span.dv { color: #fe640b; } /* DecVal */
  code span.er { color: #d20f39; font-weight: bold; } /* Error */
  code span.ex { color: #7c7f93; } /* Extension */
  code span.fl { color: #fe640b; } /* Float */
  code span.fu { color: #1e66f5; } /* Function */
  code span.im { color: #8839ef; font-weight: bold; } /* Import */
  code span.in { color: #179299; font-weight: bold; font-style: italic; } /* Information */
  code span.kw { color: #8839ef; font-weight: bold; } /* Keyword */
  code span.op { color: #179299; } /* Operator */
  code span.ot { color: #9399b2; } /* Other */
  code span.pp { color: #df8e1d; } /* Preprocessor */
  code span.sc { color: #d20f39; } /* SpecialChar */
  code span.ss { color: #40a02b; } /* SpecialString */
  code span.st { color: #40a02b; } /* String */
  code span.va { color: #eba0ac; } /* Variable */
  code span.vs { color: #40a02b; } /* VerbatimString */
  code span.wa { color: #fe640b; font-weight: bold; font-style: italic; } /* Warning */
}

@media screen and (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #1b1b1b;
  }

  a {
    color: #a6c4f9;
  }

  p code {
    color: #fbbe90;
  }

  em, strong {
    color: #ffaac0;
  }

  #TOCBox {
    border: #4c52c3 1px solid;
  }

  #LangSelector ul {
    border-top: #a36039 3px double;
    border-bottom: #a36039 3px double;
  }

  #MenuBox a[area-current] {
    background-color: #e8e8f7;
    color: #0d509e;
  }

  #GlobalHeader, #CategoryHeader, #MenuContent {
    border-bottom: solid 2px #a4c8f0;
  }

  div[data-caption]:before {
    background-color: #993240;
    color: #fff;
  }

  article div.sourceCode, article > pre code {
    border: 1px solid #c75d4a;
    background-color: #1e1e2e;
  }

  article div.sourceCode code, article > pre code {
    color: #cdd6f4;
    white-space: pre-wrap;
  }

  /********** Source Code **********/
  /* Catppuccin Mocha */
  pre.numberSource code > span > a:first-child::before {
    color: #7f849c;
  }
  code span.al { color: #fab387; font-weight: bold; } /* Alert */
  code span.an { color: #f9e2af; font-weight: bold; font-style: italic; } /* Annotation */
  code span.at { color: #f9e2af; } /* Attribute */
  code span.bn { color: #fab387; } /* BaseN */
  code span.bu { color: #f38ba8; } /* BuiltIn */
  code span.cf { color: #7f849c; font-weight: bold; } /* ControlFlow */
  code span.ch { color: #a6e3a1; } /* Char */
  code span.cn { color: #fab387; } /* Constant */
  code span.co { color: #9399b2; font-style: italic; } /* Comment */
  code span.cv { color: #a6adc8; font-weight: bold; font-style: italic; } /* CommentVar */
  code span.do { color: #9399b2; font-style: italic; } /* Documentation */
  code span.dt { color: #f9e2af; } /* DataType */
  code span.dv { color: #fab387; } /* DecVal */
  code span.er { color: #f38ba8; font-weight: bold; } /* Error */
  code span.ex { color: #7f849c; } /* Extension */
  code span.fl { color: #fab387; } /* Float */
  code span.fu { color: #89b4fa; } /* Function */
  code span.im { color: #cba6f7; font-weight: bold; } /* Import */
  code span.in { color: #94e2d5; font-weight: bold; font-style: italic; } /* Information */
  code span.kw { color: #cba6f7; font-weight: bold; } /* Keyword */
  code span.op { color: #89dceb; } /* Operator */
  code span.ot { color: #9399b2; } /* Other */
  code span.pp { color: #f9e2af; } /* Preprocessor */
  code span.sc { color: #f38ba8; } /* SpecialChar */
  code span.ss { color: #a6e3a1; } /* SpecialString */
  code span.st { color: #a6e3a1; } /* String */
  code span.va { color: #eba0ac; } /* Variable */
  code span.vs { color: #a6e3a1; } /* VerbatimString */
  code span.wa { color: #fab387; font-weight: bold; font-style: italic; } /* Warning */
}

table {
  max-width: 100%;
}

td {
  border-top: #999 solid 1px;
  border-bottom: #999 solid 1px;
}

tbody {
  border-bottom: #ccc solid 2px;
}

article img {
  max-width: 100%;
  max-height: 75vh;
}

article table {
  max-width: 100%;
}

table td {
  overflow-wrap: anywhere;
}

@media screen and (max-width: 820px) {
  #MobileMenu {
    position: fixed;
    z-index: 5000;
    top: 0px;
    left: 0px;
    height: 100dvh;
    width: 100dvw;
    background-color: #000000d6;
    color: #ffffff;
    overflow: auto;
  }

  #MobileMenuBtn {
    display: block;
    position: fixed;
    bottom: 5px;
    right: 5px;
  }

  #CategoryHeader {
    display: none;
  }

  #GlobalFooter {
    margin-block-end: 60px;
  }
}