html {
  
}

body {     
	font-family: 'Work Sans', sans-serif;
	font-weight: bold;
	
	background-color: #d7d1505b   ;
}
@media only screen and (min-width: 992px){
.col-md-9 {
    width: 100%;
}}
@media  (min-width:988px){
.col-md-12 {
     width: 100%; 
}
    
}
@media  (min-width:988px)and (max-width:1200px){
#game {
     width: 100%; 
}
    
}
@media (min-width: 768px)and (max-width:1200px){
#instructions {
     width: auto; 
}}


#body {
	 /*font-size:14px;*/
	background: rgba(216,210,78,0.3568627450980392);#d7d1505b;
	font-family: 'Work Sans', sans-serif;
}
#instructions h1 {font-weight: bold;
	font-size:2.5rem;
	color:rgb(32,64,86);

}
#instructions h2{
	font-size:1.5rem;
	font-weight:bold;
	color:rgb(74,74,74);
}
.card{
	
	display:flex;
	justify-content:center;
	align-items:center;
	height:12.5rem;
	background-color:rgb(32,64,86);
	border: 4px solid white;
	border-radius: 8px;
	font-size: 7rem;
    font-weight: 900;
        cursor: pointer;
        padding-right:15px;
	padding-left:15px;
       font color: rgb();
      




}
#game {
	margin-top:5.25rem;
      
      align-items: 
	/*position:center;
	min-height:1px;
	/*padding-right:15px;
	padding-left:15px;*/
}
 .card:hover {
	background-color:#59e76e;yellow;

}
 .card :before {
 	
 }
 .card :after {
 	background-color:grey;
 }

.about{
	margin:;
}
/* color after matchedbackground color rgb(153,153,153)and Number colorrgb(204,204,204)*/
/*card color on click hsl (25%.85%,65%)
      (55&,85,65)*/


#reset {
    padding:5px;
    border-radius:25px;
    margin: 50px 50px 50px 50px;
	background-color:#ff4274;
	outline:none;
}