<ol>
  <li data-mass="1.0078" class="rnm">
    <abbr title="Hydrogen">H</abbr>
  </li>
  <li data-mass="4.0026" class="nbl">
    <abbr title="Helium">He</abbr>
  </li>
  <li data-mass="6.941" class="alk">
    <abbr title="Lithium">Li</abbr>
  </li>
  <li data-mass="9.0122" class="aec">
    <abbr title="Beryllium">Be</abbr>
  </li>
  <li data-mass="10.811" class="met">
    <abbr title="Boron">B</abbr>
  </li>
  <li data-mass="12.0107" class="rnm">
    <abbr title="Carbon">C</abbr>
  </li>
  <li data-mass="14.0067" class="rnm">
    <abbr title="Nitrogen">N</abbr>
  </li>
  <li data-mass="15.9994" class="rnm">
    <abbr title="Oxygen">O</abbr>
  </li>
  <li data-mass="18.9984" class="hln">
    <abbr title="Fluorine">F</abbr>
  </li>
  <li data-mass="20.1797" class="nbl">
    <abbr title="Neon">Ne</abbr>
  </li>
  <li data-mass="22.9897" class="alk">
    <abbr title="Sodium">Na</abbr>
  </li>
  <li data-mass="24.305" class="aec">
    <abbr title="Magnesium">Mg</abbr>
  </li>
  <li data-mass="26.9815" class="trm">
    <abbr title="Aluminium">Al</abbr>
  </li>
  <li data-mass="28.0855" class="met">
    <abbr title="Silicon">Si</abbr>
  </li>
  <li data-mass="30.9738" class="rnm">
    <abbr title="Phosphorus">P</abbr>
  </li>
  <li data-mass="32.065" class="rnm">
    <abbr title="Sulfur">S</abbr>
  </li>
  <li data-mass="35.453" class="hln">
    <abbr title="Chlorine">Cl</abbr>
  </li>
  <li data-mass="39.948" class="nbl">
    <abbr title="Argon">Ar</abbr>
  </li>
  <li data-mass="39.0983" class="alk">
    <abbr title="Potassium">K</abbr>
  </li>
  <li data-mass="40.078" class="aec">
    <abbr title="Calcium">Ca</abbr>
  </li>
  <li data-mass="44.9559" class="trn">
    <abbr title="Scandium">Sc</abbr>
  </li>
  <li data-mass="47.867" class="trn">
    <abbr title="Titanium">Ti</abbr>
  </li>
  <li data-mass="50.9415" class="trn">
    <abbr title="Vanadium">V</abbr>
  </li>
  <li data-mass="51.9961" class="trn">
    <abbr title="Chromium">Cr</abbr>
  </li>
  <li data-mass="54.938" class="trn">
    <abbr title="Manganese">Mn</abbr>
  </li>
  <li data-mass="55.845" class="trn">
    <abbr title="Iron">Fe</abbr>
  </li>
  <li data-mass="58.9332" class="trn">
    <abbr title="Cobalt">Co</abbr>
  </li>
  <li data-mass="58.6934" class="trn">
    <abbr title="Nickel">Ni</abbr>
  </li>
  <li data-mass="63.546" class="trn">
    <abbr title="Copper">Cu</abbr>
  </li>
  <li data-mass="65.38" class="trn">
    <abbr title="Zinc">Zn</abbr>
  </li>
  <li data-mass="69.723" class="trm">
    <abbr title="Gallium">Ga</abbr>
  </li>
  <li data-mass="72.64" class="trm">
    <abbr title="Germanium">Ge</abbr>
  </li>
  <li data-mass="74.9216" class="met">
    <abbr title="Arsenic">As</abbr>
  </li>
  <li data-mass="78.96" class="rnm">
    <abbr title="Selenium">Se</abbr>
  </li>
  <li data-mass="79.904" class="hln">
    <abbr title="Bromine">Br</abbr>
  </li>
  <li data-mass="83.798" class="nbl">
    <abbr title="Krypton">Kr</abbr>
  </li>
  <li data-mass="85.4678" class="alk">
    <abbr title="Rubidium">Rb</abbr>
  </li>
  <li data-mass="87.62" class="aec">
    <abbr title="Strontium">Sr</abbr>
  </li>
  <li data-mass="88.9059" class="trn">
    <abbr title="Yttrium">Y</abbr>
  </li>
  <li data-mass="91.224" class="trn">
    <abbr title="Zirconium">Zr</abbr>
  </li>
  <li data-mass="92.9064" class="trn">
    <abbr title="Niobium">Nb</abbr>
  </li>
  <li data-mass="95.94" class="trn">
    <abbr title="Molybdenum">Mo</abbr>
  </li>
  <li data-mass="98" class="trn">
    <abbr title="Technetium">Tc</abbr>
  </li>
  <li data-mass="101.07" class="trn">
    <abbr title="Ruthenium">Ru</abbr>
  </li>
  <li data-mass="102.9055" class="trn">
    <abbr title="Rhodium">Rh</abbr>
  </li>
  <li data-mass="106.42" class="trn">
    <abbr title="Palladium">Pd</abbr>
  </li>
  <li data-mass="107.8682" class="trn">
    <abbr title="Silver">Ag</abbr>
  </li>
  <li data-mass="112.411" class="trn">
    <abbr title="Cadmium">Cd</abbr>
  </li>
  <li data-mass="114.818" class="trm">
    <abbr title="Indium">In</abbr>
  </li>
  <li data-mass="118.71" class="trm">
    <abbr title="Tin">Sn</abbr>
  </li>
  <li data-mass="121.76" class="met">
    <abbr title="Antimony">Sb</abbr>
  </li>
  <li data-mass="127.6" class="met">
    <abbr title="Tellurium">Te</abbr>
  </li>
  <li data-mass="126.9045" class="hln">
    <abbr title="Iodine">I</abbr>
  </li>
  <li data-mass="131.293" class="nbl">
    <abbr title="Xenon">Xe</abbr>
  </li>
  <li data-mass="132.9055" class="alk">
    <abbr title="Cesium">Cs</abbr>
  </li>
  <li data-mass="137.327" class="aec">
    <abbr title="Barium">Ba</abbr>
  </li>
  <li data-mass="138.9055" class="lan">
    <abbr title="Lanthanum">La</abbr>
  </li>
  <li data-mass="140.116" class="lan">
    <abbr title="Cerium">Ce</abbr>
  </li>
  <li data-mass="140.9077" class="lan">
    <abbr title="Praseodymium">Pr</abbr>
  </li>
  <li data-mass="144.242" class="lan">
    <abbr title="Neodymium">Nd</abbr>
  </li>
  <li data-mass="145" class="lan">
    <abbr title="Promethium">Pm</abbr>
  </li>
  <li data-mass="150.36" class="lan">
    <abbr title="Samarium">Sm</abbr>
  </li>
  <li data-mass="151.964" class="lan">
    <abbr title="Europium">Eu</abbr>
  </li>
  <li data-mass="157.25" class="lan">
    <abbr title="Gadolinium">Gd</abbr>
  </li>
  <li data-mass="158.9254" class="lan">
    <abbr title="Terbium">Tb</abbr>
  </li>
  <li data-mass="162.5" class="lan">
    <abbr title="Dysprosium">Dy</abbr>
  </li>
  <li data-mass="164.9303" class="lan">
    <abbr title="Holmium">Ho</abbr>
  </li>
  <li data-mass="167.259" class="lan">
    <abbr title="Erbium">Er</abbr>
  </li>
  <li data-mass="168.9342" class="lan">
    <abbr title="Thulium">Tm</abbr>
  </li>
  <li data-mass="173.04" class="lan">
    <abbr title="Ytterbium">Yb</abbr>
  </li>
  <li data-mass="174.967" class="lan">
    <abbr title="Lutetium">Lu</abbr>
  </li>
  <li data-mass="178.49" class="trn">
    <abbr title="Hafnium">Hf</abbr>
  </li>
  <li data-mass="180.9479" class="trn">
    <abbr title="Tantalum">Ta</abbr>
  </li>
  <li data-mass="183.84" class="trn">
    <abbr title="Tungsten">W</abbr>
  </li>
  <li data-mass="186.207" class="trn">
    <abbr title="Rhenium">Re</abbr>
  </li>
  <li data-mass="190.23" class="trn">
    <abbr title="Osmium">Os</abbr>
  </li>
  <li data-mass="192.217" class="trn">
    <abbr title="Iridium">Ir</abbr>
  </li>
  <li data-mass="195.084" class="trn">
    <abbr title="Platinum">Pt</abbr>
  </li>
  <li data-mass="196.9666" class="trn">
    <abbr title="Gold">Au</abbr>
  </li>
  <li data-mass="200.59" class="trn">
    <abbr title="Mercury">Hg</abbr>
  </li>
  <li data-mass="204.3833" class="trm">
    <abbr title="Thallium">Tl</abbr>
  </li>
  <li data-mass="207.2" class="trm">
    <abbr title="Lead">Pb</abbr>
  </li>
  <li data-mass="208.9804" class="met">
    <abbr title="Bismuth">Bi</abbr>
  </li>
  <li data-mass="209" class="met">
    <abbr title="Polonium">Po</abbr>
  </li>
  <li data-mass="210" class="hln">
    <abbr title="Astatine">At</abbr>
  </li>
  <li data-mass="222" class="nbl">
    <abbr title="Radon">Rn</abbr>
  </li>
  <li data-mass="223" class="alk">
    <abbr title="Francium">Fr</abbr>
  </li>
  <li data-mass="226" class="aec">
    <abbr title="Radium">Ra</abbr>
  </li>
  <li data-mass="227" class="act">
    <abbr title="Actinium">Ac</abbr>
  </li>
  <li data-mass="232.0381" class="act">
    <abbr title="Thorium">Th</abbr>
  </li>
  <li data-mass="231.0359" class="act">
    <abbr title="Protactinium">Pa</abbr>
  </li>
  <li data-mass="238.0289" class="act">
    <abbr title="Uranium">U</abbr>
  </li>
  <li data-mass="237" class="act">
    <abbr title="Neptunium">Np</abbr>
  </li>
  <li data-mass="244" class="act">
    <abbr title="Plutonium">Pu</abbr>
  </li>
  <li data-mass="243" class="act">
    <abbr title="Americium">Am</abbr>
  </li>
  <li data-mass="247" class="act">
    <abbr title="Curium">Cm</abbr>
  </li>
  <li data-mass="247" class="act">
    <abbr title="Berkelium">Bk</abbr>
  </li>
  <li data-mass="251" class="act">
    <abbr title="Californium">Cf</abbr>
  </li>
  <li data-mass="252" class="act">
    <abbr title="Einsteinium">Es</abbr>
  </li>
  <li data-mass="257" class="act">
    <abbr title="Fermium">Fm</abbr>
  </li>
  <li data-mass="258" class="act">
    <abbr title="Mendelevium">Md</abbr>
  </li>
  <li data-mass="259" class="act">
    <abbr title="Nobelium">No</abbr>
  </li>
  <li data-mass="262" class="act">
    <abbr title="Lawrencium">Lr</abbr>
  </li>
  <li data-mass="267" class="trn">
    <abbr title="Rutherfordium">Rf</abbr>
  </li>
  <li data-mass="270" class="trn">
    <abbr title="Dubnium">Db</abbr>
  </li>
  <li data-mass="271" class="trn">
    <abbr title="Seaborgium">Sg</abbr>
  </li>
  <li data-mass="270" class="trn">
    <abbr title="Bohrium">Bh</abbr>
  </li>
  <li data-mass="277" class="trn">
    <abbr title="Hassium">Hs</abbr>
  </li>
  <li data-mass="276" class="trn">
    <abbr title="Meitnerium">Mt</abbr>
  </li>
  <li data-mass="281" class="trn">
    <abbr title="Darmstadtium">Ds</abbr>
  </li>
  <li data-mass="282" class="trn">
    <abbr title="Roentgenium">Rg</abbr>
  </li>
  <li data-mass="285" class="trn">
    <abbr title="Copernicium">Cn</abbr>
  </li>
  <li data-mass="286" class="trm">
    <abbr title="Nihonium">Nh</abbr>
  </li>
  <li data-mass="289" class="trm">
    <abbr title="Flerovium">Fl</abbr>
  </li>
  <li data-mass="290" class="met">
    <abbr title="Moscovium">Mc</abbr>
  </li>
  <li data-mass="293" class="met">
    <abbr title="Livermorium">Lv</abbr>
  </li>
  <li data-mass="294" class="hln">
    <abbr title="Tennessine">Ts</abbr>
  </li>
  <li data-mass="294" class="nbl">
    <abbr title="Oganesson">Og</abbr>
  </li>
