#gameContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* horizontal alignment */
    align-items: center;        /* cross axis (vertical) alignment */
    margin-bottom: 10%;
}

.board {
    display: flex;
    aspect-ratio: 7/6;
    height: 50vh;
    max-width: 100vw;
    justify-content: center;    /* horizontal alignment */
    align-items: center;        /* cross axis (vertical) alignment */
    margin: auto;               /* aspect ratio messes up alignment, this centers it again for some reason*/
    margin-bottom: 3%;
    margin-top: 3%;
}

.col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: blue;
    cursor: pointer;
    flex: 1;
}

.cell {
    display: flex;
    justify-content: center;
    margin: 10% 10%;
    width: 100%;
    background-color:#1a1a1a; 
    aspect-ratio: 1 / 1; /* Ensures that cells are square */
    border-radius: 50%;
    color: #444; /* Default text color */
}


.underBoard, h2, #difficultySelection {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* horizontal alignment */
    align-items: center;        /* cross axis (vertical) alignment */
}

#difficultySelection {
    flex-direction: row;
}

#col0 {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
#col6 {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.col:hover {
    background-color: lightskyblue; /* Hover effect for cells */
}

.cell.red {
    background-color: red;
}
.cell.yellow {
    background-color: yellow;
}