#worldgrid {
    display: grid;
    /*grid-gap: 5px;*/
}

.cell {
    width: 100%;
    /*height: 1vh;*/
    /*padding-top: 100%;*/
    /*-webkit-transition: background-color 300ms;
    -moz-transition: background-color 300ms;
    -o-transition: background-color 300ms;
    -ms-transition: background-color 300ms;
    transition: background-color 300ms;    */
}

.alive {
    /*background-color: rgb(181, 247, 236);*/
    background-color: rgb(63, 87, 116);
    animation: color-me-in 2s;
}

.dead {
    background-color: rgb(21, 52, 82);
}

.cell:hover {
    background-color: bisque;
}

@keyframes color-me-in {
    0% {
        background: rgb(255, 184, 51);
    }
    20% {
      background: rgb(214, 234, 236);
    }
    30% {
        background: rgb(33, 185, 199);
    }
      100% {
        background-color: rgb(63, 87, 116);
    }
  }