#gasses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gas {
  --blur: 1.75rem;
  --box-blur: calc(0.5 * var(--blur));
  --glow: var(--color);
  --size: 12rem;

  align-items: center;
  border-radius: 12px;
  border: 4px solid currentColor;
  box-shadow: 
    /* --- "glass" tube --- */
    /* inside */ inset 0 0 0 2px
      rgba(0, 0, 0, 0.15),
    /* outside */ 0 0 0 2px rgba(0, 0, 0, 0.15),
    /* --- glow --- */ /* inside */ inset 0 0 var(--box-blur) var(--glow),
    /* outside */ 0 0 var(--box-blur) var(--glow);
  color: var(--color, white);
  display: inline-flex;
  flex-direction: column;
  font-family: system-ui, sans-serif;
  height: var(--size);
  justify-content: space-around;
  padding: 1rem;
  width: var(--size);
}
.number {
  font-weight: 700;
}

.symbol {
  font-size: 4rem;
  font-family: "Neon Glow";
  text-shadow: 0 0 var(--blur) var(--glow);
}

.gas.kr {
  --color: #00ffff;
  filter: saturate(200%);
  cursor: pointer;
}

.gas.kr:hover {
  filter: brightness(120%) drop-shadow(0 0 10px var(--glow));
}