.right {
  float: left;                  /* Add this */
  /* background-color: #F5CF8E; */
  width: 50%;
  padding:2%;
  overflow-y: auto;
}

.left {
  float: left;                  /* Add this */
  /* background-color: #F09A9D; */
  width: 40%;
  padding: 2%;
}

.left li{
    margin-top: 1rem;
}

footer {
  clear: both;
  float: none;
  bottom: 0;
  margin: 2em 0 0 0;
  padding: .2em .5em .2em .5em;
  font-size: .9em;
  background: #c1e3b5;
  color: black;
}

.page {
  margin: 0 4% 0 4%;
}

.public-footer {
  clear: both;
  height: 3em;
  float: none;
  /* margin: 0; */
  /* margin-top: 400px; */
  padding: 1em;
  text-align: center;
  /* background: #e03e52; */
  background: #70695a;
  color: #FFFFFF;
}

header {
  padding: 1em;
  background: #c1e3b5;
}

header h1 {
  margin: 0;
  font-size: 1.5em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
  /* font-weight: bold; */
}

navigation {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

navigation ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

navigation ul li {
  display: inline;
  margin-right: 1em;
}