.press-start-2p-regular {
    font-family: "Press Start 2P", system-ui;
    
    font-style: normal;

}

.card-bg {
    background-color: #242526;
    color: #888;

}

.default-text {
    color: #888;
}

.credits {
    background-color:white;
}

/* Create a checkerboard pattern with alternating colors */
.checkerboard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 40px 40px; /* Size of each square in the checkerboard */
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 50%, transparent 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 50%, transparent 50%);
    background-position: 0 0, 20px 20px; /* Shift one of the patterns */
    pointer-events: none; /* Prevent interaction with the overlay */
    border-radius: inherit; /* Match the border radius of the container */
}

/* Container for image and overlay */
.image-container {
    position: relative;
    display: inline-block;
    border-radius: 15px; /* Adjust the radius as needed */
    overflow: hidden; /* Ensure the rounded corners clip the content */
    max-width: 200px; /* Maximum width */
    max-height: 200px; /* Maximum height */
}

.image-container img {
    display: block;
    width: 100%; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: inherit; /* Match the border radius of the container */
}