body {
  color: #fafafa;
  background-color: #141414;
  font-family: "Helvetica Neue", Meiryo, sans-serif;
  max-width: 62em;
}
ul {
  list-style: none;
  padding: 0.1em;
  margin: 0.1em 0.3em;
}
li {
  padding: 0.12em;
}
.player-header {
  padding: 0.3em 0;
}

header, .player, .supports {
  padding: 0.7em;
  margin: 0.3em;
  background-color: #484848;
}

.timing {
  background-color: #141414;
}
section {
  padding: 1em;
}
.title {
  font-weight: bold;
}
.name .mission-name {
  font-weight: bold;
}
.player-header {
  background-color: #141414;
  padding: 0.4em 1.2em;
  margin: 0 -1em;
}
.ranger {
  color: #fa6464;
}
.winger {
  color: #6464fa;
}
.bomber {
  color: #64fa64;
}
.fencer {
  color: #afafaf;
}
.sub, .num {
  opacity: 0.8;
  padding: 0 0.3em;
}
.weapon, .support, header {
  display: flex;
}

.wpn-name, .name, #time {
  flex: 1;
}
.challenge {
  max-width: 30em;
  padding: 0.3em 0.1em;
}

.difficulty {
  text-align: right;
  flex: 1;
}

.warning {
  padding: 0 1em;
  color: #ff6464;
  font-weight: bold;
}

.prismatic {
  grid-column: 1;
  grid-row: 1 / span 1;
}
.dlc {
  grid-column: 1;
  grid-row: 2 / span 1;
}
.coop {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media only screen and (min-width: 1024px) {
  body {
    padding-left: 2em;
  }
}

@media only screen and (min-width: 700px) {
  #challenges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  )
}