:root {
  --fade-out: 1s;
  --fade-in: .2s;
  --cell-size: 10px;
  --columns: 50;
}

*, *::before, *::after {
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

html{
  height: 100svh;
  width: 100vw;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:azure;
  background-color: black;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  }
  
.grid {
  max-width: 100vw;
  max-height: 100svh;
  display: grid;
  grid-template-columns: repeat(var(--columns), var(--cell-size));
  background-color:#000000;
  /* width: fit-content; */
  /* margin: 0 auto; */
  /* gap: 1px; */
  /* align-items: center; */
  /* justify-items: center; */
  /* overflow: hidden; */
  /* border: 5px solid darkblue; */
  /* border-radius: 5px; */
}

#gen-cnt {
  margin: .25em;
  text-align: center;
  font-weight: 100;
  font-size: 2em;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  /* transition: background-color var(--fade-out) ease-out; */
  /* width: calc(var(--cell-size) - 2px);
  height: calc(var(--cell-size) - 2px);
  margin: 1px; */
  /* background-color: white; */
  /* border-radius: calc(var(--cell-size) / 4); */
}

.alive {
  background-color: rgb(255, 0, 0);
  /* transition: background-color var(--fade-in) ease-in; */
}

.control_panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .5em;
  visibility: hidden;
  background-color: rgb(0 0 0 /50%);
  transition:visibility 0.3s linear,opacity 0.3s linear;
}

.control_panel_hover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2em;
  background-color: transparent;
}

.control_panel_hover:hover .control_panel {
  visibility: visible;
}

.controls {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
  width: 100%;
  justify-content: center;
  gap: 1em;
}

button {
  color: white;
  background-color: transparent;
  border: 2px solid green;
  border-radius: .5rem;
  font-size: 1.5em;
  padding: .5rem 1rem;
}

button:hover {
  background-color: green;
}