main.css

/*
  elm-hot creates an additional div wrapper around the app to make HMR possible.
  This could break styling in development mode if you are using Elm UI.

  More context in the issue:
    https://github.com/halfzebra/create-elm-app/issues/320
*/
[data-elm-hot="true"] {
  height: inherit;
}

body {
  font-family: 'Source Sans Pro', 'Trebuchet MS', 'Lucida Grande', 'Bitstream Vera Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 2em;
  text-align: center;
  color: #293c4b;
}

h1 {
  font-size: 30px;
}

h2 {
  flex-grow: .25;
}

img {
  margin: 20px 0;
  max-width: 200px;
}
div {
  display: flex;
  margin: 0;
}

table {
  width: 100%;
}

table, th, td, tr, #filters {
  border: 2px solid black;
  border-collapse: collapse;
  padding: 5px;
}

span {
  user-select : none;
  text-align: left;
}

.clickable {
  cursor: pointer;
}

#bigContainer {
  flex-direction: column;
  justify-content: center;
  position: absolute;
  margin: 10px;
  left: 0;
  right: 0;
  overflow-y: scroll;
}

#filters {
  justify-self: flex-start;
  flex-direction: row;
}

.filterDiv {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  border: 2px solid black;
  flex-grow: 1;
  padding: 5px;
}
.toggleFiltersButton {
  margin-top: auto;
  margin-right: auto;
}

table {
  margin-bottom: 10px;
}