html, body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	height: 100%;
	margin: 0;
	background-image: url(http://www.mythicsilence.com/malevolent/Images/layout/starfall.png);
}

main {
	width: 1003px;
	margin: 0 auto;
	display: flex;
        flex-direction: column;
        height: 100%;	
}

header {
	position: relative;
	height: 162px;
}

#home {
	width: 1003px;
	height: 92px;
	display: block;
	background-image: url(http://www.mythicsilence.com/malevolent/Images/layout/titlebanner.png);
}
#nav {
	width: 803px;
	height: 70px;
	display: block;
	position: relative;
	left: 106px;
}
#breeds{
	top: 0px;
	left: 0px;
	width: 87px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) 0px 0px;
}
#breeds:hover{
	top: 0px;
	left: 0px;
	width: 87px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) 0px 0px;
}
#clothes{
	top: 0px;
	left: 87px;
	width: 91px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -87px 0px;
}
#clothes:hover{
	top: 0px;
	left: 87px;
	width: 91px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -87px 0px;
}
#scenes{
	top: 0px;
	left: 178px;
	width: 82px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -178px 0px;
}
#scenes:hover{
	top: 0px;
	left: 178px;
	width: 82px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -178px 0px;
}
#skins{
	top: 0px;
	left: 260px;
	width: 77px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -260px 0px;
}
#skins:hover{
	top: 0px;
	left: 260px;
	width: 77px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -260px 0px;
}
#toys{
	top: 0px;
	left: 337px;
	width: 73px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -337px 0px;
}
#toys:hover{
	top: 0px;
	left: 337px;
	width: 73px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -337px 0px;
}
#treats{
	top: 0px;
	left: 410px;
	width: 87px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -410px 0px;
}
#treats:hover{
	top: 0px;
	left: 410px;
	width: 87px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -410px 0px;
}
#decor{
	top: 0px;
	left: 497px;
	width: 84px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -497px 0px;
}
#decor:hover{
	top: 0px;
	left: 497px;
	width: 84px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -497px 0px;
}
#misc{
	top: 0px;
	left: 581px;
	width: 80px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -581px 0px;
}
#misc:hover{
	top: 0px;
	left: 581px;
	width: 80px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -581px 0px;
}
#other{
	top: 0px;
	left: 661px;
	width: 76px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -661px 0px;
}
#other:hover{
	top: 0px;
	left: 661px;
	width: 76px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -661px 0px;
}
#crew{
	top: 0px;
	left: 737px;
	width: 74px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar.png) -737px 0px;
}
#crew:hover{
	top: 0px;
	left: 737px;
	width: 74px;
	height: 70px;
	display: block;
	position: absolute;
	background: url(http://www.mythicsilence.com/malevolent/Images/layout/navbar1.png) -737px 0px;
}

content {
	padding: 10px;
	text-align:center;
	background-color: #7c888f;
	display: block;
	border-style: solid;
  	border-color: #bee7ff;
	border-width: 3px;
	height: 75%;
        width: 900px;
        margin: 0 auto;
	overflow-x: auto;
	overflow-y: auto;
}

a:link {color: #fffebe; }    
	a:visited {color: #fffebe; }
	a:hover {color: #000000; }
	a:active {color: #fffebe; } 

.style1 {
	color: #990000;
        font-size: 14px;
}
#content {
	width: 800px;
	margin: 0 auto;
	text-align: center;
	column-count: 2;
	column-gap: 200px;

}
.headings {
	margin: 0 auto;
	text-align: center;
}
#content2 {
	width: 600px;
	margin: 0 auto;
	text-align: left;
	column-count: 3;
	column-gap: 110px;
	
}

.game-info-container {
	grid-column: 1/ -1;
	display: flex;
	justify-content: space-between;
}

.game-container {
	display: grid;
	grid-template-columns: repeat(6, auto);
	grid-gap: 10px;
	width: 800px;
	margin: 0 auto;
	perspective: 500px;
}

.card {
	position: relative;
	height: 177px;
	width: 123px;
	background-color:#7c888f;
}

/*.card:hover {
	cursor: url(uploadpath/cursorname.cur);
}
*/
.card-face {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	backface-visibility: hidden;
	transition: transform 500ms ease-in-out;

}

.card.visible .card-back {
	transform: rotateY(-180deg);
}

.card.visible .card-front {
	transform: rotateY(0);
}

.card-back {		
	border-radius: 12px;
	border-width: 1px;
	border-style: solid; 

}

.card-front {
	transform: rotateY(180deg);
}

/*.card.matched .card-value {

}
*/

.overlay-text {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;	
	justify-content: center;
	align-items: center;
	z-index: 100;
	color: #fffebe;
}

.overlay-text-small {
	font-size: .3em;
}

.overlay-text.visible {
	display: flex;
	flex-direction: column;
	animation: overlay-grow 500ms forwards;
}

@keyframes overlay-grow {
	from {
		background-color: rgba(0, 0, 0, 0);
		font-size: 0;
	}
	to {
		background-color: rgba(0, 0, 0, .8);
		font-size: 8em;
	}
}