* {
    margin: 0;
    padding: 0;
    font-family: ms pgothic;
    color: white;
}

a {
    color: white;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    font-style: italic;
    color: gray;
}

header .handprint {
    width: 15em;
    float: right;
    margin-right: 100px;
    filter: invert(1);
    background: white;
    -webkit-mask-image: url(https://files.catbox.moe/33ssnf.png);
    -webkit-mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: right center;
    user-select: none;
    rotate: 15deg;
}

header .sitemap {
    width: 300px;
    position: absolute;
    right: 12em;
    top: 12em;
}

main {
    padding: 20px;
}



summary:focus-visible {
    outline: 1px dotted gray
  }
  
  :root {
    --chevron-size: 5px
  }
  
  details {
    margin-top: 0;
    margin-bottom: 5px;
    user-select: none;
  }
  
  details>summary {
    cursor: pointer;
    display: inline;
    margin-bottom: 0;
    position: relative
  }
  
  details>summary:before {
    border: var(--chevron-size) solid transparent;
    border-left-color: gray;
    border-radius: 3px;
    content: "";
    position: absolute;
    right: 100%;
    top: calc(50% - var(--chevron-size));
  }
  
  details>summary::-webkit-details-marker,
  details>summary::marker {
    display: none
  }
  
  details[open]>summary:before {
    top: calc(50% - var(--chevron-size)/2);
    transform: rotate(45deg)
  }
  
  :root {
    --combobox-chevron-size: 4px
  }
  
  :root {
    --treeview-square-size: 8px;
    --treeview-spacing: 20px
  }
  
  ul.tree-view {
    display: block;
    font-family: ms pgothic;
    margin: 0;
    padding: 6px 6px 6px var(--treeview-spacing);
  }
  
  ul.tree-view li {
    list-style-type: none;
    margin-top: 10px;
    position: relative;
  }
  
  ul.tree-view a {
    text-decoration: none
  }
  
  ul.tree-view ul {
    margin-top: 4px;
    padding-left: var(--treeview-spacing)
  }
  
  ul.tree-view.has-container {
    border: 1px solid var(--button-border-color)
  }
  
  ul.tree-view.has-collapse-button details>summary::-webkit-details-marker,
  ul.tree-view.has-collapse-button details>summary::marker {
    display: none
  }
  
  ul.tree-view.has-collapse-button details>summary:before {
    background: linear-gradient(to bottom, var(--button-face) 45%, var(--button-shade-light));
    border: 1px solid gray;
    border-radius: 1px;
    color: white;
    content: "\002b";
    font-size: 8pt;
    font-weight: 700;
    height: var(--treeview-square-size);
    left: calc(var(--treeview-square-size)*2*-1);
    line-height: calc(var(--treeview-square-size) - 50% + var(--treeview-square-size)/2);
    margin: 0 auto;
    right: unset;
    text-align: center;
    top: calc(50% - var(--treeview-square-size)/2);
    width: var(--treeview-square-size);
    padding-top: 1.5px;
  }
  
  ul.tree-view.has-collapse-button details[open]>summary:before {
    content: "\2013";
    transform: none;
    margin-top: -2px;
  }
  
  ul.tree-view.has-connector ul {
    position: relative
  }
  
  ul.tree-view.has-connector ul:before {
    border-left: 1px dotted gray;
    content: "";
    height: calc(100% - var(--treeview-square-size));
    left: var(--treeview-square-size);
    position: absolute;
    top: 0
  }
  
  ul.tree-view.has-connector ul li:before {
    border-bottom: 1px dotted gray;
    content: "";
    position: absolute;
    right: calc(100% + var(--treeview-square-size)/4);
    top: var(--treeview-square-size);
    width: calc(var(--treeview-spacing)/2)
  }
  ul small {
      color: gray;
  }