:root {
  --ease: cubic-bezier(0.17, 0.67, 0.54, 1);
  --color-bg: rgb(14, 39, 60);

  --offset: 8px;
  --min-offset: calc(var(--offset) * -1);
  --close-scale: 0.7;
  --open-scale: 0.9;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: var(--color-bg);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

svg {
  width: 90vw;
  max-width: 620px;
  margin: 0 auto;
  overflow: visible;
}

rect,
g {
  transform-box: fill-box;
  transform-origin: center;
}

.face {
  stroke: none;
  fill: var(--color-bg);
  transform-box: fill-box;
  transform-origin: center;
}

#shadow {
  transform: translateY(20px);
  fill: rgba(0, 0, 0, 0.1);
  filter: blur(8px);
}

.cell {
  transform-box: fill-box;
  transform-origin: center;
  transition: all 80ms var(--ease) 180ms;
  transform: scale(var(--close-scale));
  stroke: var(--color-inactive);
  stroke-width: 4px;
  fill: none;
  opacity: 1;
}

#face-0,
#face-1,
#face-2 {
  display: none;
}

#face-3 {
  --color-active: rgba(208, 57, 112, 1);
  --color-inactive: rgba(23, 65, 99, 0.2);
}

#face-4 {
  --color-active: rgba(182, 43, 94, 1);
  --color-inactive: rgba(19, 54, 83, 0.2);
}

#face-5 {
  --color-active: rgba(212, 73, 124, 1);
  --color-inactive: rgba(31, 87, 132, 0.2);
}

.cell[data-alive="1"] {
  stroke: var(--color-active);
}

#face-3 .cell[data-alive="1"] {
  transform: scale(var(--open-scale)) translate(0px, var(--min-offset));
}

#face-4 .cell[data-alive="1"] {
  transform: scale(var(--open-scale)) translate(var(--offset), var(--offset));
}

#face-5 .cell[data-alive="1"] {
  transform: scale(var(--open-scale))
    translate(var(--min-offset), var(--offset));
}

button.reset {
  position: fixed;
  right: 24px;
  bottom: 24px;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.3s ease;
  border: none;
  background: rgba(211, 188, 204, 0.08);
  color: hsl(100, 0%, 78%);
  width: auto;
  margin: 48px auto 0;
  padding: 8px 16px;
  font-size: 1rem;
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  outline: none;
}

button.reset:disabled {
  opacity: 0.5;
}

button.reset:hover:not(:disabled) {
  background: rgba(211, 188, 204, 0.2);
}

button.reset:active:not(:disabled) {
  background: rgba(211, 188, 204, 0.3);
}