1body {
  2    display: flex;
  3    min-height: 100vh;
  4}
  5
  6.layout {
  7    display: flex;
  8    width: 100%;
  9}
 10
 11.sidebar {
 12    flex: 0 0 16%;
 13    padding: 20px;
 14    align-self: flex-start;
 15}
 16
 17.sidebar-title {
 18    display: block;
 19    border-bottom: 1px dotted #808080;
 20    margin-bottom: 0.25em;
 21    font-size: 110%;
 22    font-weight: 700;
 23}
 24.sidebar-subtitle {
 25    color: #676767;
 26    font-size: 90%;
 27    margin-bottom: 1em;
 28}
 29
 30.content {
 31    flex: 0 0 74%;
 32    padding: 20px;
 33    margin-bottom: 20px;
 34    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 35    background: var(--bg);
 36}
 37
 38.side-nav {
 39    list-style: none;
 40    margin: 0;
 41    padding: 0;
 42}
 43.side-tree,
 44.side-tree ul {
 45    list-style: none;
 46    margin: 0;
 47    padding-left: 0;
 48}
 49.side-tree ul {
 50    margin-left: 0.8em;
 51}
 52.side-tree summary {
 53    cursor: pointer;
 54    user-select: none;
 55}
 56.side-tree summary::marker {
 57    color: #676767;
 58}
 59.side-tree .dir {
 60    margin-top: 0.3em;
 61}
 62
 63.side-nav li {
 64    margin-top: 0.3em;
 65}
 66
 67.side-nav .d1 { margin-left: 0.5em; }
 68.side-nav .d2 { margin-left: 1em; }
 69.side-nav .d3 { margin-left: 1.5em; }
 70.side-nav .d4 { margin-left: 2em; }
 71
 72.side-nav a {
 73    text-decoration: none;
 74}
 75
 76.side-nav a.thisPage {
 77    font-weight: 700;
 78    text-decoration: underline;
 79}
 80
 81.sidebar-powered {
 82    margin-top: 1.25em;
 83    padding-top: 0.75em;
 84    border-top: 1px dotted #808080;
 85    color: #676767;
 86    font-size: 90%;
 87}
 88
 89@media (max-width: 900px) {
 90    body, .layout {
 91        flex-direction: column;
 92    }
 93
 94    .sidebar,
 95    .content {
 96        flex: 0 0 auto;
 97        width: 100%;
 98    }
 99
100    .content {
101        box-shadow: none;
102        margin-bottom: 0;
103    }
104}