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

h1 {
  float: left;
}

nav .sect {
  padding: 1em;
  float: left;
}

nav button {
  margin: 1em 0.5em;
}

#flashes {
  position: fixed;
  top: 0;
  right: 0;
}

.flash {
  position: relative;
  top: 0;
  z-index: 1;
  margin: 5px;
  padding: 10px;
  color: #fff;
  font-size: 1.4em;
}

.flash-hide {
  animation: fadeOut ease 8s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: hidden;
    display: none;
  }
}

.flash-error {
  background-color: #900;
}

.flash-info {
  background-color: #060;
}

.van-space {
  cursor: pointer;
}

#import-export {
  clear: left;
}

#occupant-list {
  font-size: 1.4em;
}

#occupant-list li strong {
  color: purple;
}

#occupant-list ul {
  list-style-type: none;
  height: 700px;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

@media (max-width: 900px) {
  #occupant-list ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 700px) {
  #occupant-list ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}