</ol>
  
<fieldset>
  <legend>Filter</legend>
  <label>
    <input type="radio" name="filter" checked>
    All
  </label>
  <label>
    <input type="radio" id="alk" name="filter">
    Alkali Metals
  </label>
  <label>
    <input type="radio" id="aec" name="filter">
    Alkaline Earth Metals
  </label>
  <label>
    <input type="radio" id="trn" name="filter">
    Transition Metals
  </label>
  <label>
    <input type="radio" id="trm" name="filter">
    Post-Transition Metals
  </label>
  <label>
    <input type="radio" id="met" name="filter">
    Metalloids (Semimetals)
  </label>
  <label>
    <input type="radio" id="rnm" name="filter">
    Reactive Non-Metals
  </label>
  <label>
    <input type="radio" id="hln" name="filter">
    Halogens
  </label>
  <label>
    <input type="radio" id="nbl" name="filter">
    Noble Gases
  </label>
  <label>
    <input type="radio" id="lan" name="filter">
    Lanthanides
  </label>
  <label>
    <input type="radio" id="act" name="filter">
    Actinides
  </label>
  <label>
    <input type="radio" id="brb" name="filter">
    Heisenberg
  </label>
</fieldset>

body {
  --scale: 1.3;
  font-family: system-ui, sans-serif;
  margin: .25em;
  padding: 0;
}

