* {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

ul.parent {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  color: #333;
}

ul, ul ul, ul.parent, ul, ul > li {
  list-style-type: none !important;
}

ul {
  background-color: #fff;
  color: #333;
  margin-left: 0.3em;
  padding-left: 0.5em;
}

ul > li {
  margin-bottom: 0.5em;
  margin-top: 0.25em;
}

details summary {
  cursor: pointer;
  color: #007bff;
  font-weight: bold;
  font-size: 1.25em;
}

details summary::-webkit-details-marker {
  color: #007bff;
}

details[open] > summary::-webkit-details-marker {
  color: #0056b3;
}

details[open] > summary {
  color: #0056b3;
}

details[open] > summary:hover {
  color: #003366;
}

@media (prefers-color-scheme: dark) {
  ul.parent {
    background-color: #121212;
    color: #f4f4f4;
  }

  ul {
    background-color: #1e1e1e;
    color: #f4f4f4;
    border-left: 3px solid #444;
  }

  ul > li {
    color: #f4f4f4;
  }

  details summary {
    color: #4d8cde;
  }

  details summary::-webkit-details-marker {
    color: #4d8cde;
  }

  details[open] > summary {
    color: #3a73a2;
  }

  details[open] > summary:hover {
    color: #005f87;
  }
}