*{
    box-sizing: border-box;
}
:root{
    --grid_columns: 4;
    --grid_rows: 4;
	--card_size: 120px;
	--grid_gap: 10px;
}
body{
    margin: 0;
    background-color: rgb(26, 2, 28);
	font-family: "Hind", sans-serif;
}
.header{
    color: rgb(193, 102, 201);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgb(26, 2, 28) 70%, rgb(51, 0, 56));
    border-bottom: 2px solid rgb(76, 49, 79);
    height: 100px;
}
.header__title{
    margin: 20px 40px;
}
.pokeball {
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-image: linear-gradient(to bottom, 
	rgb(237, 83, 77) 48%, 
	rgb(51, 51, 51) 48%, 
	rgb(51, 51, 51) 52%, 
	rgb(255, 255, 255) 52%, 
	rgb(255, 255, 255) 100%);
	box-shadow: inset -5px 0 rgba(0, 0, 0, 0.2);
	animation: spin 5750ms linear infinite;
}
.pokeball::before {
	position: relative;
	content: "";
	display: block;
	top: 25px;
	left: 25px;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	border: 3px solid #ffffff;
	animation: colorchange 3s infinite;
	box-shadow: 0px 0px 0px 3px #333333;
	transform: translate(-50%, -50%);
}
.pokeball.reverse{
    animation-direction: reverse;
}

.main{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.cards_container{
    perspective: 1000px;
    display: grid;
    grid-template-rows: repeat(var(--grid_rows), var(--card_size));
    grid-template-columns: repeat(var(--grid_columns), var(--card_size));
    grid-gap: var(--grid_gap);
}

.card{
    border: 1px solid rgb(76, 49, 79);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 5px 0px rgb(12, 1, 12);
    transition: transform 450ms ease-in,
        opacity 450ms ease-in-out,
        box-shadow 150ms linear;
    cursor: pointer;
	transform-style: preserve-3d;
	transform: rotateY(180deg);
}

.card:hover{
    box-shadow: 0px 0px 7px 0px rgb(113, 56, 118);
}
.card__front, .card__back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute; 
    top: 0;
    left: 0;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    opacity: 1;
}
.card__front{
	box-shadow: inset -2px -2px 5px 0px rgb(17, 1, 17),
		inset 2px 2px 5px 0px rgb(52, 14, 55);
	transform: rotateY(180deg);
}
.card__back {
	z-index: 2;
	transform: rotateY(0deg);
    background-size: cover;
    background-position: center center;
}   
.card.flipped {
	transform: rotateY(0deg);
}  
.card.flipped:hover{
    box-shadow: 0px 0px 4px 0px rgb(45, 29, 46);
    cursor: initial;
} 
.card.solved{
	transform: rotateY(0deg) scale(1.3);
    cursor: initial;
    opacity: 0;
}

@keyframes colorchange {
	0% {
		background-color: #d6d6d6;
	}
	50% {
		background-color: #ed534d;
	}
	100% {
		background-color: #d6d6d6;
	}
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@media screen and (max-width: 540px){
	body{
		height: 100vh;
	}
	.pokeball{
		display: none;
	}
	main{
		height: calc(100vh - 120px);
	}
	.cards_container{
		width: 100%;
		height: 100%;
	}
	:root{
		--card_size: 25%;
		--grid_gap: 0px;
	}
}