styles.scss

$cellColorUnc: grey;

html{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #66C3FF;
    color: #363732;
    font-family: "Open Sans", sans-serif;
}

p, .timer{
    font-size: large;
    font-weight: bold;
}

.flagdiv{
    display: flex;
    justify-content: center;
    align-items: center;
}

h1{
    margin: 0;
    padding: 0;
}

.title{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.covered{
    background: $cellColorUnc;
    color: $cellColorUnc;
    &:hover{
        cursor: pointer;

    }
}



table{
    table-layout: fixed;
    width: 500px;
    height: 250px;
    border: 5px solid black;
    border-collapse: collapse;
}

td{
    display: table-cell;
    border: 1px solid black;
    font-weight: bold;

    // Prevents collapse of empty cells; all same width/height
    &:empty::after{
        content: "\00a0";
    }
}

.flagButton{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #363732;
    border: 2px solid black;
    width: 40px;
    height: 40px;
    margin: 10px;
    text-align: center;
    color: #DCE1E9;
    font-weight: strong;

    &:hover{
        cursor: pointer;
    };

}

.flagText{
    text-align: center;
    font-weight: bold;
}
// .bomb{
//     background: black;
// }
.flagged{
    background: blue;
    color: blue;
};

.bombUncovered{
    background: red;
}

.main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gameBoard{
    width: 500px;
    background-color: #DCE1E9;
}