body {
  background-color: darkolivegreen;
}

main {
  display: grid;
  max-width: 90em;
  grid-template-areas:
    "H  .  .  .  .  .  H1 H1 H1 H1  .  .  .  .  .  .  .  He"
    "Li Be .  .  .  .  H1 H1 H1 H1 .  .  B  C  N  O  F  Ne"
    "Na Mg .  .  .  .  .  .  .  .  .  .  Al Si P  S  Cl Ar"
    "K  Ca Sc Ti V  Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr"
    "Rb Sr Y  Zr Nb Mo Tc Ru Rh Pd Ag Cd In Sn Sb Te I  Xe"
    "Cs Ba La Hf Ta W  Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn"
    "Fr Ra Ac Rf Db Sg Bh Hs Mt Ds Rg Cn Nh Fl Mc Lv Ts Og"
    ".  .  .  Ce Pr Nd Pm Sm Eu Gd Tb Dy Ho Er Tm Yb Lu . "
    ".  .  .  Th Pa U  Np Pu Am Cm Bk Cf Es Fm Md No Lr . ";
}

.element {
  display: grid;
  width: 4em;
  height: 4em;
  border-style: solid;
  align-content: space-evenly;
  justify-items: center;
  margin: 0.1em;
}

.name {
  font-size: 2em;
}

.collected {
  filter: blur(2px);
}

.missing {
  filter: drop-shadow(2px 4px 6px black);
}

h1 {
  grid-area: H1;
  text-align: center;
}

.group0 {
  background-color: #ffde65;
}
.group1 {
  background-color: #f7931e;
}
.group2 {
  background-color: #c69c6d;
}
.group3 {
  background-color: #837091;
}
.group4 {
  background-color: #ffa1ff;
}
.group5 {
  background-color: #a6ffff;
}
.group6 {
  background-color: #ff5757;
}
.group7 {
  background-color: #8cc63f;
}
.group8 {
  background-color: #009245;
}
.group9 {
  background-color: #999999;
}