body {
  background: #fff;
  margin: 0;
  padding: 30px;
  -webkit-font-smoothing: antialiased;
  font-family: Menlo, Consolas, monospace;
}

main {
  max-width: 920px;
}

header {
  display: flex;
  justify-content: space-between;
}

#toggle {
  display: none;
  cursor: pointer;
}

#toggle:before {
  display: inline-block;
  content: url("data:image/svg+xml; utf8, <svg height='24px' version='1.1' viewBox='0 0 24 24' width='24px' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd' stroke='none' stroke-width='1'><g transform='translate(-431.000000, -479.000000)'><g transform='translate(215.000000, 119.000000)'/><path d='M432,480 L432,486 L438,486 L438,480 L432,480 Z M440,480 L440,486 L446,486 L446,480 L440,480 Z M448,480 L448,486 L454,486 L454,480 L448,480 Z M449,481 L449,485 L453,485 L453,481 L449,481 Z M441,481 L441,485 L445,485 L445,481 L441,481 Z M433,481 L433,485 L437,485 L437,481 L433,481 Z M432,488 L432,494 L438,494 L438,488 L432,488 Z M440,488 L440,494 L446,494 L446,488 L440,488 Z M448,488 L448,494 L454,494 L454,488 L448,488 Z M449,489 L449,493 L453,493 L453,489 L449,489 Z M441,489 L441,493 L445,493 L445,489 L441,489 Z M433,489 L433,493 L437,493 L437,489 L433,489 Z M432,496 L432,502 L438,502 L438,496 L432,496 Z M440,496 L440,502 L446,502 L446,496 L440,496 Z M448,496 L448,502 L454,502 L454,496 L448,496 Z M449,497 L449,501 L453,501 L453,497 L449,497 Z M441,497 L441,501 L445,501 L445,497 L441,497 Z M433,497 L433,501 L437,501 L437,497 L433,497 Z' fill='#000000'/></g></g></svg>");
}

#toggle.single-column:before {
  content: url("data:image/svg+xml; utf8, <svg height='24px' viewBox='0 0 24 24' width='24px' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd' id='miu' stroke='none' stroke-width='1'><g transform='translate(-359.000000, -479.000000)'><g transform='translate(215.000000, 119.000000)'/><path d='M360.577138,485 C360.258394,485 360,485.221932 360,485.5 C360,485.776142 360.262396,486 360.577138,486 L381.422862,486 C381.741606,486 382,485.778068 382,485.5 C382,485.223858 381.737604,485 381.422862,485 L360.577138,485 L360.577138,485 Z M360.577138,490 C360.258394,490 360,490.221932 360,490.5 C360,490.776142 360.262396,491 360.577138,491 L381.422862,491 C381.741606,491 382,490.778068 382,490.5 C382,490.223858 381.737604,490 381.422862,490 L360.577138,490 L360.577138,490 Z M360.577138,495 C360.258394,495 360,495.221932 360,495.5 C360,495.776142 360.262396,496 360.577138,496 L381.422862,496 C381.741606,496 382,495.778068 382,495.5 C382,495.223858 381.737604,495 381.422862,495 L360.577138,495 L360.577138,495 Z' fill='#000000'/></g></g></svg>");
}

a {
  color: #1A00F2;
  text-decoration: none;
}

h1 {
  font-size: 18px;
  font-weight: 500;
  margin-top: 0;
  color: #000;
  font-family: -apple-system, Helvetica;
  display: flex;
}

h1 a {
  color: inherit;
  font-weight: bold;
  border-bottom: 1px dashed transparent;
}

h1 a::after {
  content: '/';
}

h1 a:hover {
  color: #7d7d7d;
}

h1 i {
  font-style: normal;
}

ul {
  margin: 0;
  padding: 20px 0 0 0;
}

ul.single-column {
  flex-direction: column;
}

ul li {
  list-style: none;
  padding: 10px 0;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

ul li i {
  color: #9B9B9B;
  font-size: 11px;
  display: block;
  font-style: normal;
  white-space: nowrap;
  padding-left: 15px;
}

ul a {
  color: #1A00F2;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}

/* file-icon – svg inlined here, but it should also be possible to separate out. */
ul a::before {
  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 64 64'><g fill='transparent' stroke='currentColor' stroke-miterlimit='10'><path stroke-width='4' d='M50.46 56H13.54V8h22.31a4.38 4.38 0 0 1 3.1 1.28l10.23 10.24a4.38 4.38 0 0 1 1.28 3.1z'/><path stroke-width='2' d='M35.29 8.31v14.72h14.06'/></g></svg>");
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

ul a:hover {
  color: #000;
}

ul a[class=''] + i {
  display: none;
}

/* folder-icon */
ul a[class='']::before {
  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 64 64'><path fill='transparent' stroke='currentColor' stroke-width='4' stroke-miterlimit='10' d='M56 53.71H8.17L8 21.06a2.13 2.13 0 0 1 2.13-2.13h2.33l2.13-4.28A4.78 4.78 0 0 1 18.87 12h9.65a4.78 4.78 0 0 1 4.28 2.65l2.13 4.28h17.36a3.55 3.55 0 0 1 3.55 3.55z'/></svg>");
}

/* image-icon */
ul a[class='gif']::before,
ul a[class='jpg']::before,
ul a[class='png']::before,
ul a[class='svg']::before {
  content: url("data:image/svg+xml; utf8, <svg width='16' height='16' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='68' height='68' rx='5' ry='5'/><circle cx='24' cy='24' r='8'/><path d='M73 49L59 34 37 52M53 72L27 42 7 58'/></svg>");
  width: 16px;
}

@media (min-width: 768px) {
  #toggle {
    display: inline-block;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
  }

  ul li {
    width: 230px;
    padding-right: 20px;
  }

  ul.single-column li {
    width: auto;
  }
}

@media (min-width: 992px) {
  body {
    padding: 45px;
  }

  h1 {
    font-size: 15px;
  }

  ul li {
    font-size: 13px;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  ul li:hover i {
    opacity: 1;
  }

  ul li i {
    font-size: 10px;
    opacity: 0;
    margin-left: 10px;
    margin-top: 3px;
    padding-left: 0;
  }
}