html, body {
  height:90vh;
  background-color: #ffeead;
  margin: 0;
  font-size: 1.5em;
}

.container {
    height: 100vh;
    display: grid;
    grid-gap: 3px;
//    grid-template: 40px auto 40px / repeat(12, 1fr);  
    grid-template: auto auto auto / repeat(14, 1fr);  

    grid-template-areas: 
        "h h h h h h h h h h h h h h"
        ". m m m m m m c c c c c c ."
        "f f f f f f f f f f f f f f";
}
.container > div {
    justify-content: center;
    align-items: center;
    color: #ffeead;
}

.container > div > span {
    justify-content: center;
    align-items: center;
    color: black;
}

.container > .header {  
    grid-area: h;  
    font-size:.75em;
    text-align:center;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    margin:auto;
    color:black;
    width:100vw;
}

.hdrimg {height:40px;}

.homeBlurb {
    text-align:center;
    width:100%;
    display:block;
    margin:auto;
    font-size:1.5em;
    color:black;
        overflow-y: scroll;
}
.homeBlurb2 {
    text-align:center;
    width:100%;
    display:block;
    margin:auto;
    font-size:1.25em;
    color:black;
}
.homeBlurb3 {
    text-align:center;
    width:100%;
    display:block;
    margin:auto;
    font-size:.75em;
    color:black;
}

.menuA {grid-area:mA;}
.menuBa {grid-area:mBa;}
.menuBb1 {grid-area:mBb1;}
.menuBb2 {grid-area:mBb2;}
.menuBb3 {grid-area:mBb3;}
.menuC1 {grid-area:mC1;}
.menuC2 {grid-area:mC2;}
.menuD1 {grid-area:mD1;}
.menuD2 {grid-area:mD2;}
.menuD3 {grid-area:mD3;}
.menuE1 {grid-area:mE1;}
.menuF1 {grid-area:mF1;}
.menuF2 {grid-area:mF2;}
.menuF3 {grid-area:mF3;}
.menuG1 {grid-area:mG1;}
.menuG2 {grid-area:mG2;}
.menuG3 {grid-area:mG3;}
.menuGG1 {grid-area:mGG;}
.menuH1 {grid-area:mH1;}
.menuI1 {grid-area:mI1;}
.menuI2 {grid-area:mI2;}
.menuI3 {grid-area:mI3;}


.menu {  
    font-size : .75em;
    grid-area: m;  
    display:grid;
    height:80vh;
    padding:5px;
    margin:auto;
    overflow-y: scroll;
        grid-gap: 3px;
//    grid-template: 40px auto 40px / repeat(12, 1fr);  
    grid-template: auto auto auto auto auto auto auto auto auto auto auto auto auto auto / repeat(9, 1fr);  

    grid-template-areas: 
        "mA    mA   mA   mA   mA   mA   mA   mA   mA"
        "mBa  mBa  mBa  mBa  mBa  mBa  mBa  mBa  mBa"
        "mBb1 mBb1 mBb1 mBb2 mBb2 mBb2 mBb3 mBb3 mBb3"
        "mC1  mC1  mC1  mC1  mC2  mC2  mC2  mC2  mC2"
        "mD1  mD1  mD1  mD2  mD2  mD2  mD3  mD3  mD3"
        "mE1  mE1  mE1  mE1  mE1  mE1  mE1  mE1  mE1"
        "mF1  mF1  mF1  mF2  mF2  mF3  mF3  mF3  mF3"
        "mG1  mG1  mG1  mG2  mG2  mG2  mG3  mG3  mG3"
        "mGG  mGG  mGG  mGG  mGG  mGG  mGG  mGG  mGG"
        "mH1  mH1  mH1  mH1  mH1  mH1  mH1  mH1  mH1"
        "mI1  mI1  mI1  mI2  mI2  mI2  mI3  mI3  mI3"
        ". . . . . . . . ."
        ". . . . . . . . ."
        ". . . . . . . . ."
        ". . . . . . . . ."
        ;
}
 
