style.css

@import url('https://fonts.googleapis.com/css?family=Orbitron');
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');
@import url('https://fonts.googleapis.com/css?family=Wendy+One');
*{
	margin:0;
	padding:0;
}
/*adding backgroud*/
body{
	background: url('images/bg1.png')no-repeat center center fixed; 
	background-size: cover;	
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
/*Game title*/
h1#title
{	position: relative;
	left:20px;
	color: darkred;
	text-align: center;
	padding-top: 30px;
	font-family: 'Wendy One', sans-serif;
	font-size: 60px;
	text-shadow: 3px 0px 0px gray;
	letter-spacing: 5px;
}
/* over all wrapper*/
#wrapper{
	position: relative;
	margin: 0 auto;

}
.btn{
	display: block;
	margin: 0 auto;
	text-align: center;
}
/*====================Game styling======================*/
#game{
	padding: 5px;
	margin: 0 auto;
	height: 610px;
	width: 400px;
	margin-top: 1%;
	box-sizing: border-box; 
	display: block;
}

#grid{
	width: 437px;
	padding: 15px;
	height: 450px;
	border:2px solid gray;
	box-sizing: border-box;
	position: relative;
	background: url('images/bg2.jpg');
	border-style: outset;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}
 span img{
 	height: 30px;
 	width: 30px;
 }

.panel{
	width: 437px;
	height: 94px;
	border:2px solid gray;
	padding: 15px;
	box-sizing: border-box; 
	position: relative;
	text-align:center;
	background: url('images/bg2.jpg');
	border-style: outset;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}
/*winning image*/
img{
	width: 400px;
	height: 400px;
}

/*=====================classes styling===================== */
#smily{
	
	border:3px solid gray;
	display:inline-block; 
	margin: 0 auto; 
}
.happy{
	height: 60px;
	width: 60px;
	background: #fff;
	background-image: url('images/smilyhappy.png'); 
	background-size: cover;	
}
.sad{
	height: 60px;
	width: 60px;
	background: #fff;
	background-image: url('images/sad.png'); 
	background-size: cover;	
}

.cool{
	height: 60px;
	width: 60px;
	background: #fff;
	background-image: url('images/cool.png'); 
	background-size: cover;	
}
#time{
	height: 60px;
	width: 100px;
	border:3px solid gray;
	display:inline-block;
	float: right;  
	background: black;
	font-family: 'Orbitron', sans-serif;
	color:red;
	box-sizing: border-box; 
	font-size: 25px;
	padding-top: 5%;
	border-style: inset;
}
#numbomb{
	height: 60px;
	width: 100px;
	border:3px solid gray;	
	display:inline-block; 
	float: left; 
	background: black;
	font-family: 'Orbitron', sans-serif;
	box-sizing: border-box; 
	color:red;
	font-size: 25px;
	padding-top: 5%;
	border-style: inset;
}
.column{

	width: 50px;
	float:left;
	height: 430px;
	font-size: 30px;}
.icon{
	border:1px solid black;
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	text-align: center;
}
.square{
	border:1px solid black;
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	text-align: center;
	background: rgb(171,171,171);
}
.closed{
	width: 50px;
	height: 50px;
	background-image: url('images/unopened.png'); 
	background-size: cover;
	box-sizing: border-box;	
}
.zero{
	background: lightgray;
}

.one{
	background-image: url('images/1.png'); 
	background-size: cover;	
}
.two{
	background-image: url('images/2.png'); 
	background-size: cover;	
}
.three{
	background-image: url('images/3.png'); 
	background-size: cover;	
}
.four{
	background-image: url('images/4.png'); 
	background-size: cover;	
}
.five{
	background-image: url('images/5.png'); 
	background-size: cover;	
}
.six{
	background-image: url('images/6.png'); 
	background-size: cover;	
}
.seven{
	background-image: url('images/7.png'); 
	background-size: cover;	
}
.eight{
	background-image: url('images/8.png'); 
	background-size: cover;	
}
.bomb{
	background-image: url('images/bomb.png'); 
	background-size: cover;	
}
.clickedbomb{
	background-image: url('images/clickedbomb.png'); 
	background-size: cover;	
}
.flag{
	background-image: url('images/flag.png'); 
	background-size: cover;	
}
/* styling instructions*/
#instruction{
	text-shadow: 3px 0px 0px gray;
	padding: 30px;
	height: auto;
	width: 400px ;
	margin-top: 1%;
	border:2px solid gray;
	box-sizing: border-box; 
	border-style: outset;
	border-radius: 30px;
	background: url('images/bg2.jpg');
	flex:1;
	margin-right: 10%;
}
#content{
	background: rgba(255,255,255,.3);
	border-radius: 30px;
	padding: 10px;
}
p{
	line-height: 35px;
	font-size: 25px;
	font-family: 'Josefin Slab', serif;
    font-weight: 900;
}
.modal-body, .modal-header, .modal-footer
{
	background: #787467;
}
/*when the picture and the game can't sit 
next to each other bcause of minimizing 
the screen but the instruction beneath the game*/
@media screen and (max-width: 1200px) {
    #game {
        display: block;
        margin: 0 auto;
    }
    #wrapper{
	position: relative;
	margin: 0 auto;
	display: block;

}