* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: black;
}

body.gray {
    filter: grayscale(0.9);
}

.cell {
    position: absolute;
    transition-duration: 100ms;
    border: 1px solid transparent;
}

.cell.alive.type-0 {
    background: #8A4F7D;
    box-shadow: 0 0 10px #8A4F7D, 0 0 27px #8A4F7D, 0 0 40px #8A4F7D;
}
.cell.alive.type-1 {
    background: #D9B8C4;
    box-shadow: 0 0 10px #D9B8C4, 0 0 27px #D9B8C4, 0 0 40px #D9B8C4;
}
.cell.alive.type-2 {
    background: #BCF8EC;
    box-shadow: 0 0 10px #BCF8EC, 0 0 27px #BCF8EC, 0 0 40px #BCF8EC;
}
.cell.alive.type-3 {
    background: #AED9E0;
    box-shadow: 0 0 10px #AED9E0, 0 0 27px #AED9E0, 0 0 40px #AED9E0;
}
.cell.alive.type-4 {
    background: #0075F2;
    box-shadow: 0 0 10px #0075F2, 0 0 27px #0075F2, 0 0 40px #0075F2;
}

.cell.first-frame.type-0 {
    border: 1px solid #8A4F7DA0;
    background: #8A4F7DA0;
}
.cell.first-frame.type-1 {
    border: 1px solid #D9B8C4A0;
    background: #D9B8C4A0;
}
.cell.first-frame.type-2 {
    border: 1px solid #BCF8ECA0;
    background: #BCF8ECA0;
}
.cell.first-frame.type-3 {
    border: 1px solid #AED9E0A0;
    background: #AED9E0A0;
}
.cell.first-frame.type-4 {
    border: 1px solid #0075F2A0;
    background: #0075F2A0;
}