/* body styling */

body {
    background-color: grey;
    display: block;
    height: 750px;
    width: 850px;
    border-style: solid;
    border-width: thick;
    border-color: black;
}


/* header section styling */
.h1 {
    display: flex;
    height: 65px;
    justify-content: center;
    font-family: 'Inconsolata', monospace;
    background-color: rgb(73, 130, 130);
    font-size: 20px;
}

/* signature section styling */
.signature{
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 100px;
}

/* gameboard section styling */
.gameboard {
    display: flex;
    justify-content: center;
    /* centering board a little better */
    padding-left: 10px;
    margin-left: 50px;
   
}

/* cell field/cells style */
.cellfield {
    background-color: rgb(94, 94, 174);
    height: 550px;
    width: 570px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    flex-wrap: wrap;
    /* setting border around cell field */
    border-style: solid;
    border-width: thick;
    font-style: bold;
}

/* to style all div children of cellfield parent */
.cellfield>* {
    color: grey;
    /* optimized tile % for 16 x 16 board */
    height: 5%;
    width: 5%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-style: solid;
    border-width: medium;
    border-color: rgb(35, 38, 82);
    /* hidding text of cells, will be hidden by hidden class and revealed by revealed class */
    font-size: 0px;
}

 /* hiddin (starting state) cells are grey with invisible txt */
 .hidden {
    background-color: grey;
    color: grey;
    border-style: solid;
    border-color: black;
    /* image for the pop out cells */
    background: url(https://tutorialflow.com/wp-content/uploads/2018/12/t.png);
    background-size: 100%;
    /* preventing repeat default of tile image */
    background-repeat: no-repeat;
    /* hiding text from hidden cells */
    font-size:0px;
    
 }

 /* revealed state shows text */
.revealed {
    background-color: rgb(85, 85, 107);
    color: black;
    border-style: solid;
    border-color: black;
    background: none;
    /* reveals all text, ** note empty cells are blue with js when empty cells are generated */
    font-family: 'Bebas Neue', cursive;
    font-size:11.5px;
    font-style: bold;
}

/* class to replace revealed/hidded style when start game is clicked*/
.startScreenCellState{
    background-color: rgb(85, 85, 107);
    color: black;
    border-style: solid;
    border-color: rgb(35, 38, 82);
    background: none;
}

.bomb {
    background-color: red;
    color: rgb(161, 43, 43);
    font-size:10px;
    /* image for bombs when hit bomb cell */
    background: url(https://w1.pngwing.com/pngs/249/974/png-transparent-red-circle-minesweeper-minesweeper-deluxe-minesweeper-adfree-video-games-land-mine-naval-mine-android-thumbnail.png);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    /* hide the 'bomb text' */
    font-size:0px;
}

/* diffused shows green color and dark green text */
.diffused {
    background-color: green;
    color: rgb(3, 44, 3);
    /* raise +1 when bomb is diffused so visualize over bomb class */
    z-index: 1;
    font-size:10px;
    /* flag image */
    background: url(https://w7.pngwing.com/pngs/337/559/png-transparent-minesweeper-computer-icons-bing-maps-video-game-mines-miscellaneous-game-angle.png);
    background-size: 100%;
    background-repeat: no-repeat;
    /* hide the 'diffused bomb text' */
    font-size:0px;
}


/* start button style (start button on home page ** different from start new game button)*/
/* home screen buttons container set to flex */
.home-screen-buttons{
    display: flex;
    justify-content: center;
}
/* start button container */
.startButton {
    background-color: blue;
    height: 500px;
    width: 400px;
    display: flex;
    justify-content: center;
}

/* modifying actual start button with gif */
#startButton{
    height: 500px;
    width: 410px;
    display: flex;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    color: black;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/09f06ffb-f5cb-4e53-b2c4-0833ac13bb02/d2741m4-8cf520ab-538f-46e7-9ab1-936115f0aed0.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzA5ZjA2ZmZiLWY1Y2ItNGU1My1iMmM0LTA4MzNhYzEzYmIwMlwvZDI3NDFtNC04Y2Y1MjBhYi01MzhmLTQ2ZTctOWFiMS05MzYxMTVmMGFlZDAuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.pzoQqfg26zWl9FrBSr9_fQaSd-LshVYt4r8vTBtTqgM);
    background-size: 400px;
    background-position: center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: thick;
    border-color: black
}

/* win "return home" screen is similar to start button */
#winHomeScreen{
    height: 424px;
    width: 424px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    background: url(https://art.pixilart.com/b4b7a4350309388.gif);
    background-size: 800px;
    background-position: center;
    /* don't need text, header explains */
    font-size: 0px;
}

/* loss "return home" screen is similar to start button and win screen */
#lossHomeScreen{
    height: 424px;
    width: 450px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    background: url(https://art.pixilart.com/5704184572d487f.gif);
    background-size: 450px;
    background-position: top;
    background-repeat: no-repeat;
    /* don't need text, header explains */
    font-size: 0px;
}

/* return to home screen button */
/* setting style of return home button's container */
.returnHomeButton {
    width: 100px;
    /* set height of this to 10 px to move the cell field/gameboard up */
    height: 10px;
    display: inline-flex;
    
}

/* getting return home button to upper left */
#returnHomeButton {
    width: 200px;
    height: 70px;
    display: inline-flex;
    background: url(http://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/6d391cb2cddb5a5.png);
    background-size: 80px;
    background-position: center;
    background-repeat:no-repeat;
    margin-left: 10px;
    margin-top: 10px;
    font-size: 0;
}

/* style of action buttons container **inclueds diffused and active bomb headers */
.action-buttons {
    display: flex;
    justify-content: center;
    font-family: 'Inconsolata', monospace;
    font-size: 15px;
    margin: 20px;
    height: 50px;
}

/* style of reset button initially set to green, changes to red in game */
#resetButton{
    background-color: green;
    height: 80px;
    width: 150px;
    margin-right: 200px;
    border-style: solid;
    border-width: thick;
    border-color: black;
    font-family: 'Bebas Neue', cursive;
    font-size: 20px;
}

/* flag container elements */

/* setting style of the flag buttons container */
.flagButtons {
    display: flex;
    margin: 10px;
    width: 50px;
    font-family: 'Inconsolata', monospace;
    font-size: 14px;
    flex-direction: column;
    justify-content: top;

}
/* only seen when flag off is pressed and at reset/start */
#flagsRemaining{
    width: 120px;
    margin-left: 5px

}

#flagOnButton {
    height: 100px;
    width: 100px;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Minesweeper_flag_generic.svg/1200px-Minesweeper_flag_generic.svg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100px;
    background-color: black;
    font-size: 0px;

}

/* only seen when flag on button is pressed */
#flagOffButton {
    height: 90px;
    width: 100px;
    background-color: rgb(255, 179, 0);
    font-family: 'Bebas Neue', cursive;
    font-size: 20px;
    border-style: solid;
    border-width: thick;
    border-color: black;

}

#flagGoneButton {
    height: 90px;
    width: 100px;
    background-color: rgb(236, 68, 12);
    font-family: 'Bebas Neue', cursive;
    font-size: 20px;
    border-style: solid;
    border-width: thick;
    border-color: black; 
}

/* added spacing btw bombs diffused header and surrounding elements to set organization at bottom */
#bombsDiffused {
    display: flex;
    padding-right: 20px;
    padding-left: 50px;
}