body {
    background-image: url('https://img.freepik.com/free-vector/realistic-galaxy-background_23-2148991322.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.centre-container {
    display: relative;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    padding-top: 10vh; /* Pushes content down */
}

.header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    z-index: 2;
    padding-top: 10vh; /* Pushes content down */
}

.bingo-word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(5rem, 15vw, 10rem); /* Scales but has max size */
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    /* Gradient text effect */
    background: linear-gradient(to bottom, black 0%, #FF9700 20%, #FF9700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Optional text shadow for better readability */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 100px;
    /* Black text outline */
    -webkit-text-stroke: 2px black; /* Thin black outline */
}

.bingo-overlay {
    position: absolute;
    top: 20%; /* Move higher above BINGO */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4vw; /* Increase for better visibility */
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 3; /* Ensure it's above bingo-word */
}

.grid {
    width: 100%;
    height: 60vh;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.grid-square {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
}

.cell {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 45px;
}

.bingo-letters {
    font-size: 4vw; /* Scales the B-I-N-G-O letters */
    font-weight: bold;
    margin-bottom: 10px;
}

.bingo-letter-1 {
    color: #FE0000;
    text-align: center;
}

.bingo-letter-2 {
    color: #FF9700;
    text-align:center;
}
.bingo-letter-3 {
    color: #00FF01;
    text-align: center;
}
.bingo-letter-4 {
    color: #66FEFF;
    text-align: center;
}
.bingo-letter-5 {
    color: #9A00FF;
    text-align: center;
}


.row-1 {
    background-color: #FE0000;
}

.row-2 {
    background-color: #FF9700;
}

.row-3 {
    background-color: #00FF01;
}

.row-4 {
    background-color: #66FEFF;
}

.row-5 {
    background-color: #9A00FF;
}

.table {
    margin-top: 50px;
    border-collapse: collapse;
    width: 100%;
}

.hovereffect td {
    cursor: pointer;
    width: 10px;
}

.cell a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 2vw; /* Scales with screen size */
    text-align: center;
}


/*************************************/
/*Balls*/

.bingo-ball {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    margin: 5px;
    transition: transform 0.2s;
}

.bingo-ball:hover {
    transform: scale(1.1);
}

.ball-1 {
    background-color: #FE0000;
}
/* Red */
.ball-2 {
    background-color: #FF9700;
}
/* Orange */
.ball-3 {
    background-color: #00FF01;
}
/* Teal */
.ball-4 {
    background-color: #66FEFF;
}
/* Dark Blue */
.ball-5 {
    background-color: #9A00FF;
}

.hide-ball-1 {
    color: #FE0000;
}
/* Red */
.hide-ball-2 {
    color: #FF9700;
}
/* Orange */
.hide-ball-3 {
    color: #00FF01;
}
/* Teal */
.hide-ball-4 {
    color: #66FEFF;
}
/* Dark Blue */
.hide-ball-5 {
    color: #9A00FF;
}




/* Yellow */

/*************************************/

.main{position:relative;}

.container {
    max-width: 90vw; /* Prevents stretching too wide */
}


h2 {color:white;}