:root {
    --wood-level-1: repeating-linear-gradient(
        45deg,
        #af9358,
        #af9358 10px,
        #d2b48c 10px,
        #d2b48c 20px
    );

    --wood-level-2: repeating-linear-gradient(
        45deg,
        #3e2723,
        #3e2723 10px,
        #5d4037 10px,
        #5d4037 20px
    );

    --wood-level-3: repeating-linear-gradient(
        45deg,
        #8b4513,
        #8b4513 10px,
        #a0522d 10px,
        #a0522d 20px
    );

    --wood-level-4: repeating-linear-gradient(
        45deg,
        #2e2e2e,
        #2e2e2e 10px,
        #404040 10px,
        #404040 20px
    );

    --wood-level-5: repeating-linear-gradient(
        45deg,
        #b8860b,
        #b8860b 10px,
        #daa520 10px,
        #daa520 20px
    );
}

.card.level-1 {
    background: var(--wood-level-1);
}

.card.level-2 {
    background: var(--wood-level-2);
}

.card.level-3 {
    background: var(--wood-level-3);
}

.card.level-4 {
    background: var(--wood-level-4);
}

.card.level-5 {
    background: var(--wood-level-5);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0; /* Set a background color for the entire window */
}

.memory-game {
    display: grid;
    grid-template-columns: repeat(4, 120px); /* Adjust the number of columns as needed */
    gap: 10px;
    padding: 20px; /* Add padding for the decorative frame */
    background-color: #a3a3a3; /* Set a background color for the grid */
    border-radius: 5px; /* Add rounded corners to the grid */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Add a subtle shadow to the grid */
}

.card {
    width: 100px;
    height: 100px; /* A common aspect ratio for playing cards */
    border: 2px solid #555; /* Dark border for the card */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 56px;
    font-weight: bold;
    background: repeating-linear-gradient(
        45deg,
        #af9358, /* Fancier color */
        #af9358 10px,
        #d2b48c 10px,
        #d2b48c 20px
    ); /* Gradient background for the card */
    opacity: 2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow to the card */
    border-radius: 8px; /* Add rounded corners to the card */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for hover effects */
}


.card.disabled {
    pointer-events: none; /* Disable pointer events for the card */
    transform: none !important; /* Remove transform for disabled cards */
}

.card:hover {
    transform: scale(1.2); /* Enlarge the card on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Enhance box shadow on hover */
}

.card:active {
    transform: scale(0.90); /* Slightly shrink the card on click */
}

.card:not(.hidden) {
    box-shadow: none; /* Remove box shadow when card is not hidden */
    border: none; /* Remove border when card is not hidden */
    background:  none
}

/* Add styles for the game info container and paragraphs */
#buttonContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    background: rgb(156, 186, 186);
    border-radius: 10px;
}

/* .game-info p {
    margin: 0;
} */

.game-info span {
    color: #bd5e00; /* Change color as needed */
}

/* Add any additional styling as needed */

h1 {
    /* margin-top: 30px; */
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    align-items: center;
    color: rgb(232, 232, 8);
    align-content: center;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(4, 80, 106);
    display: flex;
    justify-content: center;
    padding: 10px 10px;
    }