brown.css

body {
  background: #534741;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #eeeeee;
}

#topbar {
  color: #eeeeee;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  background-color: #333333;
  padding: 5px;
  border-bottom: 1px #777777 solid;
}

#topbar #left {
  float:left;
  width:50%
}

#topbar #right {
  text-align: right;
}

#topbar a {
  color: #ffffcc;
  text-decoration: none;
}

.card-body {
  text-align: center;
  height: 80%;
  width: 100%;
}

.card-body hr {
  border: 0;
  border-bottom: 1px dotted #4a0;
  height: 1px;
}

.flash_question {
  height: 50%;
}

.flash_answer {
  height: 50%;
}

.flash_fact {
  font-size: large;
  color: #226699;
  padding: 5px;
}

.flash_fact_dark {
  font-size: large;
  color: #ffff44;
  padding: 5px;
}

.flash_details {
  font-size: small;
  color: #777;
  padding-bottom: 5px;
}

.flash_example {
  font-size: small;
  font-weight: normal;
  font-style: italic;
}

.button {
  font-size: small;
  padding: 3px; text-decoration: none;
}