body {
  background-color: white;
  color: black;
  font-family: Times-New-Roman;
  padding-top: 10px;
  font-size: 1.125em;
}

a:link { color: #E22B2B}
a:visited { color: #AB0F0F }
a:hover { color: #3366CC }



.footer {
    text-align: center;
    align-items: center;
    padding: 15px;
    height: 45px;
    background-color: #dedede;
    color: #222222;
    position: absolute;
    bottom: 0;
    padding-bottom: 27px;
    left: 0;
    right: 0;
    margin: 15px 5% 15px;
}

.test1 {
    
    padding: 10px;
    border: solid 5px black;
    
    /* remember: style, width, colour! */
    
    margin: 1% 5% 1% 5%;
    
    /* margin is Top Right Bottom Left (clockwise) */
    
    background-color: #8a8a8a;
}

.test2 {
  padding: 10px;
  max-height: 408px;
  border: solid 5px black;
  background-color: #b3b3b3;
  margin-right: 15%;
  margin-left: 15%;
  overflow: auto;
}

.container {
  margin-right: 1%;
  margin-left: 1%;
  overflow: auto;
  display: grid;
  grid-template-areas:
    "testa testa testa"
    "testc testb testd";
  grid-template-columns: 1fr 3fr 1fr;
  gap: 3px;
  padding: 5px;
}

.container .testa {
  border: solid 5px black;
  padding: 5px;
  margin-right: 5%;
  margin-bottom: 1%;
  margin-left: 5%;
  background-color: #e22b2b;
  grid-area: testa;
}

.container .testb {
  border: solid 5px black;
  padding: 10px;
  height: 408px;
  background-color: #ffaaaa;
  overflow: auto;
}

.container .testc {
 border: solid 5px black;
 padding: 10px;
 max-height: 408px;
 background-color: #ff7777;
 margin-left: 34%;
 margin-right: 10%;
 overflow: auto;
}

.container .testd {
 border: solid 5px black;
 padding: 10px;
 max-height: 408px;
 background-color: #ff7777;
 margin-left: 10%;
 margin-right: 34%;
 overflow: auto;
}