fieldset {
  border: 1px dashed color-mix(in srgb, currentColor, transparent 60%);
  display: grid;
  font-size: small;
  gap: .5ch;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  max-inline-size: 70ch;
  margin: 2em auto;
  padding: 1ch;
}

ol {
  all: unset;
  container-type: inline-size;
  counter-reset: element;
  display: grid; 
  font-size: 2cqi;
  gap: 1px;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(10, 1fr);

  /* Element name and abbreviation */
  abbr {
    display: grid;
    font-weight: 500;
    grid-area: 2 / 1 / 4 / 3;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    &::after {
      content: attr(title);
      display: block;
      font-size: 0.33em;
      font-weight: 400;
      place-self: end center;
    }
  }

  /* Element Box */
  li {
    aspect-ratio: 1 / 1;
    background: #EEE;
    counter-increment: element;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: .25ch;
    transition: scale .125s ease-in;
    &::before {
      content: counter(element);
    }
    &::after {
      content: attr(data-mass);
      grid-area: 1 / 2 / 2 / 2;
      justify-self: end;
    }
    &::before, &::after {
      font-size: .33em;
    }
    @media (hover: hover) {
      &:hover {
        box-shadow: 0 0 0 .25px #000;
        scale: var(--scale);
      }
    }

    /* Layout */
    &:nth-of-type(2) { grid-column: 18; }
    &:nth-of-type(5), &:nth-of-type(13) { grid-column: 13; }
    
    /* Lanthenides */
    &:nth-of-type(58) { grid-area: 9 / 4 / 9/ 4; }
    &:nth-of-type(59) { grid-area: 9 / 5 / 9/ 5; }
    &:nth-of-type(60) { grid-area: 9 / 6 / 9/ 6; }
    &:nth-of-type(61) { grid-area: 9 / 7 / 9/ 7; }
    &:nth-of-type(62) { grid-area: 9 / 8 / 9/ 8; }
    &:nth-of-type(63) { grid-area: 9 / 9 / 9/ 9; }
    &:nth-of-type(64) { grid-area: 9 / 10 / 9 / 10; }
    &:nth-of-type(65) { grid-area: 9 / 11 / 9 / 11; }
    &:nth-of-type(66) { grid-area: 9 / 12 / 9 / 12; }
    &:nth-of-type(67) { grid-area: 9 / 13 / 9 / 13; }
    &:nth-of-type(68) { grid-area: 9 / 14 / 9 / 14; }
    &:nth-of-type(69) { grid-area: 9 / 15 / 9 / 15; }
    &:nth-of-type(70) { grid-area: 9 / 16 / 9 / 16; }
    &:nth-of-type(71) { grid-area: 9 / 17 / 9 / 17; }

    /* Actinides */
    &:nth-of-type(90) { grid-area: 10 / 4 / 10 / 4; }
    &:nth-of-type(91) { grid-area: 10 / 5 / 10 / 5; }
    &:nth-of-type(92) { grid-area: 10 / 6 / 10 / 6; }
    &:nth-of-type(93) { grid-area: 10 / 7 / 10 / 7; }
    &:nth-of-type(94) { grid-area: 10 / 8 / 10 / 8; }
    &:nth-of-type(95) { grid-area: 10 / 9 / 10 / 9; }
    &:nth-of-type(96) { grid-area: 10 / 10 / 10 / 10; }
    &:nth-of-type(97) { grid-area: 10 / 11 / 10 / 11; }
    &:nth-of-type(98) { grid-area: 10 / 12 / 10 / 12; }
    &:nth-of-type(99) { grid-area: 10 / 13 / 10 / 13; }
    &:nth-of-type(100) { grid-area: 10 / 14 / 10 / 14; }
    &:nth-of-type(101) { grid-area: 10 / 15 / 10 / 15; }
    &:nth-of-type(102) { grid-area: 10 / 16 / 10 / 16; }
    &:nth-of-type(103) { grid-area: 10 / 17 / 10 / 17; }
  }
}