.parenx {font-size:.5em;}
#XXX0 {font-size:.6em;overflow-y: scroll;}
#X000 {font-size:.5em;overflow-y: scroll;}
#X002 {font-size:.5em;overflow-y: scroll;}
#X005 {font-size:.5em;overflow-y: scroll;}
#X010 {font-size:.5em;overflow-y: scroll;}
#X015 {font-size:.5em;overflow-y: scroll;}
#X020 {font-size:.5em;overflow-y: scroll;}
#X025 {font-size:.5em;overflow-y: scroll;}
#X030 {font-size:.5em;overflow-y: scroll;}
#X035 {font-size:.5em;overflow-y: scroll;}
#X040 {font-size:.5em;overflow-y: scroll;}
#X045 {font-size:.5em;overflow-y: scroll;}
#X050 {font-size:.5em;overflow-y: scroll;}
#X055 {font-size:.5em;overflow-y: scroll;}
#X060 {font-size:.5em;overflow-y: scroll;}
#X065 {font-size:.5em;overflow-y: scroll;}
#X070 {font-size:.5em;overflow-y: scroll;}
#X075 {font-size:.5em;overflow-y: scroll;}
#X080 {font-size:.5em;overflow-y: scroll;}
#X085 {font-size:.5em;overflow-y: scroll;}
#X090 {font-size:.5em;overflow-y: scroll;}
#X095 {font-size:.5em;overflow-y: scroll;}
#X100 {font-size:.5em;overflow-y: scroll;}
#X105 {font-size:.5em;overflow-y: scroll;}
#X110 {font-size:.5em;overflow-y: scroll;}
#X305 {font-size:.5em;overflow-y: scroll;}
#X310 {font-size:.5em;overflow-y: scroll;}
#X310a {font-size:.5em;overflow-y: scroll;}
#X315 {font-size:.5em;overflow-y: scroll;}
#X320 {font-size:.5em;overflow-y: scroll;}
#X325 {font-size:.5em;overflow-y: scroll;}
#X330 {font-size:.5em;overflow-y: scroll;}

.content {  
    grid-area: c;  
    margin:auto;
    height:80vh;
    display:grid;
    overflow-y: scroll;
}
.footer {  
   grid-area: f;
   display:flex;
    flex-wrap:wrap;
    position:fixed;
    bottom:0;
    z-index:100;
}

.footerBox {  
  border: 1px solid black;
  flex: 1;
    align-self:stretch;
}

.footerBoxM {
    min-width:20%;
    max-width:30%;
}
.container > div:nth-child(1n) {
  background-color: #96ceb4;	
}

.container > div:nth-child(3n) {
  background-color: #88d8b0;
}

.container > div:nth-child(2n) {
      background-color: #ff6f69;
}

.container > div:nth-child(4n) {
      background-color: #ffcc5c;
}

.button {
  transition-duration: 0.4s;
    z-index:1;
     border: 2px solid brown;
     padding:2px;
     margin:0 2px;
}

.card {
  display: grid;
  /* The below is o make the card look not terrible */
  border: 1px solid black;
  margin:auto;

}
.card-contents {
    padding:2em;
    }
.card-contents,
.card-hover {
  grid-row: 1;
  grid-column: 1;
}
.card-hover {
    padding:1em;
    display:none;
}
.card-contents {  }
.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}


@media screen and (max-width: 640px) {  

    html, body {
        font-size: 1.0em;
    }
    .menu, .header, .footer {  
        font-size : .7em;
    }
    .container {  
    grid-template: 40px auto 50px / repeat(14, 1fr);  

    grid-template-areas: 
        "h h h h h h h h h h h h h h"
        "m m m m m m m c c c c c c c"
        "f f f f f f f f f f f f f f";
    }   
}