[data-molecule] {
  --width: 300px;
  --cell: var(--gutter2x);
  --cell: calc(var(--width)/9);
  --area: 9;
  --canvas-width: calc(var(--area) * var(--cell));
  --canvas-height: calc(var(--area) * var(--cell));
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  grid-template-rows: repeat(5, var(--cell));
  width: var(--canvas-height);
  height: calc(var(--canvas-width) - 4 * var(--cell));
  margin: var(--paragraph-gap) 0;
}

[data-molecule][data-value=ch4] {
  grid-template-areas: ".  .  .  .  Hn .  .  .  ." ".  .  .  .  Bn .  .  .  ." ".  .  Hw Bw C  Be He .  ." ".  .  .  .  Bs .  .  .  ." ".  .  .  .  Hs .  .  .  .";
}

[data-molecule][data-value=c3h8] {
  grid-template-areas: ".  .  H3 .  H4 .  H5 .  ." ".  .  B5 .  B6 .  B7 .  ." "H1 B1 C1 B2 C2 B3 C3 B4 H2" ".  .  B8  . B9 .  BX .  ." ".  .  H6 .  H7 .  H8 .  .";
}

[data-molecule] [data-atom],
[data-molecule] [data-bond] {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-molecule] [data-atom] {
  text-align: center;
  letter-spacing: 0;
}

[data-molecule] [data-bond]:after {
  display: block;
  content: "";
  width: var(--gutter);
  height: 1px;
  background-color: var(--color);
}

[data-molecule] [data-bond=v]:after {
  height: var(--gutter);
  width: 1px;
}

[data-reaction] {
  --width: 420px;
  --cell: calc(var(--width)/17);
  --area: 9;
  --canvas-width: calc(var(--area) * var(--cell));
  --canvas-height: calc(var(--area) * var(--cell));
  display: grid;
  grid-template-columns: repeat(15, var(--cell));
  grid-template-rows: repeat(5, var(--cell));
  width: var(--width);
  height: calc(var(--canvas-width) - 4 * var(--cell));
  margin: var(--paragraph-gap) auto;
}

[data-reaction][data-value=sabatier] {
  animation-name: sabatier;
  animation-duration: 1s;
  grid-template-areas: ".  .  .  .  .  .  .  .  H1 .  .  .  .  .  .  .  ." ".  .  .  .  .  .  .  .  B1 .  .  .  .  .  .  .  ." ".  .  .  .  .  .  H4 B4 C  B2 H2 .  .  .  .  .  ." ".  .  .  .  .  .  .  .  B3 .  .  .  .  .  .  .  ." ".  .  .  .  .  .  .  .  H3 .  .  .  .  .  .  .  .";
}

[data-reaction][data-value=c3h8] {
  grid-template-areas: ".  .  H3 .  H4 .  H5 .  ." ".  .  B5 .  B6 .  B7 .  ." "H1 B1 C1 B2 C2 B3 C3 B4 H2" ".  .  B8  . B9 .  BX .  ." ".  .  H6 .  H7 .  H8 .  .";
}

[data-reaction] [data-atom],
[data-reaction] [data-bond] {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

[data-reaction] [data-atom] {
  text-align: center;
  letter-spacing: 0;
}

[data-reaction] [data-bond]:after {
  display: block;
  content: "";
  width: var(--gutter);
  height: 1px;
  background-color: var(--color);
}

[data-reaction] [data-bond=v]:after {
  height: var(--gutter);
  width: 1px;
}

@keyframes sabatier {
  from {
    grid-template-areas: ".  .  .  .  .  .  H1 .  .  .  .  .  .  .  .  .  ." ".  .  .  .  .  .  .  .  B1 .  .  .  .  .  .  .  ." ".  .  .  .  .  .  H4 B4 C  B2 H2 .  .  .  .  .  ." ".  .  .  .  .  .  .  .  B3 .  .  .  .  .  .  .  ." ".  .  .  .  .  .  .  .  H3 .  .  .  .  .  .  .  .";
  }
  to {
    grid-template-areas: ".  .  .  .  .  .  .  .  H1 .  .  .  .  .  .  .  ." ".  .  .  .  .  .  .  .  B1 .  .  .  .  .  .  .  ." ".  .  .  .  .  .  H4 B4 C  B2 H2 .  .  .  .  .  ." ".  .  .  .  .  .  .  .  B3 .  .  .  .  .  .  .  ." ".  .  .  .  .  .  .  .  H3 .  .  .  .  .  .  .  .";
  }
}
@media (max-width: 1139px) {
  #sitefooter {
    --border-width: 10px;
    border-top: var(--border-width) solid var(--color);
    min-height: calc(var(--window-height) - var(--nav-height) - var(--border-width));
  }
}