.container {
    float: left;
    width: 360px;
    height: 640px;
    border-radius: 20px;  
    text-align: center;
    font-family: 'Roboto', sans-serif;

    /* Special background */
    background: rgba(226,226,226,1);
    background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(50%, rgba(219,219,219,1)), color-stop(51%, rgba(209,209,209,1)), color-stop(100%, rgba(254,254,254,1)));
    background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    background: linear-gradient(135deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1);
    
    -webkit-box-shadow: 1px 10px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    1px 10px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         1px 10px 5px 0px rgba(50, 50, 50, 0.75);
} 

.container h1  {
    font-size:36px;
    line-height: 36px;
    padding-top:15px;}

.header  {
    font-family: 'Orbitron', sans-serif; 
    color:red;
    background-color: black; 
    width: 100%;
    display: block;
    height: auto;
    margin-bottom:30px;
}

.header .timer {
    width:30%;
    display: inline-block; 
    float: left ; 
    padding: 10px;
    font-size: 20px;
    line-height: 20px;}
    
.header .smiley {
    padding: 10px;
    display: inline-block; 
    float: none ; 
    font-size:20px;
    line-height: 20px}
    
.header .mines-left {
    width:30%;
    display: inline-block; 
    float: right; 
    padding: 10px;
    font-size:20px;
    line-height: 20px}
    
/*  START - FOOTER CUSTOMISE */

.footer, .footer p {
    font-size: 18px;
    display: block;
    margin: 5px;
    margin: 10px 0;
    
}    
.footer input {
        display: inline-block;
        margin: 0 10px;
        font-size:20px;
    }
.restart {
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    font-size: 16px;
    line-height: 16px;
    color: red;
    background-color: black;
    padding: 15px;
    }
    /*  END - FOOTER CUSTOMISE */
    
    /* HIGH SCORE  */
    /* .best-score table thead {}  */
    .best-score table{margin: 0px;border-collapse:separate; 
        border-spacing:1rem;}
    .best-score table td {background-color: white;}
    .best-score table td:hover {background-color: white;}
    /* .best-score table tr {1padding:10px;margin-top:15px;} */
    .best-score {
        font-family: 'Roboto', sans-serif;
        width: 400px;
        margin-left:100px;
        float:left;
        font-size: 20px;
        line-height: 20px;
    }
    .best-score h2 {font-size:36px;line-height: 36px;padding-top:15px;}
    

/* TABLE CUSTOMISE */

table  {
    width: auto;
    margin:auto}

table td {  
    text-align: center;
    background-color: lightblue;
}

.beginner table td {width: 85px;height: 85px;}
.medium table  td {width: 55px;height: 55px;}
.expert table  td {width: 40px;height: 40px;}

table td:hover {background: rgba(212,228,239,1);
    background: -moz-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1)));
    background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -o-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: -ms-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    background: linear-gradient(to right, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=1 );}
        
.flag {font-size: 25px;}
.mine {color: darkslategray;font-size: 25px;}
.shown {background-color: lightgray;font-weight: bold}
.hitten {background-color: red;}

/* START NUMBERS CSS - FONT COLOR */
.one {color: blue;}
.two {color: green}
.three {color: red}
.four {color: darkblue}
.five {color: darkgreen}
.six {color: teal}
/* END NUMBERS CSS - FONT COLOR */