<!-- ======================================================================= -->
<!-- FILE: styles.css                                                        -->
<!-- ======================================================================= -->
<!-- Save this file as styles.css in your theme's folder.                    -->
<!-- ======================================================================= -->
<style>
    body {
        font-family: 'Inter', sans-serif;
    }

    /* Style for the active navigation link */
    .tool-link.active {
        background-color: #4f46e5;
        color: white;
    }

    /* Bingo card styling */
    .bingo-card {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border: 2px solid #1f2937;
        border-radius: 0.5rem;
        overflow: hidden;
        aspect-ratio: 1/1; /* Maintain a square shape */
    }
    .bingo-header {
        background-color: #1f2937;
        color: white;
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .bingo-cell, .bingo-header {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d1d5db;
        text-align: center;
        padding: 0.5rem;
    }
    .bingo-cell {
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 500;
    }
    #free-space {
        background-color: #e5e7eb;
        font-weight: 600;
        font-size: 1rem;
    }
</style>