/* Center the button container and its contents */
.button-container {
    display: flex;
    justify-content: center;   /* centers the buttons horizontally */
    gap: 1rem;
    flex-wrap: wrap;           /* allows stacking on small screens */
    margin-top: 1.5rem;
}

/* Style the buttons to match your existing button styles */
.button-container .btn-primary,
.button-container .btn-secondary {
    flex: 0 1 auto;            /* prevents stretching */
    min-width: 180px;          /* optional, keeps buttons readable */
    text-align: center;
}

*, *::before, *::after {
    box-sizing: border-box;
}
.button:hover { font-weight: bold;}
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 {
    padding-bottom: 80px;   /* same as new footer height */
}
.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 */
}

.homeBlurb {
    font-size: clamp(1rem, 4vw, 1.5rem);
    /* rest of your existing styles */
}


.homeBlurb2 {
    text-align:center;
    width:100%;
    display:block;
    margin:auto;
    font-size:1.25em;
    color:black;
}

.homeBlurb2 {
 font-size: clamp(1rem, 3vw, 1.5rem);
 /* rest of your existing styles */
}


 
 
.homeBlurb3 {
    text-align:center;
    width:100%;
    display:block;
    margin:auto;
    font-size:.75em;
    color:black;
}

.homeBlurb2 {
 font-size: clamp(1rem, 2vw, 1.5rem);
 /* rest of your existing styles */
}



.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;}
.menuC3 {grid-area:mC3;}
.menuC4 {grid-area:mC4;}
.menuC5 {grid-area:mC5;}
.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: 
        "mE1  mE1  mE1  mE1  mE1  mE1  mE1  mE1  mE1"
        "mGG  mGG  mGG  mGG  mH1  mH1  mH1  mH1  mH1"
        "mA    mA   mA   mA   mA   mA   mA   mA   mA"
        "mBa  mBa  mBa  mBa  mBa  mBa  mBa  mBa  mBa"
        "mBb1 mBb1 mBb1 mBb1 mBb1 mBb1 mBb1 mBb1 mBb1"
        "mBb2 mBb2 mBb2 mBb2 mBb2 mBb3 mBb3 mBb3 mBb3"
        "mC1  mC1  mC1  mC1  mC1  mC2  mC2  mC2  mC2"
        "mC3  mC3  mC3  mC3  mC3  mC4  mC4  mC4  mC4"
        "mC5  mC5  mC5  mC5  mC5  mC5  mC5  mC5  mC5"
        "mD1  mD1  mD1  mD1  mD1  mD1  mD1  mD1  mD1"
        "mF1  mF1  mF1  mF2  mF2  mF3  mF3  mF3  mF3"
        "mG1  mG1  mG1  mG2  mG2  mG2  mG3  mG3  mG3"
        "mD2  mD2  mD2  mD2  mD3  mD3  mD3  mD3  mD3"
        "mI1  mI1  mI1  mI1  mI1  mI1  mI1  mI1  mI1"
        ". . . . . . . . ."
        ". . . . . . . . ."
        ". . . . . . . . ."
        ". . . . . . . . ."
        ;
        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;}
X031 {font-size:.5em;overflow-y: auto;}
X032 {font-size:.5em;overflow-y: auto;}
X033 {font-size:.5em;overflow-y: auto;}
035 {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 */

}

.content {
    align-items: start; /* aligns all children to the top of the grid cell */
}

.card {
    margin: 0 auto;      /* keep horizontal centering, remove vertical auto */
}

.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";
    }   
}