body {
  background-color: #000;
  color: #AAA;
}
a       { color: #C5C; }
a:hover { color: #C9F; }
a:visited { color: #55F; }
a:visited:hover { color: #99F; }
.section-title {
  background-image: linear-gradient(#000, #006, #000);
}
.item {
  background-image: linear-gradient(#000, #200, #000, #030, #000);
}

.sub-item {
  background-color: #000;
}
.icon-holder {
  background-color: #FFF;
  border-color: #CCC;
}

.page-title {
  display: inline; font-size: 52px;
}
.section-title {
  font-size: 36px;
  font-weight: bold;
  padding: 0.7ex;
}
.section-title .icon-holder {
  font-size: 30px;
}
.item-title {
  font-size: 24px;
  display: block;
  max-height: 100%;
  margin-bottom: 0.3ex;
}
.item-title .icon-holder {
  font-size: 20px;
}
.icon-holder {
  display: inline-block;
  width: 2.7ex;
  height: 2.7ex;
  background: auto;
  vertical-align: top;
  border-width: 0.2ex;
  border-style: solid;
}
.items {
  display: grid;
  grid-gap: 2ex 1em;
  grid-template-columns: repeat(auto-fill,minmax(20em,max-content));
  grid-auto-rows: 8ex;
}
.item {
  display: inline-grid;
}
img.icon {
  display: block;
  object-fit: contain;
  height: 2.7ex;
  width: 2.7ex;
}
.sub-item {
  padding-top: 0.5ex;
  padding-bottom: 0.5ex;
}
.sub-item::before {
  margin-left: 0.2em; 
  content: '[';
  margin-right: 0.2em; 
}
.sub-item::after {
  margin-left: 0.2em; 
  content: ']';
  margin-right: 0.2em; 
}