*, *::before, *::after {
    box-sizing: border-box;
}

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: auto;  /* Change from 'scroll' to 'auto' */
    scrollbar-gutter: auto;  /* Add this */
}
.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: auto;  /* Change from 'scroll' to 'auto' */
    scrollbar-gutter: auto;  /* Add this - prevents reserved space */
    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"
        ". . . . . . . . ."
        ". . . . . . . . ."
        ". . . . . . . . ."
        ". . . . . . . . ."
        ;
        max-width: 100%;  /* Add this */
}
 
.parenx {font-size:.5em;}
#XXX0 {font-size:.6em;overflow-y: auto;}
#X000 {font-size:.5em;overflow-y: auto;}
#X002 {font-size:.5em;overflow-y: auto;}
#X005 {font-size:.5em;overflow-y: auto;}
#X010 {font-size:.5em;overflow-y: auto;}
#X015 {font-size:.5em;overflow-y: auto;}
#X020 {font-size:.5em;overflow-y: auto;}
#X025 {font-size:.5em;overflow-y: auto;}
#X030 {font-size:.5em;overflow-y: auto;}
#X035 {font-size:.5em;overflow-y: auto;}
#X040 {font-size:.5em;overflow-y: auto;}
#X045 {font-size:.5em;overflow-y: auto;}
#X050 {font-size:.5em;overflow-y: auto;}
#X055 {font-size:.5em;overflow-y: auto;}
#X060 {font-size:.5em;overflow-y: auto;}
#X065 {font-size:.5em;overflow-y: auto;}
#X070 {font-size:.5em;overflow-y: auto;}
#X075 {font-size:.5em;overflow-y: auto;}
#X080 {font-size:.5em;overflow-y: auto;}
#X085 {font-size:.5em;overflow-y: auto;}
#X090 {font-size:.5em;overflow-y: auto;}
#X095 {font-size:.5em;overflow-y: auto;}
#X100 {font-size:.5em;overflow-y: auto;}
#X105 {font-size:.5em;overflow-y: auto;}
#X110 {font-size:.5em;overflow-y: auto;}
#X305 {font-size:.5em;overflow-y: auto;}
#X310 {font-size:.5em;overflow-y: auto;}
#X310a {font-size:.5em;overflow-y: auto;}
#X315 {font-size:.5em;overflow-y: auto;}
#X320 {font-size:.5em;overflow-y: auto;}
#X325 {font-size:.5em;overflow-y: auto;}
#X330 {font-size:.5em;overflow-y: auto;}



.content {  
    grid-area: c;  
    margin: auto;
    height: 80vh;
    display: grid;
    overflow-y: auto;  /* Change from 'scroll' to 'auto' */
    scrollbar-gutter: auto;  /* Add this */

}
.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;
    border: 1px solid black;
    margin: auto;
    max-width: 100%;  /* Add this */
    overflow-x: hidden;  /* Add this to prevent horizontal issues */


}
.card-contents {
    padding: 2em;
    max-width: 100%;  /* Add this */
    box-sizing: border-box;  /* Add this - ensures padding doesn't cause overflow */
    }
.card-contents,
.card-hover {
  grid-row: 1;
  grid-column: 1;
}
.card-hover {
    padding: 1em;
    display: none;
    max-width: 100%;  /* Add this */
    box-sizing: border-box;  /* Add this */
}
.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";
    }   
}