body {
font-family: 'Arial', sans-serif;
text-align: center;
background-color: rgb(10,10,36);
color: plum; 
}

h1 {
font-size: 2em;
margin: 20px 0;
color: plum; 
}

.game-container {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}

.memory-game {
width: 400px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.memory-card {
width: 90px;
height: 90px;
background-color: #f8c8dc; 
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 24px;
font-weight: bold;
color: black; 
}

.memory-card img {
width: 80%;
height: 80%;
display: none; 
}

.memory-card.flipped img {
display: block; 
}