body {
    background-image: url('images/dinosurf.png'); /* Path to your image */
    background-size: 100% 100%; /* Cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the image */
    margin: 0; /* Remove default margin to ensure full coverage */
    overflow: hidden; /* Hide any potential overflow */
    width: 100vw; /* Set the body width to the viewport width */
    height: 100vh; /* Set the body height to the viewport height */
    display: flex; /* Enable flexbox layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}












.game-board {
    width: 90vw; /* Use a percentage of the viewport width */
    height: 90vh; /* Use a percentage of the viewport height */
}

.card {
	overflow: hidden;
    background-image: url('images/airshipParty.png'); /* Your card's background image */
    background-size: 100% 100%; /* Ensure the image covers the entire card */
    color: white; /* Text color for the card content */
    justify-content: center;
    align-items: center;
    font-size: 1.5em; /* Text size */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 2%; /* Rounded corners for the card */
    transition: transform 1.1s; /* Smooth transition for interactions */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Soft shadow for depth */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Text shadow for better readability */
}
.card .number {
    position: absolute; /* Position the number absolutely within the card */
    font-size: 20px; /* Adjust font size as needed */
}
.green {
    color: green; /* Green number color */
}

.red {
    color: red; /* Red number color */
}

@keyframes shrink {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 0;
    }
}

.shrink {
    animation: shrink 14.5s forwards; /* Adjust duration as needed */
}

@keyframes expand {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(5); opacity: 1; }
}

.win-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: #000;
    text-align: center;
    opacity: 0;
    z-index: 10; /* Ensure it's above everything else */
    animation: expand 3s forwards; /* Adjust time as needed */
}