/* Styles.css */



body {
    background:
      radial-gradient(32px at calc(100% + calc(32px*.866)) 50%,#b6adde 99%, #0000 101%) 0 calc(-5*32px/2),
      radial-gradient(32px at calc(100% + calc(32px*.866)) 50%,#b6adde 99%, #0000 101%) calc(-2*calc(32px*.866)) calc(32px/2),
      radial-gradient(32px at 100% 50%,#74c0bb 99%, #0000 101%) 0 calc(-2*32px),
      radial-gradient(32px,#b6adde 99%, #0000 101%) calc(32px*.866) calc(-5*32px/2),
      radial-gradient(32px,#74c0bb 99%, #0000 101%) calc(32px*.866) calc( 5*32px/2),
      radial-gradient(32px at 100% 100%,#b6adde 99%, #0000 101%) 0 calc(-1*32px),   
      radial-gradient(32px at 0%   50% ,#b6adde 99%, #0000 101%) 0 calc(-4*32px),
      radial-gradient(32px,#74c0bb 99%, #0000 101%) calc(-1*calc(32px*.866)) calc(-7*32px/2),
      radial-gradient(32px,#b6adde 99%, #0000 101%) calc(-1*calc(32px*.866)) calc(-5*32px/2),
      radial-gradient(32px at 100% 50%,#74c0bb 99%, #0000 101%) calc(-2*calc(32px*.866)) 32px,
      radial-gradient(32px,#b6adde 99%, #0000 101%) calc(-1*calc(32px*.866)) calc(32px/ 2),
      radial-gradient(32px,#74c0bb 99%, #0000 101%) calc(-1*calc(32px*.866)) calc(32px/-2),
      radial-gradient(32px,#b6adde 99%, #0000 101%) 0 calc(-1*32px),
      radial-gradient(32px,#74c0bb 99%, #0000 101%) calc(32px*.866) calc(32px/-2),
      radial-gradient(32px,#b6adde 99%, #0000 101%) calc(32px*.866) calc(32px/ 2) 
      #74c0bb;
background-size: calc(4*calc(32px*.866)) calc(6*32px);
    font-family: Arial, sans-serif;
    text-align: center;
}
#stats {
    margin: 20px 0;
    font-size: 18px;
}
#restartButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
}
#restartButton:hover {
    background-color: #45a049;
}
.board {
    display: inline-block;
    margin: 20px;
}
.cell {
    width: 30px;
    height: 30px;
    border: 1px solid #cccccc00;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    cursor: pointer;

    /* Default color for unrevealed tiles */
    background-color: #535353;

    /* Default color for unrevealed tile text */
    color: #110000;
}
.revealed {
    /* Color for revealed tiles */
    background-color: #cbcbcb;

    /* Color for revealed tile text */
    color: #000000;
}
.mine {
    /* Color for mines */
    background-color: #ff0000;
}