body{
    font-family:monospace, sans-serif;
    padding: 1.5rem;
    color:green;
    background-color:black;}

.title{
    color:hotpink;}

.title-character{
    color:hotpink;
    font-weight: 900;
    font-size:1.3rem;}

.current-user-list {
    display:flex;
    flex-wrap:wrap;}

.current-user-list > .user{
    font-size: 1.3rem;
    color:#39ff14;
    border: 1px;
    border-color: darkgreen;
    border-style:solid;
    border-radius: 0.3rem;
    padding: 1rem;
    margin: 0.5rem;}

.cell-with-title-character{
    border: 1px;
    border-color: darkgreen;
    border-style:solid;
    border-radius: 0.3rem;
    padding: 1rem;
    margin: 0.5rem;}

.cell{
    color:#39ff14;}

.bare-cell{
    border: 1px;
    border-color: darkgreen;
    border-style: solid;
    border-radius: 0.3rem;
    padding: 1rem;
    margin: 0.5rem;}

.cell-list{
    display:flex;
    flex-wrap:wrap;}

.user-card{
    width: 75%;
    margin:auto;
    display:grid;
    row-gap: 2rem;
    column-gap: 2rem;
    grid-template-columns: repeat(6, 1fr);}

.user-card > .user-column{
    display:grid;
    column-gap: 2rem;
    row-gap: 2rem;}

.user-card > .user-column > .user-row{
    border: 1px;
    padding: 0.5rem;
    border-color: darkgreen;
    border-style: solid;
    border-radius: 1rem;
    color:#39bb14;
    font-size: 3rem;
    text-align: center;}

.user-card > .user-column > .title-char {
    padding: 0.5rem;
    color:hotpink;
    font-size: 4rem;
    text-align: center;
    font-weight: 900;}

.call-random-cell > button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: black;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2rem;
    border-radius: 1rem;}

.user-card > .user-column > .user-row.user-called {
    background-color: #404040;}

.user-card > .user-column > .user-row.bingo {
    color: white;}


.master-card{
    width: 75%;
    margin:auto;
    display:grid;
    row-gap: 2rem;
    column-gap: 2rem;
    grid-template-columns: repeat(6, 1fr);}

.master-card > .master-column{
    display:grid;
    column-gap: 2rem;
    row-gap: 2rem;}

.master-card > .master-column > .master-row{
    border: 1px;
    padding: 1rem;
    border-color: darkgreen;
    border-style: solid;
    border-radius: 1rem;
    color:#39bb14;
    font-size: 4rem;
    text-align: center;}

.master-card > .master-column > .title-char {
    padding: 1rem;
    color:hotpink;
    font-size: 6rem;
    text-align: center;
    font-weight: 900;}

.master-card > .master-column > .master-row.called {
    background-color: #404040;}

.history > .called {
    background-color: #404040;}

.waiting-on-user{
    color:grey;
    opacity:0.5;}

input{
    background-color: black;
    border-radius:0.5em;
    font-size: 2em;
    color: darkgreen;
    padding: 10px;}

button {
    background-color: #4CAF50;
    border:none;
    color:black;
    border-radius:0.5em;
    padding: 10px;
    margin: 10px;
    font-size: 2em;}