body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('./assets/donut_boat.png') no-repeat center center;
    background-size: cover;
}

#gameBoard {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(100vw / 8), 1fr));
    grid-auto-rows: calc(100vw / 8); /* Assuming you want 8 squares in a row */
}

.square {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* Ensures the square stays a square */
    transition: transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #ddd; /* Initial color or image for the square */
    border: 1px solid black;
}

.square:hover {
    transform: scale(1.1); /* hover effect */
}

.matched {
    animation: disappear 1s forwards;
}

@keyframes disappear {
    to {
        opacity: 0;
        transform: scale(0);
    }
}