html,body {
  background-image: linear-gradient(45deg, #F9CD81 50%, #D9AD61 50%);
}



/* all cols */
.flex-wrapper {
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  align-items: stretch;
  min-height: 95%;
}

.flex-item {
  margin: 10px;
  padding: 20px;
  flex-grow: 1;
  flex-basis: 25%;
  color: #eee;
}


h2 {
  font-size: 13pt;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  margin: 2px;
}

h3 {
  font-weight: normal;
  font-size: 11pt;  
  margin: 2px;
  text-align: center;
}

ul {
  list-style: none;
  padding-left: 7px;
}
li {
  line-height: 1.25em;
}
.title {
  margin-bottom: 2px;
  text-align: center;
}



/* col 1 */
#col1 { background-image: linear-gradient(75deg, #303 50%, #202 50%); }
#menulinks h1 {
  font-size: 28px;
  font-weight: normal;
  margin-right: 10px;
}

/* col 2 */
#col2 {
  background-image: linear-gradient(50deg, #000 60%, #333 60%);
  animation: fadein 1s;
}

.l1 { margin-top: 15px; }
.l2 { display: none; }
.l2 > * { margin-top: 10px; }
.l2 > * > * { list-style: "- "; }

/* col 3 */
#col3 {
  background-image: linear-gradient(-10deg, #602 30%, #400 30%);
  animation: fadein 1.5s;
}

/*col 4 */
#col4 {
  background-image: linear-gradient(60deg, #014 40%, #035 40%);
  animation: fadein 2s;
}

/* js toggle writes to element which normally overrides css, but that can lead to hidden menu on a resize. This overrides that to not hide the menu */
@media screen and (min-width: 640px) {
  #menulinks { display: block !important; }
}

/* For Mobile Site */
@media screen and (max-width: 640px){
  .flex-wrapper {
    flex-flow: column nowrap;
    justify-content: space-between;
  }
  .flex-item {
    flex-grow: unset;
  }
  
  
  #col1 { text-align: right; }
  #menulinks {
    display: none;
    font-size: medium;
  }
  #menulinks h1 {
    display: block;
    font-size: large;
  }
}