:root {
  --white: #fff;
  --light: #ddd;
  --gold: #fe6;
  --mid:   #888;
  --dark:  #222;
  --deep:  #1c1c1c;
  --black: #000;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--light);
  background-color: var(--dark);

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

main {
  padding: 1em;
  box-shadow: 3px 3px 10px var(--black);
  max-width: 420px;

  footer {
    color: var(--mid);
  }

  div.overview,
  ul {
    padding: 1em;
    border: 1px inset var(--mid);
    background-color: var(--deep);
    text-align: left;
  }

  div.overview p:first-child {
    font-size: 1.4em;
    font-weight: bold;
  }

  ul {
    list-style-type: none;
    padding: 0;
    text-align: left;

    li {
      border: 1px solid var(--mid);
      margin: 0.25em;
      padding: 0.5em;

      a {
        color: inherit;
        text-decoration: none;
        display: flex;
      }

      img {
        width: 2em;
        margin: 0.5em;
        align-self: center;
      }

      div {
        margin-left: 0.5em;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      h3, span {
        margin: 0.25em 0;
      }

      h3:empty,
      span:empty {
        display: none;
      }

      &:hover {
        color: var(--gold);
        background-color: var(--black);
      }

      &:not(:has(a)) {
        padding: 1em 0;
        text-align: center;
      }

    }
  }

  footer {
    position: relative;

    a {
      position: absolute;
      top: -0.5em;
      right: 0;

      opacity: 0.25;
      cursor: pointer;

      &:hover {
        opacity: 1
      }

      img {
        width: 2em;
      }
    }
  }
}