body{
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
    background-color: rgb(23 25 34);
    color: rgb(104 110 136);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

p{
    margin: -3px 0;
}

input{
    margin-bottom: 5px;
}

#container{
    display: flex;
    height: 455px;
}

#stat-table{
    margin-right: 10px;
    background-color: #31354c;
    padding: 5px;
    width: 400px;
}

#header{
    margin-top: -15px;
    align-content: center;
    text-align: center;
    justify-content: center;
    display: flex;
}

#table{
    display: block;
    justify-content: center;
    align-items: center;
}

.row{
    display: flex;
    border-top: 2px solid rgb(84 84 152 / 0.6);
    height: 75px;
    justify-content: center;
    align-items: center;
}

.stat{
    margin-left: 5px;
}

#grid{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.cell{
    background-color: rgb(44 47 64);
    border: 1px solid rgb(92 92 145 / 0.6);
    height: 10px;
    width: 10px;
}

.female{
    background-color: rgb(179 12 154);
}

.male{
    background-color: rgb(12 12 179);
}

.food{
    background-color: rgb(128 3 3);
    border: 1px solid rgb(145 92 92 / 0.6);
}

.water{
    background-color: rgb(67 159 198);
    border: 1px solid rgb(58 104 124);
}

.disease{
    background-color: rgb(5 195 20);
}