#title {
padding-left: 5px;
border: 1px solid black;
border-radius: 10px;
width: 95vw;;
background: #F7D708;
font-family: Arial, Helvetica, sans-serif;
font-size: 2vw;
}
.title_icons {
font-size: 1.4vw;
width: 2vw;
height: 2vw;
margin-right: 0.5vw;
margin-top: 0.25vh;
float: right;
text-align: center;
cursor: pointer;
}
#reload_but{
background-position: center; 
background-size: contain; 
background-repeat: no-repeat;
background-image: url('../images/reload_icon.png');
}
#feedback {
 	position: absolute;
	padding: 1vw;
    	left: 37%;
	top: 50%;
    	z-index: 10;
	text-align:center;
	font-family:Arial,Helvetica,sans-serif;
	font-size:2vw;
	background: #FDB813;
	color:  #b84012;
	border: 2px solid;
	border-radius: 16px;
	width: 20%;
	clear: both;
	

}

#main {
width: 90vw;
height: 90vh;
float:left;

}

.card {
position: relative;
margin: 1%;
float: left;
width: 20%;
height: 20%;
cursor: pointer;
}
.card:nth-child(4n+1) {
margin-left: 10%;
}
.card_back {
position: absolute;

width: 100%;
height: 100%;

background-color:silver;
background-image: 
radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 0    150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 50%  100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
radial-gradient(circle at 0    50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:5vw 5vh;;

border: solid 3px black;
border-radius: 15px;
visibility: show;
z-index:1;
}


.card_front_text {
box-shadow: 10px 10px 5px #888888;
position: absolute;
width: 100%;
height: 100%;
border: solid 3px black;
border-radius: 15px;
background-position: center; 
background-size: contain; 
background-repeat: no-repeat;
visibility: show;
text-align: center;

font-family: Arial, Helvetica, sans-serif;
font-size: 2vw;
color:  #c7b708;
z-index:0;
display: table; 
}
.card_front_image {
box-shadow: 10px 10px 5px #888888;
position: absolute;
width: 100%;
height: 100%;
border: solid 3px black;
border-radius: 15px;
background-position: center; 
background-size: contain; 
background-repeat: no-repeat;
visibility: show;
text-align: center;

font-family: Arial, Helvetica, sans-serif;
font-size: 2vw;
z-index:0;

}
span { 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
}
#foot {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7vw;
clear:all;
width:20vw; 
background: white;
float: right;
} 
.footbit {
width: 45%; 
float: right;"
}
.breakrow {
clear: both;
}