body {
    background-color: black !important;
}

.flexContainer {
  display: flex;
  gap: 1vw; /* optional spacing between columns */
}

/* Common styles (optional) */
.col {
    padding: 1vw 2vw;
    text-align: center;
    height: 100vh;  
}
 
/* Set specific widths — adjust as needed */
.col1 { 
    flex: 0 0 35%;
    
}
.col2 {
    flex: 0 0 15%;

}

.col3 { 
    flex: 0 0 30%;
 
}

.col4 { 
    flex: 0 0 15%;
 
}

/* mobile layout directives */

@media (max-width: 768px) {
  .flexContainer {
    flex-direction: column;
  }

  .col {
    flex: 0 0 100%;
    width: 100%;
    height: auto; /* optional: prevents full screen height on mobile */
  }

    .wordDivsInList {
        float: left;
        clear: none !important;
        width: auto !important;
        margin: 0 5px;
    }

}

/* END mobile layout directives */


.colHeader {

    background-color: black;
    padding: 0px;
}

.colHeaderText {
    color: white;
    font-size: 150%;
    padding: 0px;
    width: 100%;
}

.colHeaderWordcount {
    color: #00AF82;
    font-size: 100%;
    margin: 1vh 0;    
}

.colSubtitleText {
    color: #555;
    font-size: 100%;
    margin: 1vh 0 1vh 0;

}

/* FIRST MAIN COLUMN STUFF */

.mainHeaderBox {
    width: 100%;
    padding: 0;
}


.logoStyleDiv {
    width: 25%;
    float: left;
    clear: both;
} 

.logoStyle {
    max-width: 100%;
    height: 15vh;
}

.mainTitleBox {
    float: left;
    width: 70%;

}

.mainTitle {

    float: left;
    width: 100%;
    text-align: center;
    font-size: 150%;
    font-weight: bold;
    font-style: italic;
    margin: 0 0 2vh 0;
    color: white;
}


.mainTaglines {
    font-size: 100%;
    margin: 1vh 0 0 0;
    color: lightgray;

}

.genericWordList {
    color: #aaa;
    overflow-y: auto;
    max-height: 75vh;   /* can grow up to 75% of viewport height */
    height: auto;       /* shrink/grow based on content */

}

.gridAreaContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    float: left;
    margin-bottom: 0.5vh;

}

.keyboardContainer {

    clear: both;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    width: 90%;
    height: 100%;
    margin: 0 auto 1vh auto;


}

/*    WORDLE GRID   */

.wordleGridClassDiv {    
    clear: both;
    margin: 2vh 0 0 0;
    width: 55%;

}

.wordleRowClassDiv {

    display: flex;
    flex: 1; /* each row gets equal height */
    gap: 0.25em;
    margin: 0.5vh;

    /*
    float: left;
    clear: both;
*/
}


.wordleBoxClassDiv {

    flex: 1; /* each item in a row gets equal width */
    aspect-ratio: 1 / 1; /* keep them square */
    background-color: #555;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 2vw, 2rem);
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, transform 0.05s ease;
    color: white;

/*    float: left;
    padding: 0;
    margin: 0;
    width: 20%;  
    background-color: black;  
*/
}

.wordleBoxClass {
  /*  height: 10vh;
    width: 10vh;
    padding: 1vh 1vw;
    margin: 0.25vh 0.25vw;
    font-size: 5vh;
    font-weight:750;
    text-align: center;
    background-color: #555;
    border: none;
    color: white;  */
}

#instructionDiv {
    margin: 3vh 0 0 0;
    width: 100%;
    clear: both;
    float: left;
}

.instructionLine {
    clear: both;
    color: white;
    font-style: normal;
    line-height: 2.5vh;
    margin: 0 0 1vh 0;
}

.suggestionsLine {
    clear: both;
    color: white;
    font-style: italic;
    line-height: 2.5vh;  
}

#chart_distro {
    width: 100%;
    height: 30vh;
}

#chart_distro_div {
    clear: both;
    float: left;
    width: 100%;
    margin: 0vh 0vw 1vh 0vw;
    padding: 0vh;
    height: 30vh;
}

#chart_histro {
    width: 100%;
    height: 40vh;
}

#chart_histro_div {
    clear: both;
    float: left;
    width: 100%;
    margin: 1vh 0;
    padding: 0vh;
    height: 40vh;

}

.wordDivsInList {
    clear: both;
    width: 100%;
    float: left;

}

#status_output {
    width: 100%;
    text-align: center;
    margin: 0.5vh auto;
    clear: both;
    float: left;
    color: red;
}

#feedback_container {

    justify-content: center;
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
}

#feedback {
    float: left;
    clear: both;
    margin: 1vh 3vw;
    padding: 1vh;
    height: 8vh;
    width: 90%;
    background-color: lightgray;
    border: none; /* Remove any border */
    border-radius: 0; /* Remove rounded corners for a truly flat look */
    box-shadow: none; /* Remove any box shadow */    
}

#submit_btn {
    float: left;
    clear: both;
    margin: 1vh 3vw;
    color: white;
    background-color: #00AF82;
    border: none; /* Remove any border */
    border-radius: 0; /* Remove rounded corners for a truly flat look */
    box-shadow: none; /* Remove any box shadow */

}

#visit_counter {

    margin: 2vh 0;
    float: right;
    clear: both;
    color: #555;
    font-size: 70%;
}


/* SCROLLBAR STYLE */

/* Target the scrollbar */
.genericWordList::-webkit-scrollbar {
  width: 16px; /* vertical scrollbar */
  height: 12px; /* horizontal scrollbar */
}

/* Track (background) */
.genericWordList::-webkit-scrollbar-track {
  background: #111;
  border-radius: 6px;
}

/* Thumb (scroll handle) */
.genericWordList::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 6px;
  border: 2px solid #555; /* space around thumb */
}

/* Hover effect on thumb */
.genericWordList::-webkit-scrollbar-thumb:hover {
  background: #555;
}