body {
    background-color: black !important;
}

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

/* Common styles (optional) */
.col {
    padding: 1vw 0;
    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 {
    height: 20vh;
    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: 40%;
    float: left;
    clear: both;
} 

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

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

}

.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;
    height: 75vh;    

}

.gridAreaContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    float: left;
}


/*    WORDLE GRID   */

.wordleGridClassDiv {    
    clear: both;
    margin: 2vh 0 0 0;
    width: 95%;
    background-color: black;
}

.wordleRowClassDiv {

    float: left;
    clear: both;

}


.wordleBoxClassDiv {
    float: left;
    padding: 0;
    margin: 0;
    width: 20%;  
    background-color: black;  

}

.wordleBoxClass {
    height: 9vh;
    width: 100%;
    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;
    float: right;
    color: white;
    font-style: italic;
    line-height: 2.5vh;
}

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

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


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


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

}

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

}




/* 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;
}