* {
  margin: 0;
  padding: 0;
  color: rgb(0, 0, 0);
}

html, body {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

#grid{
    position: relative;
    display: grid;
    
    
    background-color: #211d1d;
    width: 960px;
    height: 960px;
    border: 2px solid black;
    left: 50%;
    transform: translate(-50%);
    top: 26px;
}

.cell{
    width: 12px;
    height: 12px;
    background-color: rgb(255, 255, 255);
}


.cellFood{
    background-color: #4C5C2D;
}

.cellAlive{
    background-color: #D96868;
}

.cellInfected{
    background-color: #aeff00 !important;
}

#features{
    position: relative;
    width: 100vw;
    color: white;
    left: 10vw;
    top: 30px;
    max-width: calc(100vw - 10vw);
}

#tickSpeed{
    color: white;
    border: 1px solid white;
    background-color: black;
    width: 30px;
    padding: 2px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

button{
    padding: 10px;
    margin: 10px;
    color: white;
    background-color: black;
    border: none;
    transition: 100ms;
}
button:hover{
    background-color: #FBF6F6;
    color: black;
    cursor: pointer;
}

#traitStats{
    width: 100vw;
    height: 300px;
}

[id="1"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="2"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="3"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="4"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="5"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="6"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="7"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="8"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="9"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="10"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="11"]{
   font-size: 20px;
    color: rgb(0, 0, 0);
}
[id="12"]{
    font-size: 20px;
    color: rgb(0, 0, 0);
}