* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    background-color: white;
    color: #222;
    font: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
    text-align: center;
    padding: 8px;
    font-weight: bold;
}

h3 {
    text-align: center;
    font-family: "Protest Guerrilla", sans-serif ;
    font-stretch: expanded;
    font-size: 50px;
    font-weight: bold;
}

p {
    text-align: center;
    padding: 8px;
    font-weight: normal;
}

table.beans {
    border:hidden;
    margin: 40px auto;
    font-size: 1.4em;
    border-collapse: collapse;
}

.beans th, .beans td {
    border: 2px solid #222;
    padding: 8px;
    text-align: center;
    height: .75in;
}

.green_row_top {
    background-color: #a7d83d;
    color: #222;
    font-weight: bold ;
    font-style: italic;
}

.green_row {
    background-color: #a7d83d;
    color: #222;
    font-weight: bold;
    font-style: italic;
}

.beans th {
  text-align: center;
  padding-top: 50px;   
  position: relative;
  font-weight: bold;
}

.beans th::before {
  content: "";
  position: absolute;
  top: 8px;             
  left: 50%;
  transform: translateX(-50%);
  width: 32px;         
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
}

th.green_row_top::before {
  background-image: url("/cis195/images/bean3.png");
}

th.column2::before {
  background-image: url("/cis195/images/bean1.png");
}

th.column3::before {
  background-image: url("/cis195/images/bean2.png");
}