/*
body{
overflow-x: auto;}
*/

/*
add to html

<div id="split-command-grid-column-b">
    <!-- JS will insert navbar here-->
</div><!--end split grid col b-->

*/


#split-grid-nav-dual{
display: grid;
grid-template-columns: 70% 30%;	
margin-top:1rem;
width:100%;

}

#split-grid-a{
grid-column:1/1;
max-width:100%;
margin-left:5px;
padding-left:2%!important;
padding-right:5%;
padding-bottom:2rem;
text-align:left;
overflow-wrap: break-word;

}
 
#split-grid-b{
grid-column:2/2;
margin-right:1rem;
padding-left:1%;
padding-right:5%;
text-align:left;
margin-left:20px;
/*border-left: 1px solid rgb(0, 0, 0);*/
color:rgba(121, 106, 83, 0.993);
color:rgba(143, 115, 74, 0.993);
}


#navbarBottom{
display:none;
color:rgba(121, 106, 83, 0.993);
color:rgba(143, 115, 74, 0.993);
text-align:center;
width:100%;
}

#navbarInner{
    margin-top: 4rem;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(41, 73, 35, 0.517);

    margin-left: 1rem;
    margin-right: 1rem;

}


/*start queries dual-nav/*



/* At max-width or less, do this, and dont do it above max-widh
600px = 250% zoom at chrom on zpc
800px = 200%
1000 = 150% portrait, 90% landscape.. use this, 10-30Thurs1730
 */



@media screen and (max-width: 1000px) {
    /* 1. Collapse the grid so it doesn't reserve space for Column B */
    #split-grid-nav-dual {
        display: block !important;
        width: 100% !important;
    }

    /* 2. Ensure Column A takes the full width */
    #split-grid-a {
        grid-column: 1 / 1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding-right: 5% !important;
    }

    /* 3. Hide Column B completely */
    #split-grid-b {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* 4. Show your bottom navbar */
    #navbarBottom {
        display: block !important;
        margin-top: 2rem;
    }
}











/* At max-width or less, do this, and dont do it above max-widh */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {


.four h3 {
    width: 11ch;
    border-right: 4px solid rgb(55, 118, 74);
    margin: 2rem auto;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 2s steps(9, end), blink-caret 0.5s step-end infinite alternate;
}



        
    #navbarBottom{
    display:inline!important;
    }

    #split-grid-nav-dual{
    display: grid;
    /*grid-template-columns: 99% 1%;	*/
    margin-top:1rem;
    /*width:100%; turning off for left margin testing*/



    }

    #split-grid-a{
    grid-column:1 / span 2!important;
    width:100%!important;
    margin-left:5px;
    padding-left:2%!important;
    padding-right:5%;
    text-align:left;

    
    }

    #split-grid-b{
    display:none!important;
    grid-column:0/2;
    margin-right:1rem;
    padding-left:1%;
    padding-right:5%;
    text-align:left;
    margin-left:20px;

    }
#tableStyles{
border: 1px solid rgb(0, 68, 255)!important;
padding: 50px;
padding-left:10px;
border-spacing: 3px;
padding-top:1px;
color: rgb(174, 178, 199);
/*cells are fixed width*/
table-layout:fixed!important;
width:100%;
overflow-x: auto!important;
font-size:50%!important;
  
  /* Optional: further control over word breaking */
  word-break: break-word; 
  overflow-wrap: break-word; /* Official name for word-wrap */
  /* Vendor prefixes for broader support */
  -webkit-hyphens: auto; /* Safari and older Chrome */
  -moz-hyphens: auto;    /* Firefox */
  -ms-hyphens: auto;     /* Internet Explorer/Edge */
  hyphens: auto;         /* Standard syntax */



}

#tableStyles th{
color: rgb(0, 0, 0)!important;
position: sticky;
top: 0; /* Sticks to the top of the scroll container/viewport */
background-color: #383838; /* Important for covering content below */
z-index: 1; /* Ensures the header stays above table body content */
color: rgb(199, 192, 174);
border: 1px solid rgb(12, 100, 21)!important;
padding:10px;
text-align:center;
}

#tableStyles td{
border: 1px solid rgb(30, 30, 30);
padding:10px;
text-align:left!important;
 /* Optional: further control over word breaking */
  word-break: break-word; 
  overflow-wrap: break-word; /* Official name for word-wrap */
  /* Vendor prefixes for broader support */
  -webkit-hyphens: auto; /* Safari and older Chrome */
  -moz-hyphens: auto;    /* Firefox */
  -ms-hyphens: auto;     /* Internet Explorer/Edge */
  hyphens: auto;         /* Standard syntax */


}

#top-grid-column4{
font-size:40%;

}


}

/*end queries from dualnav