:root {
  --contents-menu-width: 30vw;
}
html body {
  --pico-mark-background-color: cornsilk;
}

body>header {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: white;
  border-bottom: 1px solid gray;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
body>header>nav,
body>footer>nav {
  padding: 0 2rem;
}


body>main {
  min-height: 764px;
  display: flex;
  padding-top: 0;
  padding-bottom: 0;
}

/* aside */
body>main>aside {
  width: var(--contents-menu-width);
  background-color: ghostwhite;
  min-height: 90vh;
  border-right: 1px solid whitesmoke;
  padding-bottom: 2rem;
}
body>main>aside>nav {
  padding: 0.5rem 1rem 2rem 2rem;
  position: sticky;
  top: 3.5rem;
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
}
body>main>aside>nav .search-form {
  padding-bottom: 1rem;
}
body>main>aside>nav a {
  font-size: 0.9rem;
}
body>main>aside>nav a.selected {
  background-color: var(--pico-text-selection-color);
}

/* article */
body>main>article.content {
  padding-left: 2rem;
  width: calc(100vw - var(--contents-menu-width));
}


/* utilities */
.visible-if-portrait {
  display: none;
}
.hidden-if-portrait {
  display: display;
}


/* others */
body li {
  list-style: circle;
}
body table.tableblock  tbody tr:nth-child(odd) td {
  background-color: var(--pico-table-row-stripped-background-color);
}
body table.tableblock {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
article.content h2 {
  text-align: center;
  font-weight: lighter;
  padding-bottom: 0.8rem;
}
article.content h3 {
  border-bottom: 1px solid darkgray;
}
article.content .welcome-code code {
  line-height: 1;
}


/* .file-tree */
table.file-tree tr * {
  cursor: pointer;
}
table.file-tree tr th:nth-child(1) *,
table.file-tree tr td:nth-child(1) *{
  display: none;
}
table.file-tree tr th:not(:nth-child(2)) {
  padding: 0.5rem 0.2rem;
  text-align: center;
}
table.file-tree tr td,
table.file-tree tr td p {
  padding: 0;
  margin: 0;
  line-height: 0.9rem;
  font-family: monospace;
  font-size: 0.9rem;
}
table.file-tree tr td:nth-child(2) p {
  padding-right: 1rem;
}
table.file-tree tr td:not(:nth-child(2)) p {
  text-align: right;
}
table.file-tree tr td span {
  padding-right: 0.3rem;
  display: block;
}
table.file-tree tr td .zero {
  color: lightgray;
}
table.file-tree tr td .one {
  background-color: greenyellow;
}
table.file-tree tr td .more {
  background-color: limegreen;
}


/* toc */
div#toc {
  position: fixed;
  border: 1px solid;
  background: var(--pico-background-color);
  right: 0;
  top: 8rem;
  padding: 0 0.5rem;
  font-size: 0.9rem;
  z-index: 2;
}
div#toc #toctitle {
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
  color: var(--pico-primary);
}
div#toc .sectlevel1 {
  display: none;
}
div#toc .sectlevel1.open {
  display: block;
}

/* scene-assets */
.scene-assets {
  display: flex;
  gap: 0.1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.scene-assets h3 {
  flex: 0 0 100%;
  width: 100%;
}
.scene-assets .asset-image {
  display: inline-flex;
  height: 3rem;
}

/* scene-tree */
.scene-tree>ul {
  padding-left: 0.5rem;
}
.scene-tree li {
  list-style: none;
}
.scene-tree li .node-name {
  font-weight: bold;
  color: dimgray;
}
.scene-tree li .node-name:before {
  content: '■ '
}
.scene-tree li .node-type {
  font-style: italic;
  color: gray;
}
.scene-tree li .node-name.type-2d:before,
.scene-tree li .node-type.type-2d {
  color: cornflowerblue;
}
.scene-tree li .node-name.type-3d:before,
.scene-tree li .node-type.type-3d {
  color: lightcoral;
}
.scene-tree li .node-name.type-control:before,
.scene-tree li .node-type.type-control {
  color: limegreen;
}
.scene-tree li .node-name.type-other:before {
  color: gold;
}
.scene-tree li .node-type.type-other {
  color: goldenrod;
}

/* .imageblock.kroki */
.imageblock.kroki {
  margin-bottom: 1rem;
}


/* .signal-connection .title */
.signal-connection .title mark {
  background-color: aliceblue;
  color: blue;
}


/* table caption */
table.tableblock caption.title {
  text-align: left;
  font-style: italic;
}


/* .asset-image img */
.asset-image .content img {
  text-align: center;
  height: 100%;
  width: 100%;
  border: 1px solid lightgray;

  background: conic-gradient(
    rgba(128,128,128,0.5) 90deg,
    rgba(211,211,211,0.5) 90deg 180deg,
    rgba(128,128,128,0.5) 180deg 270deg,
    rgba(211,211,211,0.5) 270deg
  );

  background-repeat: repeat ;
  background-size: 60px 60px;
  background-position: top left;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.asset-image .title {
  background-color: white;
}


/* .node-property */
.node-property mark {
  background-color: lightgray;
}
.node-property.node-2d mark {
  background-color: lightskyblue;
}
.node-property.node-3d mark {
  background-color: pink;
}
.node-property.node-control mark {
  background-color: palegreen;
}
.node-property.node-other mark {
  background-color: yellow;
}
.node-property .imageblock .content {
  display: flex;
}


@media only screen and (max-width: 768px) {
  body>main>aside {
    width: 70vw;
    position: fixed;
    visibility: hidden;
    z-index: 3;
  }
  body>main>aside.open {
    visibility: visible;
  }

  body>main>article.content {
    width: 100vw;
  }

  body>main>aside>nav {
    top: 4.5rem;
  }

  .visible-if-portrait {
    display: block;
  }
  .hidden-if-portrait {
    display: none;
  }
}

body>footer {
  border-top: 1px solid darkgray;
}