style.css

/* Change the background */
/* Change the font */

/* html {
    width:100%;
    height:100%;
    background:linear-gradient(325deg, #03001e 0%, #7303c0 30%, #ec38bc 70%, #fdeff9 100%);
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
} */

body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
    font-family: 'Encode Sans Expanded', sans-serif;
    font-family: 'Quicksand', sans-serif;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.memory-game {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.controls {
    display: flex;
    gap:20px;
    margin-bottom: 20px;

}

.start-button {
background:#222224 ;
color:#fff;
border-radius: 5%;
padding: 10px 20px;
border: 0;
cursor: pointer;
font-size: 18pt;
font-weight: bold;

}

.disabled{
    color:#757575;  
}

.stats{
    color: #fff;
    font-size: 14pt;
    font-weight: bold;
}

.board-container {
    position:relative;
}

.board, .win{
    border-radius:5px;
    box-shadow: 0 25px 50px rgb(33 33 33 /25%);
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}

.board{
padding: 20px;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 20px;
}


.board-container.flipped .board {
    transform: rotateY(180deg) rotateZ(50deg);
}

.board-container.flipped .win {
    transform: rotateY(0) rotateZ(0);
}

.card{
    position: relative;
    width: 100px;
    height: 10px;
    cursor: pointer;
}

.card-front, .card-back {
    position: absolute;
    border-radius: 5px;
    width:100%;
    height:100%;
    background: #282a3a;
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);	
    backface-visibility: hidden;
}

.card-back{
    transform: rotateY(180deg) rotateZ(50deg);
    font-size: 28pt;
    user-select: none;
    text-align: center;
    line-height: 100px;
    background: #fdf8e6;  
}

.card.flipped .card-back {
    transform: rotateY(0) rotateZ(0);
}

.win{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align: center;
    background:#FDF8E6;
    transform: rotateY(180deg) rotateZ(50deg);
}

.win-text{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    font-size: 21pt;
    font-weight: bold;
    color: #282a3a;

}

.highlight{
    color: #e73c7e;
}