main.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  white-space: nowrap;
}
body {
  background-color: #222222;
  color: #eee;
  font-family: 'Segoe UI', sans-serif;
}
#container {
  position: relative;
  height: 100vh;;
}
#journal {
  display: block;
  flex-direction: column;
  position: absolute;
  bottom: 0;
}
.cat {
  display: flex;
  float: left;
  clear: both;
}
#cityofgold, #abzu, #duat, #tiamatsthrone, #eggplantworld, #hundunshideaway, #cosmicocean, #olmecslair {
  clear: none;
}
.items {
  display: flex;
  flex-wrap: wrap;
}
.header {
  width: 160px;
  height: 32px;
  flex-shrink: 0;
}
.header .name {
  width: 80px;
  font-size: 0.8em;
  display: inline-block;
  cursor: pointer;
}
.header .found {
  text-align: right;
  width: 30px;
  display: inline-block;
}
.header .total {
  width: 30px;
  display: inline-block;
}
.break {
  flex-basis: 100%;
  order: 1;
}
.item {
  width: auto;
  height: 32px;
  order: 0;
  cursor: pointer;
}
.done {
  display: none
}
.terra, .hh, .eggpants, .shoppie, .tun, .yang, .bodyguard, .cavemanshoppie, .ghistshoppie, .vanhorsing, .parsley, .parsnip, .parmesan, .sparrow, .beg {
  order: 2;
}
.ana, .roffy, .colin, .margaret {
  display: none;
}
.totemtrap, .liontrap, .slidingwall, .stickytrap {
  height: 32px;
  width: 16px;
  margin: 0 8px;
  order: 2;
}
.frogtrap {
  height: 16px;
  width: 32px;
  margin: 8px 0;
  order: 2;
}
.giantclam, .boulder, .giantcrushtrap, .logtrap, .bonedrop, .yama, .tusk, .waddler, .ammit, .anubis, .anubisii, .apep, .celestialjelly, .eggplantminister, .ghost, .giantfly, .giantspider, .goliathfrog, .greathumphead, .hundun, .kingu, .lahamu, .lamassu, .lavamander, .mechrider, .mummy, .olmec, .osiris, .pangxie, .queenbee, .quillback, .tiamat, .yetiking, .yetiqueen {
  width: 32px;
  height: 32px;
  order: 3;
}
#percent {
  width: 64px;
  min-width: 64px;
  text-align: center;
  color: #eee;
  font-size: 20px;
  line-height: 32px;
  font-weight: bold;
  float: left;
}
@media only screen and (max-width: 799px) {
  .cat {
    clear: both!important;
    display: block;
  }
}