::-webkit-scrollbar {
    display: none;
}

/* html {
    overflow-y: scroll;
  } */

/* ✅ Make the grid only control buttons */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: 50px;
    column-gap: 0px;
    width: 90%;
    max-width: 600px;
    margin: 40px auto 10px auto;
    /* margin-top: 55%; */
    font-family: "Space Mono", monospace;
    font-size: small;
    position: relative;
     font-weight: 400;
            font-style: normal;
}

/* ✅ Buttons */
.stats-btn, .about-btn, .appendix-btn {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    height: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s;
    font-family: "Space Mono", monospace;
    font-size: small;
    
}

.stats-btn:active:focus, .about-btn:active, .appendix-btn:active {
    background-color: white;
    color: black;
}



/* ✅ Content Section (Now Below the Grid) */
.content-container {
    width: 90%;
    max-width: 600px;
    margin-top: 0px; /* Space below buttons */
    text-align: center;
    /* margin-top: 75%; */
    position: relative;
    
}

.content {
    display: none;
    background: rgba(0, 0, 0, 0.8);
    color: #94826f;
    padding: 0px;
    /* border: 1px solid red; */
    text-align: left;
    font-size: small;
    overflow: hidden; 
    max-height: 300px;
    margin-bottom: 10px;
}

 a:link, a:visited {
        color: #94826f;
        }

/* ✅ Show Content When Active */
.content.active {
    display: block;
}



/* /////////////////
appendix code tests */

.appendix-content {
    padding: 0px;
    font-family: "Space Mono", monospace;
    font-size: small;
    color: #94826f;
    /* overflow: scroll; */
    overflow-y: scroll;
    max-height: 200px;
     font-weight: 400;
            font-style: normal;

}

/* Table styling */
.appendix-table {
    width: 100%;
    border-collapse: collapse;
    
}

/* Column widths */
.appendix-table th:nth-child(1),
.appendix-table td:nth-child(1) {
    width: 20%;
}

.appendix-table th:nth-child(2),
.appendix-table td:nth-child(2) {
    width: 10%;
}

.appendix-table th:nth-child(3),
.appendix-table td:nth-child(3) {
    width: 50%;
}

/* Borders & Spacing */
.appendix-table th,
.appendix-table td {
    border: 1px solid #94826f;
    padding: 8px;
    text-align: left;
}

/* Header Styling */
.appendix-table th {
    /* background-color: #f4f4f4;
    font-weight: normal; */
    font-weight: 400;
            font-style: normal;
             font-family: "Space Mono", monospace;
    font-size: small;
}

/* Alternate row colors for readability */
.appendix-table tr:nth-child(even) {
    /* background-color: #f9f9f9; */
}