style.css

[data-theme="default"] {
  --fg: hsl(0, 0%, 25%);
  --border: hsl(0, 0%, 55%);

  --bg: hsl(0, 0%, 95%);
  --button-bg: hsl(0, 0%, 99%);
  --input-bg: hsl(0, 0%, 90%);

  --on: #1da1f288;
  --off: #b4f2abbb;
  --marker: #ffc600;

  --cell-border: hsl(0, 0%, 55%);
  --label-border: hsl(0, 0%, 75%);
  --shape-border: hsl(0, 0%, 25%);
}

[data-theme="dark"] {
  --fg: hsl(0, 10%, 70%);
  --border: hsl(0, 10%, 10%);

  --bg: hsl(0, 0%, 20%);
  --button-bg: hsl(0, 0%, 25%);
  --input-bg: hsl(0, 0%, 15%);

  /* --on: #2b7e82dd;
  --off: #b4f2abdd; */
  --on: #1da1f288;
  --off: #b4f2ab88;
  --marker: #ffc600;

  --cell-border: #fff;
  --label-border: #ffffff33;
  --shape-border: #fff;
}

[data-theme] {
  color: var(--fg);
  background-color: var(--bg);
  transition: color 0.3s ease-in, background-color 0.3s ease-in;
}

body {
  font-family: "Quicksand", sans-serif;
  -moz-osx-font-smoothing: grayscale;
}

.app {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

header > * {
  padding: 0.1em;
}

.title {
  color: #00d4ff;
  background: linear-gradient(68deg, #fff300, #00d4ff);
  background-clip: inherit;
  background-size: 200% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  -webkit-animation: HeaderFlow 20s ease infinite;
  -moz-animation: HeaderFlow 20s ease infinite;
  animation: HeaderFlow 20s ease infinite;
}

header {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 1.2em;
}

.wrapper > ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme,
.wrapper > ul > li {
  margin: 0 0.4em;
}

.toggle,
.wrapper > ul > li:not(.timer) {
  cursor: pointer;
}

header svg {
  width: 1.5em;
  fill: var(--fg);
  transition: fill 0.3s ease-in;
}

.timer {
  width: 3.3em;
  text-align: right;
  font-feature-settings: “tnum”;
  font-variant-numeric: tabular-nums;
}

.toggle-wrapper {
  width: 75px;
  height: 34px;
  position: relative;
  margin: 0.4em;
  background-color: var(--input-bg);
  transition: background-color 0.3s ease-in;
  border-radius: 999em;
}

.toggle-wrapper input {
  position: absolute;
  left: -999em;
}

.toggle {
  width: 100%;
  height: 100%;
  display: block;
}

.toggle-icon {
  position: absolute;
  display: block;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: inset -3px 3px 0 3px #bab8ab;
  transform: translate3d(41px, 0, 0) rotate(180deg);
  transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

input:checked + .toggle > .toggle-icon {
  background-color: #f3d076;
  transform: translate3d(0, 0, 0);
  border-radius: 999em;
  box-shadow: inset -8px 8px 0 15px transparent;
}

.game {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.grid,
.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  flex-direction: column;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 80%;
}

.tool {
  position: relative;
  margin: 0.5em;
}

.tool > div {
  position: absolute;
  padding: 1em;
  cursor: pointer;
}

.selector.active {
  fill: var(--fg);
}

.tool:not(.active) {
  fill: var(--fg);
  transition: all 0.3s ease-in;
}

.active[data-paint="water"] {
  fill: var(--on);
}

.active[data-paint="air"] {
  fill: var(--off);
}

.tool svg .tool-list-container {
  padding: 1em;
}

.tool.active {
  opacity: 1;
}

.tool:not(.active) {
  opacity: 0.4;
}

.tool-list-container > ul {
  display: flex;
}

.tool-list-container > ul > li {
  background-color: var(--button-bg);
  transition: background-color 0.3s ease-in;
  border-radius: 8px;
  width: 10vmin;
  height: 10vmin;
  min-width: 4em;
  min-height: 4em;
}

.cell,
.cell-label,
.cell-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 3em;
  font-size: 4.5vmin;
  width: 6vmin;
  height: 6vmin;
}

[data-fill="water"] {
  background-color: var(--on);
}

[data-fill="air"] {
  background: var(--off);
}

.cell {
  position: relative;
}

.cell::before {
  border: 1px solid;
  border-color: var(--cell-border);
  transition: border-color 0.3s ease-in;
  opacity: 0.2;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
}

.h.cell::after,
.v.cell::after,
.vh.cell::after,
.top-row.cell::after,
.bottom-row.cell::after,
.left-column.cell::after,
.right-column.cell::after {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 1;
}

.h.cell::after {
  border-bottom: 2px solid var(--shape-border);
}

.v.cell::after {
  border-right: 2px solid var(--shape-border);
}

.vh.cell::after {
  border-right: 2px solid var(--shape-border);
  border-bottom: 2px solid var(--shape-border);
}

.top-row.cell::after {
  border-top: 2px solid var(--shape-border);
}

.bottom-row.cell::after {
  border-bottom: 2px solid var(--shape-border);
}

.left-column.cell::after {
  border-left: 2px solid var(--shape-border);
}

.right-column.cell::after {
  border-right: 2px solid var(--shape-border);
}

/* TODO: Add transitions */
/* FIXME: Is this a real use-case for !important? */
/* border-left and -top are unset by sibling selectors
   to avoid double-borders */
.cell:hover::before {
  border: 2px dashed !important;
  color: var(--marker);
  background-color: #00000011;
  transition: none;
  z-index: 2;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 3px;

  opacity: 1;
}

.cell-label {
  cursor: pointer;
  border: 1px dashed;
  border-color: var(--label-border);
  transition: border-color 0.3s ease-in, opacity 0.3s ease-in;
}

.cell-label.not-active > span {
  opacity: 0.2;
}

.row > .cell-label {
  border-right: none;
}

.row-label > .cell-label {
  border-bottom: none;
}

.cell + .cell::before,
.cell-label + .cell-label {
  border-left: none;
}

.row + .row > .cell::before,
.row + .row > .cell-label {
  border-top: none;
}

.hidden {
  visibility: hidden;
}

@-webkit-keyframes HeaderFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes HeaderFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes HeaderFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (min-width: 560px) {
  header > * {
    padding: 0.7em;
  }

  .wrapper > ul > li {
    margin: 0.4em;
  }
}

@media (min-width: 400px) and (orientation: landscape) {
  .game {
    flex-direction: row;
  }

  .tool-list-container > ul {
    flex-direction: column;
  }

  .controls {
    flex-direction: column;
    flex-wrap: nowrap;
    width: unset;
    height: 72vmin;
  }
}