/* Filter */
body:has(#alk:checked) li:not(.alk),
body:has(#aec:checked) li:not(.aec),
body:has(#trn:checked) li:not(.trn),
body:has(#trm:checked) li:not(.trm),
body:has(#met:checked) li:not(.met),
body:has(#rnm:checked) li:not(.rnm),
body:has(#hln:checked) li:not(.hln),
body:has(#nbl:checked) li:not(.nbl),
body:has(#lan:checked) li:not(.lan),
body:has(#act:checked) li:not(.act) { 
  opacity: 0.2;
}

/* Heisenberg Mode */
body:has(#brb:checked) {
  background: radial-gradient(circle, hsl(90, 67%, 22%) 10%, hsl(84, 71%, 7%) 40%, hsl(90, 100%, 8%) 100%);
  background-size: cover;
  color: #FFFFFF;
  li:not(:nth-of-type(35),:nth-of-type(56)) {
    --scale: 1;
    background-color: hsla(113, 40%, 4%, .5);
    color: hsla(120, 6%, 26%, .85);
  }
  :is(li:nth-of-type(35),li:nth-of-type(56)) {
    background: linear-gradient(135deg, #3E8467, #101F15);
    scale: var(--scale);
  }
}

/* Alkali Metals */
.alk {
  background-color: #ff6666;
}

/* Alkaline Earth Metals */
.aec {
  background-color: #ffdead;
}

/* Transition Metals */
.trn {
  background-color: #add8e6;
}

/* Post-Transition Metals */
.trm {
  background-color: #cccccc;
}

/* Metalloids (Semimetals) */
.met {
  background-color: #cccc99;
}

/* Reactive Non-Metals */
.rnm {
  background-color: #99ff99;
}

/* Halogens */
.hln {
  background-color: #ffff99;
}

/* Noble Gases */
.nbl {
  background-color: #ffb3e6;
}

/* Lanthanides */
.lan {
  background-color: #ffb366;
}

/* Actinides */
.act {
  background-color: #ff99cc;
}