@font-face
{
	font-family:'Fula Font';
	src:url(/fonts/FulaFont-Regular.eot);
	src:url(/fonts/FulaFont-Regular.eot?#iefix) format("embedded-opentype"),url(/fonts/FulaFont-Regular.woff2) format("woff2"),url(/fonts/FulaFont-Regular.woff) format("woff"),url(/fonts/FulaFont-Regular.ttf) format("truetype"),url(/fonts/FulaFont-Regular.svg#FulaFont-Regular) format("svg");
	font-weight:700;
	font-style:normal;
	font-display:swap
}

.game-container
{
	text-align:center
}

h1
{
	font-size:2vw;
	line-height:2vw;
	font-family:'Fula Font'
}

h1 small
{
	line-height:1.3vw;
	font-size:1.3vw
}

.info-panel
{
	margin:15px 0;
	font-size:1.2em
}

.game-board
{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:15px;
	perspective:1000px;
	width:100%;
	max-width:100%;
	justify-items:center
}

.card
{
	width:17vw;
	height:15vw;
	cursor:pointer;
	position:relative;
	transform-style:preserve-3d;
	transition:transform .6s
}

.card.flipped
{
	transform:rotateY(180deg)
}

.card-face
{
	position:absolute;
	width:100%;
	height:100%;
	backface-visibility:hidden;
	border-radius:10px;
	overflow:hidden
}

.card-back
{
	background-image:url(back.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center
}

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

.card-front img
{
	width:100%;
	height:100%;
	object-fit:contain
}

.win-screen-overlay
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000000b3;
	display:none;
	justify-content:center;
	align-items:center;
	z-index:100
}

.win-screen-box
{
	background:url(win.png) center center no-repeat transparent;
	background-color:#ffffff80;
	border-radius:0;
	text-align:center;
	box-shadow:0 5px 15px #0000004d;
	width:100%;
	height:100%;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center
}

.win-screen-content {
    position: relative;
    width: 60vh;
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0px;
    font-size: 2vw;
    line-height: 2vw;
}

.win-screen-content p {
    position: absolute;
    top: 0%;
    left: 0%;
    background: #f5c86c;
    width: 20vh;
    height: 20vh !important;
    border-radius: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
    transform: translate(-5vw, -5vw) rotate(0deg);
}

.timerEnd{
    font-size: 2vw;
}


@media (min-width: 1368px) {
    .win-screen-content p {
        margin-bottom: -12vh;
        margin-top: 12vh;
    }
    .win-screen-content p {
        top: -15%;
    }
}

@media (max-width: 1368px) {
    .card {
        width: 13vw;
        height: 13vw;
    }
}