body {

    font-family: Arial, sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background-color: #f0f0f0;

    margin: 0;

}



#bingo-container {

    text-align: center;

}



#bingo-table {

    margin: 0 auto;

    border-collapse: collapse;

}



#bingo-table th, #bingo-table td {

    border: 1px solid #000;

    width: 60px;

    height: 60px;

    text-align: center;

    font-size: 1.5em;

    vertical-align: middle;

}



#bingo-table td {

    background-color: grey;

    color: white;

}



#controls {

    margin: 20px 0;

}



#waterfall-container {

    position: relative;

    height: 240px;

    overflow: hidden;

    margin-bottom: 20px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}



.waterfall-row {

    display: flex;

    justify-content: space-around;

    font-size: 1.5em;

    transition: opacity 1s linear;

    opacity: 0;

    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));

}



.waterfall-row:nth-child(1) {

    opacity: 0.6;

}



.waterfall-row:nth-child(2) {

    opacity: 0.4;

}



.waterfall-row:nth-child(3) {

    opacity: 0.2;

}



.highlight {

    background-color: red !important;

}



.bingo-row {

    animation: bingo-animation 1s forwards;

}



@keyframes bingo-animation {

    from { background-color: yellow; }

    to { background-color: green; }

}



@keyframes gradient-animation {

    0% { color: red; }

    25% { color: orange; }

    50% { color: yellow; }

    75% { color: green; }

    100% { color: blue; }

}



.bingo-gradient {

    animation: gradient-animation 1s infinite;

}