:root {
   --deep-green: #0F1B07;
   --plant-green: #5C821A;
   --new-growth: #C6D166;
   /* and white */
   --br: 15px;
   --header-font-color: white;
   --header-bg: var(--plant-green);
   --bg-color: var(--deep-green);
   --menu-bg: var(--new-growth);
   --form-bg: white;
}
* {
/*
     Responsive CSS
     https://www.w3schools.com/css/css_rwd_grid.asp
*/
  box-sizing: border-box;
}
body {
   background-color: var(--bg-color);
}
.center {
/* center block elements */
/*   margin: auto; */
   width: 100%;
   margin: 0 0 auto;
}
/*
   Column widths from:
   https://www.w3schools.com/css/css_rwd_grid.asp
   assuming 12 columns
*/
.col-1 {
   width: 4%;
}
.col-2 {
   width: 89%;
}
.col-3 {
   width: 4%;
}
[class*="col-"] {
  float: left;
  padding: 1%;
}
/* 
   https://www.w3schools.com/css/css_rwd_grid.asp
   The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow:
*/
.row::after {
   content: "";
   clear: both;
   display: table;
}
html {
  font-family: "Lucida Sans", sans-serif;
}
.header {
  border-radius: var(--br) var(--br) 0 0;
  background-color: var(--header-bg);
  color: var(--header-font-color);
/*  height: 75px; */
  width: 100%;
  height: auto;
  padding: 1px 0;
  text-align: center;
}
.form {
  background-color: var(--form-bg);
  border-radius: 0 0 var(--br) var(--br);
  font-size: 24px;
  text-align: center;
}
.form p {
   margin: 0;
}
.citation {
   font-size: 12px;
   text-align: left;
   margin: 0 0 20px 20px;
   padding: 5px 20px 0 40px;
}
.menu {
  background-color: var(--menu-bg);
  text-align: center;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}