Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main>
  <section class="group-period">
    <ul class="group__list">
      <li class="group__item flex-row-wrap group-1"><span>1</span></li>
      <li class="group__item flex-row-wrap group-2"><span>2</span></li>
      <li class="group__item flex-row-wrap group-3"><span>3</span></li>
      <li class="group__item flex-row-wrap group-4"><span>4</span></li>
      <li class="group__item flex-row-wrap group-5"><span>5</span></li>
      <li class="group__item flex-row-wrap group-6"><span>6</span></li>
      <li class="group__item flex-row-wrap group-7"><span>7</span></li>
      <li class="group__item flex-row-wrap group-8"><span>8</span></li>
      <li class="group__item flex-row-wrap group-9"><span>9</span></li>
      <li class="group__item flex-row-wrap group-10"><span>10</span></li>
      <li class="group__item flex-row-wrap group-11"><span>11</span></li>
      <li class="group__item flex-row-wrap group-12"><span>12</span></li>
      <li class="group__item flex-row-wrap group-13"><span>13</span></li>
      <li class="group__item flex-row-wrap group-14"><span>14</span></li>
      <li class="group__item flex-row-wrap group-15"><span>15</span><span>Pnictogens</span></li>
      <li class="group__item flex-row-wrap group-16"><span>16</span><span>Chalcogens</span></li>
      <li class="group__item flex-row-wrap group-17"><span>17</span><span>Halogens</span></li>
      <li class="group__item flex-row-wrap group-18"><span>18</span></li>
    </ul>
    <ul class="period__list">
      <li class="period__item flex-row-wrap period-1"><span>1</span></li>
      <li class="period__item flex-row-wrap period-2"><span>2</span></li>
      <li class="period__item flex-row-wrap period-3"><span>3</span></li>
      <li class="period__item flex-row-wrap period-4"><span>4</span></li>
      <li class="period__item flex-row-wrap period-5"><span>5</span></li>
      <li class="period__item flex-row-wrap period-6"><span>6</span></li>
      <li class="period__item flex-row-wrap period-7"><span>7</span></li>
    </ul>
  </section>
  <section class="dynamic-periodic-table">
    <div class="key flex-row-wrap">
      <abbr class="key__abbr">Symbol</abbr>
      <span class="key__name">Name</span>
      <span class="key__atomic-number">Atomic number</span>
      <span class="key__atomic-mass">Atomic mass</span>
    </div>
    <section class="legend flex-row-nowrap">
      <article class="legend__element-type flex-row-wrap">
        <div class="legend__element-type__metals flex-row-nowrap">
          <div class="legend__element-type__metals__alkali-metal legend-box flex-column-wrap" data-element-type="alkali-metal"><span>Alkali metals</span></div>
          <div class="legend__element-type__metals__alkali-earth-metal legend-box flex-column-wrap" data-element-type="alkali-earth-metal"><span>Alkali earth metals</span></div>
          <div class="legend__element-type__metals__lanthanoid-actinoid flex-row-wrap">
            <div class="lanthanoid flex-row-wrap legend-box" data-element-type="Lanthanoid"><span>Lanthanoids</span></div>
            <div class="actinoid flex-row-wrap legend-box" data-element-type="Actinoid"><span>Actinoids</span></div>
          </div>
          <div class="legend__element-type__metals__transition-metal legend-box flex-column-wrap" data-element-type="transition-metal"><span>Transition metals</span></div>
          <div class="legend__element-type__metals__post-transition-metal legend-box flex-column-wrap" data-element-type="post-transition-metal"><span>Post-transition metals</span></div>
        </div>
        <div class="legend__element-type__metalloid legend-box" data-element-type="metalloid"><span>Metalloids</span></div>
        <div class="legend__element-type__nonmetals flex-row-wrap">
          <div class="legend__element-type__nonmetals__other-nonmetal legend-box" data-element-type="other-nonmetal"><span>Other <br> nonmetals</span></div>
          <div class="legend__element-type__nonmetals__noble-gas legend-box" data-element-type="noble-gas"><span>Noble gases</span></div>
        </div>
        <div class="legend__element-type__unknown legend-box flex-row-wrap" data-element-type="unknown"><span>Unknown</span>
        </div>
      </article>
      <article class="legend__element-state flex-row-wrap">
        <div class="legend__element-state__gas legend-box flex-row-wrap" data-element-state="gas"><span>Gas</span></div>
        <div class="legend__element-state__liquid legend-box flex-row-wrap" data-element-state="liquid"><span>Liquid</span></div>
        <div class="legend__element-state__solid legend-box flex-row-wrap" data-element-state="solid"><span>Solid</span></div>
        <div class="legend__element-state__unknown legend-box flex-row-wrap" data-element-state="unknown"><span>Un-known</span></div>
      </article>
    </section>
    <section class="temperature flex-row-nowrap">
      <div class="temperature__inputs flex-row-nowrap">
        <input class="temperature__inputs__slider" name="temperature__inputs__slider" type="range" min="0" max="7000" value="273">
        <p class="temperature__inputs__result flex-row-wrap">273 K</p>
      </div>
      <div class="temperature__unit-conversion flex-row-wrap">
        <p class="celsius">0ºC</p>
        <p class="farenheit">31.4ºF</p>
      </div>
      <button class="reset__temperature flex-row-wrap"><span>Back to STP</span></button>
    </section>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="gas" data-element-melting-point="13.99" data-element-boiling-point="20.271" data-element-period="1" data-element-group="1" data-element-name="Hydrogen">
      <abbr class="element__abbr">H</abbr>
      <span class="element__name">Hydrogen</span>
      <span class="element__atomic-number">1</span>
      <span class="element__atomic-mass">1.008</span>
      <p class="tooltip right-tooltip">Hydrogen</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-metal" data-element-state="solid" data-element-melting-point="453.65" data-element-boiling-point="1603" data-element-period="2" data-element-group="1" data-element-name="Lithium">
      <abbr class="element__abbr">Li</abbr>
      <span class="element__name">Lithium</span>
      <span class="element__atomic-number">3</span>
      <span class="element__atomic-mass">6.940</span>
      <p class="tooltip top-tooltip">Lithium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-metal" data-element-state="solid" data-element-melting-point="370.944" data-element-boiling-point="1156.090" data-element-period="3" data-element-group="1" data-element-name="Sodium">
      <abbr class="element__abbr">Na</abbr>
      <span class="element__name">Sodium</span>
      <span class="element__atomic-number">11</span>
      <span class="element__atomic-mass">22.989</span>
      <p class="tooltip top-tooltip">Sodium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-metal" data-element-state="solid" data-element-melting-point="336.7" data-element-boiling-point="1032" data-element-period="4" data-element-group="1" data-element-name="Potassium">
      <abbr class="element__abbr">K</abbr>
      <span class="element__name">Potassium</span>
      <span class="element__atomic-number">19</span>
      <span class="element__atomic-mass">39.098</span>
      <p class="tooltip top-tooltip">Potassium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-metal" data-element-state="solid" data-element-melting-point="312.45" data-element-boiling-point="961" data-element-period="5" data-element-group="1" data-element-name="Rubidium">
      <abbr class="element__abbr">Rb</abbr>
      <span class="element__name">Rubidium</span>
      <span class="element__atomic-number">37</span>
      <span class="element__atomic-mass">85.468</span>
      <p class="tooltip top-tooltip">Rubidium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-metal" data-element-state="solid" data-element-melting-point="301.7" data-element-boiling-point="944" data-element-period="6" data-element-group="1" data-element-name="Caesium">
      <abbr class="element__abbr">Cs</abbr>
      <span class="element__name">Caesium</span>
      <span class="element__atomic-number">55</span>
      <span class="element__atomic-mass">132.905</span>
      <p class="tooltip top-tooltip">Caesium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-metal" data-element-state="solid" data-element-melting-point="300" data-element-boiling-point="950" data-element-period="7" data-element-group="1" data-element-name="Francium">
      <abbr class="element__abbr">Fr</abbr>
      <span class="element__name">Francium</span>
      <span class="element__atomic-number">87</span>
      <span class="element__atomic-mass">(223.000)</span>
      <p class="tooltip bottom-tooltip">Francium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-earth-metal" data-element-state="solid" data-element-melting-point="1560" data-element-boiling-point="2742" data-element-period="2" data-element-group="2" data-element-name="Berilyum">
      <abbr class="element__abbr">Be</abbr>
      <span class="element__name">Berilyum</span>
      <span class="element__atomic-number">4</span>
      <span class="element__atomic-mass">9.012</span>
      <p class="tooltip right-tooltip">Berilyum</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-earth-metal" data-element-state="solid" data-element-melting-point="923" data-element-boiling-point="1363" data-element-period="3" data-element-group="2" data-element-name="Magnesium">
      <abbr class="element__abbr">Mg</abbr>
      <span class="element__name">Magne-sium</span>
      <span class="element__atomic-number">12</span>
      <span class="element__atomic-mass">24.305</span>
      <p class="tooltip right-tooltip">Magnesium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-earth-metal" data-element-state="solid" data-element-melting-point="1115" data-element-boiling-point="1757" data-element-period="4" data-element-group="2" data-element-name="Calcium">
      <abbr class="element__abbr">Ca</abbr>
      <span class="element__name">Calcium</span>
      <span class="element__atomic-number">20</span>
      <span class="element__atomic-mass">40.078</span>      
      <p class="tooltip top-tooltip">Calcium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-earth-metal" data-element-state="solid" data-element-melting-point="1050" data-element-boiling-point="1650" data-element-period="5" data-element-group="2" data-element-name="Stronium">
      <abbr class="element__abbr">Sr</abbr>
      <span class="element__name">Stronium</span>
      <span class="element__atomic-number">38</span>
      <span class="element__atomic-mass">87.620</span>
      <p class="tooltip top-tooltip">Stronium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-earth-metal" data-element-state="solid" data-element-melting-point="1000" data-element-boiling-point="2118" data-element-period="6" data-element-group="2" data-element-name="Barium">
      <abbr class="element__abbr">Ba</abbr>
      <span class="element__name">Barium</span>
      <span class="element__atomic-number">56</span>
      <span class="element__atomic-mass">137.327</span>
      <p class="tooltip top-tooltip">Barium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="alkali-earth-metal" data-element-state="solid" data-element-melting-point="973" data-element-boiling-point="2010" data-element-period="7" data-element-group="2" data-element-name="Radium">
      <abbr class="element__abbr">Ra</abbr>
      <span class="element__name">Radium</span>
      <span class="element__atomic-number">88</span>
      <span class="element__atomic-mass">(226.000)</span>
      <p class="tooltip bottom-tooltip">Radium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1814" data-element-boiling-point="3109" data-element-period="4" data-element-group="3" data-element-name="Scandium">
      <abbr class="element__abbr">Sc</abbr>
      <span class="element__name">Scandium</span>
      <span class="element__atomic-number">21</span>
      <span class="element__atomic-mass">44.956</span>
      <p class="tooltip top-tooltip">Scandium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1799" data-element-boiling-point="3203" data-element-period="5" data-element-group="3" data-element-name="Yttrium">
      <abbr class="element__abbr">Y</abbr>
      <span class="element__name">Yttrium</span>
      <span class="element__atomic-number">39</span>
      <span class="element__atomic-mass">88.906</span>
      <p class="tooltip top-tooltip">Yttrium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-name="Lanthanoids" data-element-melting-point="0" data-element-boiling-point="7001" data-element-name="Lanthanoids">
      <span class="element__name">57-71</span>
      <span class="element__name">Lantha-noids</span>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-name="Actinoids" data-element-melting-point="0" data-element-boiling-point="7001">
      <span class="element__name">89-103</span>
      <span class="element__name">Actinoids</span>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1941" data-element-boiling-point="3560" data-element-period="4" data-element-group="4" data-element-name="Titanium">
      <abbr class="element__abbr">Ti</abbr>
      <span class="element__name">Titanium</span>
      <span class="element__atomic-number">22</span>
      <span class="element__atomic-mass">47.867</span>
      <p class="tooltip top-tooltip">Titanium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2128" data-element-boiling-point="4650" data-element-period="5" data-element-group="4" data-element-name="Zirconium">
      <abbr class="element__abbr">Zr</abbr>
      <span class="element__name">Zirconium</span>
      <span class="element__atomic-number">40</span>
      <span class="element__atomic-mass">91.224</span>
      <p class="tooltip top-tooltip">Zirconium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2506" data-element-boiling-point="4876" data-element-period="6" data-element-group="4" data-element-name="Hafnium">
      <abbr class="element__abbr">Hf</abbr>
      <span class="element__name">Hafnium</span>
      <span class="element__atomic-number">72</span>
      <span class="element__atomic-mass">178.490</span>
      <p class="tooltip top-tooltip">Hafnium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="4" data-element-name="Rutherfordium">
      <abbr class="element__abbr">Rf</abbr>
      <span class="element__name">Ruther-fordium</span>
      <span class="element__atomic-number">104</span>
      <span class="element__atomic-mass">(267.000)</span>
      <p class="tooltip bottom-tooltip">Rutherfordium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2183" data-element-boiling-point="3680" data-element-period="4" data-element-group="5" data-element-name="Vanadium">
      <abbr class="element__abbr">V</abbr>
      <span class="element__name">Vanadium</span>
      <span class="element__atomic-number">23</span>
      <span class="element__atomic-mass">50.942</span>
      <p class="tooltip top-tooltip">Vanadium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2750" data-element-boiling-point="5017" data-element-period="5" data-element-group="5" data-element-name="Niobium">
      <abbr class="element__abbr">Nb</abbr>
      <span class="element__name">Niobium</span>
      <span class="element__atomic-number">41</span>
      <span class="element__atomic-mass">92.906</span>
      <p class="tooltip top-tooltip">Niobium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="3290" data-element-boiling-point="5731" data-element-period="6" data-element-group="5" data-element-name="Tantalum">
      <abbr class="element__abbr">Ta</abbr>
      <span class="element__name">Tantalum</span>
      <span class="element__atomic-number">72</span>
      <span class="element__atomic-mass">180.947</span>
      <p class="tooltip top-tooltip">Tantalum</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="5" data-element-name="Dubnium">
      <abbr class="element__abbr">Db</abbr>
      <span class="element__name">Dubnium</span>
      <span class="element__atomic-number">105</span>
      <span class="element__atomic-mass">(268.000)</span>
      <p class="tooltip bottom-tooltip">Dubnium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2180" data-element-boiling-point="2944" data-element-period="4" data-element-group="6" data-element-name="Chromium">
      <abbr class="element__abbr">Cr</abbr>
      <span class="element__name">Chro-mium</span>
      <span class="element__atomic-number">24</span>
      <span class="element__atomic-mass">51.996</span>
      <p class="tooltip top-tooltip">Chromium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2896" data-element-boiling-point="4912" data-element-period="5" data-element-group="6" data-element-name="Molybdenum">
      <abbr class="element__abbr">Mo</abbr>
      <span class="element__name">Molyb-denum</span>
      <span class="element__atomic-number">42</span>
      <span class="element__atomic-mass">95.950</span>
      <p class="tooltip top-tooltip">Molyb-denum</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="3695" data-element-boiling-point="6203" data-element-period="6" data-element-group="6" data-element-name="Tungsten">
      <abbr class="element__abbr">W</abbr>
      <span class="element__name">Tungsten</span>
      <span class="element__atomic-number">73</span>
      <span class="element__atomic-mass">183.840</span>
      <p class="tooltip top-tooltip">Tungsten</p>

    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="6" data-element-name="Seaborgium">
      <abbr class="element__abbr">Sg</abbr>
      <span class="element__name">Seabor-gium</span>
      <span class="element__atomic-number">106</span>
      <span class="element__atomic-mass">(268.000)</span>
      <p class="tooltip bottom-tooltip">Seaborgium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1519" data-element-boiling-point="2334" data-element-period="4" data-element-group="7" data-element-name="Manganese">
      <abbr class="element__abbr">Mn</abbr>
      <span class="element__name">Manga-nese</span>
      <span class="element__atomic-number">25</span>
      <span class="element__atomic-mass">54.938</span>
      <p class="tooltip top-tooltip">Manganese</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2430" data-element-boiling-point="4538" data-element-period="5" data-element-group="7" data-element-name="Technetium">
      <abbr class="element__abbr">Tc</abbr>
      <span class="element__name">Techne-tium</span>
      <span class="element__atomic-number">43</span>
      <span class="element__atomic-mass">(98.000)</span>
      <p class="tooltip top-tooltip">Techne-tium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="3459" data-element-boiling-point="5903" data-element-period="6" data-element-group="7" data-element-name="Rhenium">
      <abbr class="element__abbr">Re</abbr>
      <span class="element__name">Rhenium</span>
      <span class="element__atomic-number">74</span>
      <span class="element__atomic-mass">186.207</span>
      <p class="tooltip top-tooltip">Rhenium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="7" data-element-name="Bohrium">
      <abbr class="element__abbr">Bh</abbr>
      <span class="element__name">Bohrium</span>
      <span class="element__atomic-number">107</span>
      <span class="element__atomic-mass">(270.000)</span>
      <p class="tooltip bottom-tooltip">Bohrium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1811" data-element-boiling-point="3134" data-element-period="4" data-element-group="8" data-element-name="Iron">
      <abbr class="element__abbr">Fe</abbr>
      <span class="element__name">Iron</span>
      <span class="element__atomic-number">26</span>
      <span class="element__atomic-mass">55.845</span>
      <p class="tooltip top-tooltip">Iron</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2607" data-element-boiling-point="4423" data-element-period="5" data-element-group="8" data-element-name="Ruthenium">
      <abbr class="element__abbr">Ru</abbr>
      <span class="element__name">Ruthe-nium</span>
      <span class="element__atomic-number">44</span>
      <span class="element__atomic-mass">101.070</span>
      <p class="tooltip top-tooltip">Ruthe-nium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="3306" data-element-boiling-point="5285" data-element-period="6" data-element-group="8" data-element-name="Osmium">
      <abbr class="element__abbr">Os</abbr>
      <span class="element__name">Osmium</span>
      <span class="element__atomic-number">75</span>
      <span class="element__atomic-mass">190.230</span>
      <p class="tooltip top-tooltip">Osmium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="8" data-element-name="Hassium">
      <abbr class="element__abbr">Hs</abbr>
      <span class="element__name">Hassium</span>
      <span class="element__atomic-number">108</span>
      <span class="element__atomic-mass">(277.000)</span>
      <p class="tooltip bottom-tooltip">Hassium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1768" data-element-boiling-point="3200" data-element-period="4" data-element-group="9" data-element-name="Cobalt">
      <abbr class="element__abbr">Co</abbr>
      <span class="element__name">Cobalt</span>
      <span class="element__atomic-number">27</span>
      <span class="element__atomic-mass">58.993</span>
      <p class="tooltip top-tooltip">Cobalt</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2237" data-element-boiling-point="3968" data-element-period="5" data-element-group="9" data-element-name="Rhodium">
      <abbr class="element__abbr">Rh</abbr>
      <span class="element__name">Rhodium</span>
      <span class="element__atomic-number">45</span>
      <span class="element__atomic-mass">102.905</span>
      <p class="tooltip top-tooltip">Rhodium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2719" data-element-boiling-point="4403" data-element-period="6" data-element-group="9" data-element-name="Iridium">
      <abbr class="element__abbr">Ir</abbr>
      <span class="element__name">Iridium</span>
      <span class="element__atomic-number">76</span>
      <span class="element__atomic-mass">192.217</span>
      <p class="tooltip top-tooltip">Iridium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="unknown" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="9" data-element-name="Meitnerium">
      <abbr class="element__abbr">Mt</abbr>
      <span class="element__name">Meitne-rium</span>
      <span class="element__atomic-number">109</span>
      <span class="element__atomic-mass">(278.000)</span>
      <p class="tooltip bottom-tooltip">Meitnerium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1728" data-element-boiling-point="3003" data-element-period="4" data-element-group="10" data-element-name="Nickel">
      <abbr class="element__abbr">Ni</abbr>
      <span class="element__name">Nickel</span>
      <span class="element__atomic-number">28</span>
      <span class="element__atomic-mass">58.963</span>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1828.05" data-element-boiling-point="3236" data-element-period="5" data-element-group="10" data-element-name="Palladium">
      <abbr class="element__abbr">Pd</abbr>
      <span class="element__name">Palladium</span>
      <span class="element__atomic-number">46</span>
      <span class="element__atomic-mass">106.420</span>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="2041.4" data-element-boiling-point="4098" data-element-period="6" data-element-group="10" data-element-name="Platinum">
      <abbr class="element__abbr">Pt</abbr>
      <span class="element__name">Platinum</span>
      <span class="element__atomic-number">77</span>
      <span class="element__atomic-mass">195.084</span>
    </div>
    <div class="element flex-row-wrap" data-element-type="unknown" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="10" data-element-name="Darmstadtium">
      <abbr class="element__abbr">Ds</abbr>
      <span class="element__name">Darmstad-tium</span>
      <span class="element__atomic-number">110</span>
      <span class="element__atomic-mass">(281.000)</span>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1357.77" data-element-boiling-point="2835" data-element-period="4" data-element-group="11" data-element-name="Copper">
      <abbr class="element__abbr">Cu</abbr>
      <span class="element__name">Copper</span>
      <span class="element__atomic-number">29</span>
      <span class="element__atomic-mass">63.546</span>
      <p class="tooltip top-tooltip">Copper</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1234.93" data-element-boiling-point="2435" data-element-period="5" data-element-group="11" data-element-name="Silver">
      <abbr class="element__abbr">Ag</abbr>
      <span class="element__name">Silver</span>
      <span class="element__atomic-number">47</span>
      <span class="element__atomic-mass">107.868</span>
      <p class="tooltip top-tooltip">Silver</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="1337.33" data-element-boiling-point="3243" data-element-period="6" data-element-group="11" data-element-name="Gold">
      <abbr class="element__abbr">Au</abbr>
      <span class="element__name">Gold</span>
      <span class="element__atomic-number">78</span>
      <span class="element__atomic-mass">107.868</span>
      <p class="tooltip top-tooltip">Gold</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="unknown" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="11" data-element-name="Roentgenium">
      <abbr class="element__abbr">Rg</abbr>
      <span class="element__name">Roentge-nium</span>
      <span class="element__atomic-number">111</span>
      <span class="element__atomic-mass">(282.000)</span>
      <p class="tooltip bottom-tooltip">Roentge-nium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="692.68" data-element-boiling-point="1180" data-element-period="4" data-element-group="12" data-element-name="Zinc">
      <abbr class="element__abbr">Zn</abbr>
      <span class="element__name">Zinc</span>
      <span class="element__atomic-number">30</span>
      <span class="element__atomic-mass">65.380</span>
      <p class="tooltip top-tooltip">Zinc</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="solid" data-element-melting-point="594.22" data-element-boiling-point="1040" data-element-period="5" data-element-group="12" data-element-name="Cadmium">
      <abbr class="element__abbr">Cd</abbr>
      <span class="element__name">Cadmium</span>
      <span class="element__atomic-number">48</span>
      <span class="element__atomic-mass">112.414</span>
      <p class="tooltip top-tooltip">Cadmium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="transition-metal" data-element-state="liquid" data-element-melting-point="234.3210" data-element-boiling-point="629.88" data-element-period="6" data-element-group="12" data-element-name="Mercury">
      <abbr class="element__abbr">Hg</abbr>
      <span class="element__name">Mercury</span>
      <span class="element__atomic-number">79</span>
      <span class="element__atomic-mass">200.592</span>
      <p class="tooltip top-tooltip">Mercury</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="12" data-element-name="Copernicium">
      <abbr class="element__abbr">Cn</abbr>
      <span class="element__name">Coperni-cium</span>
      <span class="element__atomic-number">112</span>
      <span class="element__atomic-mass">(285.000)</span>
      <p class="tooltip bottom-tooltip">Copernicium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="metalloid" data-element-state="solid" data-element-melting-point="2349" data-element-boiling-point="4200" data-element-period="2" data-element-group="13" data-element-name="Boron">
      <abbr class="element__abbr">B</abbr>
      <span class="element__name">Boron</span>
      <span class="element__atomic-number">5</span>
      <span class="element__atomic-mass">10.810</span>
      <p class="tooltip left-tooltip">Boron</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="solid" data-element-melting-point="933.47" data-element-boiling-point="2743" data-element-period="3" data-element-group="13" data-element-name="Aluminium">
      <abbr class="element__abbr">Al</abbr>
      <span class="element__name">Alumi-nium</span>
      <span class="element__atomic-number">13</span>
      <span class="element__atomic-mass">26.982</span>
      <p class="tooltip left-tooltip">Aluminium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="solid" data-element-melting-point="302.9146" data-element-boiling-point="2673" data-element-period="4" data-element-group="13" data-element-name="Galium">
      <abbr class="element__abbr">Ga</abbr>
      <span class="element__name">Galium</span>
      <span class="element__atomic-number">31</span>
      <span class="element__atomic-mass">69.723</span>
      <p class="tooltip top-tooltip">Galium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="solid" data-element-melting-point="429.7485" data-element-boiling-point="2345" data-element-period="5" data-element-group="13" data-element-name="Indium">
      <abbr class="element__abbr">In</abbr>
      <span class="element__name">Indium</span>
      <span class="element__atomic-number">49</span>
      <span class="element__atomic-mass">114.818</span>
      <p class="tooltip top-tooltip">Indium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="solid" data-element-melting-point="577" data-element-boiling-point="1746" data-element-period="6" data-element-group="13" data-element-name="Thalium">
      <abbr class="element__abbr">Th</abbr>
      <span class="element__name">Thalium</span>
      <span class="element__atomic-number">81</span>
      <span class="element__atomic-mass">204.380</span>
      <p class="tooltip top-tooltip">Thalium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="unknown" data-element-state="unknown" data-element-period="7" data-element-group="13" data-element-name="Nihonium" data-element-melting-point="unknown" data-element-boiling-point="unknown">
      <abbr class="element__abbr">Nh</abbr>
      <span class="element__name">Nihonium</span>
      <span class="element__atomic-number">113</span>
      <span class="element__atomic-mass">(286.000)</span>
      <p class="tooltip bottom-tooltip">Nihonium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="solid" data-element-melting-point="3915" data-element-boiling-point="4600" data-element-period="2" data-element-group="14" data-element-name="Carbon">
      <abbr class="element__abbr">C</abbr>
      <span class="element__name">Carbon</span>
      <span class="element__atomic-number">6</span>
      <span class="element__atomic-mass">12.001</span>
      <p class="tooltip top-tooltip">Carbon</p>

    </div>
    <div class="element flex-row-wrap" data-element-type="metalloid" data-element-state="solid" data-element-melting-point="1687" data-element-boiling-point="3538" data-element-period="3" data-element-group="14" data-element-name="Silicon">
      <abbr class="element__abbr">Si</abbr>
      <span class="element__name">Silicon</span>
      <span class="element__atomic-number">14</span>
      <span class="element__atomic-mass">28.085</span>
      <p class="tooltip top-tooltip">Silicon</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="metalloid" data-element-state="solid" data-element-melting-point="1211.40" data-element-boiling-point="3106" data-element-period="4" data-element-group="14" data-element-name="Germanium">
      <abbr class="element__abbr">Ge</abbr>
      <span class="element__name">Germa-nium</span>
      <span class="element__atomic-number">32</span>
      <span class="element__atomic-mass">72.630</span>
      <p class="tooltip top-tooltip">Germa-nium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="solid" data-element-melting-point="505.08" data-element-boiling-point="2875" data-element-period="5" data-element-group="14" data-element-name="Tin">
      <abbr class="element__abbr">Sn</abbr>
      <span class="element__name">Tin</span>
      <span class="element__atomic-number">50</span>
      <span class="element__atomic-mass">118.710</span>
      <p class="tooltip top-tooltip">Tin</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="solid" data-element-melting-point="600.61" data-element-boiling-point="2022" data-element-period="6" data-element-group="14" data-element-name="Lead">
      <abbr class="element__abbr">Pb</abbr>
      <span class="element__name">Lead</span>
      <span class="element__atomic-number">82</span>
      <span class="element__atomic-mass">207.200</span>
      <p class="tooltip top-tooltip">Lead</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="14" data-element-name="Flevorium">
      <abbr class="element__abbr">Fl</abbr>
      <span class="element__name">Flevorium</span>
      <span class="element__atomic-number">114</span>
      <span class="element__atomic-mass">(289.000)</span>
      <p class="tooltip bottom-tooltip">Flevorium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="gas" data-element-melting-point="63.15" data-element-boiling-point="77.355" data-element-period="2" data-element-group="15" data-element-name="Nitrogen">
      <abbr class="element__abbr">N</abbr>
      <span class="element__name">Nitrogen</span>
      <span class="element__atomic-number">7</span>
      <span class="element__atomic-mass">14.007</span>
      <p class="tooltip top-tooltip">Nitrogen</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="solid" data-element-melting-point="317.2" data-element-boiling-point="553" data-element-period="3" data-element-group="15" data-element-name="Phosphorus">
      <abbr class="element__abbr">P</abbr>
      <span class="element__name">Phospho-rus</span>
      <span class="element__atomic-number">15</span>
      <span class="element__atomic-mass">30.974</span>
      <p class="tooltip top-tooltip">Phospho-rus</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="metalloid" data-element-state="solid" data-element-melting-point="887" data-element-boiling-point="887" data-element-period="4" data-element-group="15" data-element-name="Arsenic">
      <abbr class="element__abbr">As</abbr>
      <span class="element__name">Arsenic</span>
      <span class="element__atomic-number">33</span>
      <span class="element__atomic-mass">74.922</span>
      <p class="tooltip top-tooltip">Arsenic</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="metalloid" data-element-state="solid" data-element-melting-point="903.78" data-element-boiling-point="1908" data-element-period="5" data-element-group="15" data-element-name="Antimony">
      <abbr class="element__abbr">Sb</abbr>
      <span class="element__name">Antimony</span>
      <span class="element__atomic-number">51</span>
      <span class="element__atomic-mass">121.760</span>
      <p class="tooltip top-tooltip">Antimony</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="solid" data-element-melting-point="544.7" data-element-boiling-point="1837" data-element-period="6" data-element-group="15" data-element-name="Bismuth">
      <abbr class="element__abbr">Bi</abbr>
      <span class="element__name">Bismuth</span>
      <span class="element__atomic-number">83</span>
      <span class="element__atomic-mass">208.980</span>
      <p class="tooltip top-tooltip">Bismuth</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="unknown" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="15" data-element-name="Moscovium">
      <abbr class="element__abbr">Mc</abbr>
      <span class="element__name">Mosco-vium</span>
      <span class="element__atomic-number">115</span>
      <span class="element__atomic-mass">(290.000)</span>
      <p class="tooltip bottom-tooltip">Moscovium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="gas" data-element-melting-point="54.36" data-element-boiling-point="90.188" data-element-period="2" data-element-group="16" data-element-name="Oxygen">
      <abbr class="element__abbr">O</abbr>
      <span class="element__name">Oxygen</span>
      <span class="element__atomic-number">8</span>
      <span class="element__atomic-mass">15.999</span>
      <p class="tooltip top-tooltip">Oxygen</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="solid" data-element-melting-point="54.36" data-element-boiling-point="717.8" data-element-period="3" data-element-group="16" data-element-name="Sulfur">
      <abbr class="element__abbr">S</abbr>
      <span class="element__name">Sulfur</span>
      <span class="element__atomic-number">16</span>
      <span class="element__atomic-mass">32.060</span>
      <p class="tooltip top-tooltip">Sulfur</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="solid" data-element-melting-point="494" data-element-boiling-point="958" data-element-period="4" data-element-group="16" data-element-name="Selenium">
      <abbr class="element__abbr">Se</abbr>
      <span class="element__name">Selenium</span>
      <span class="element__atomic-number">34</span>
      <span class="element__atomic-mass">78.971</span>
      <p class="tooltip top-tooltip">Selenium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="metalloid" data-element-state="solid" data-element-melting-point="722.66" data-element-boiling-point="1261" data-element-period="5" data-element-group="16" data-element-name="Tellurium">
      <abbr class="element__abbr">Te</abbr>
      <span class="element__name">Tellurium</span>
      <span class="element__atomic-number">52</span>
      <span class="element__atomic-mass">127.600</span>
      <p class="tooltip top-tooltip">Tellurium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="post-transition-metal" data-element-state="solid" data-element-melting-point="527" data-element-boiling-point="1235" data-element-period="6" data-element-group="16" data-element-name="Polonium">
      <abbr class="element__abbr">Po</abbr>
      <span class="element__name">Polonium</span>
      <span class="element__atomic-number">84</span>
      <span class="element__atomic-mass">(209.000)</span>
      <p class="tooltip top-tooltip">Polonium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="unknown" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="16" data-element-name="Livemorium">
      <abbr class="element__abbr">Lv</abbr>
      <span class="element__name">Livemo-rium</span>
      <span class="element__atomic-number">116</span>
      <span class="element__atomic-mass">(293.000)</span>
      <p class="tooltip bottom-tooltip">Livemorium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="gas" data-element-melting-point="53.48" data-element-boiling-point="85.03" data-element-period="2" data-element-group="17" data-element-name="Fluorine">
      <abbr class="element__abbr">F</abbr>
      <span class="element__name">Fluorine</span>
      <span class="element__atomic-number">9</span>
      <span class="element__atomic-mass">18.998</span>
      <p class="tooltip top-tooltip">Fluorine</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="gas" data-element-melting-point="171.6" data-element-boiling-point="239.11" data-element-period="3" data-element-group="17" data-element-name="Chlorine">
      <abbr class="element__abbr">Cl</abbr>
      <span class="element__name">Chlorine</span>
      <span class="element__atomic-number">17</span>
      <span class="element__atomic-mass">35.450</span>
      <p class="tooltip top-tooltip">Chlorine</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="liquid" data-element-melting-point="265.8" data-element-boiling-point="332" data-element-period="4" data-element-group="17" data-element-name="Bromine">
      <abbr class="element__abbr">Br</abbr>
      <span class="element__name">Bromine</span>
      <span class="element__atomic-number">35</span>
      <span class="element__atomic-mass">79.904</span>
      <p class="tooltip top-tooltip">Bromine</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="other-nonmetal" data-element-state="solid" data-element-melting-point="386.85" data-element-boiling-point="457.4" data-element-period="5" data-element-group="17" data-element-name="Iodine">
      <abbr class="element__abbr">I</abbr>
      <span class="element__name">Iodine</span>
      <span class="element__atomic-number">53</span>
      <span class="element__atomic-mass">126.904</span>
      <p class="tooltip top-tooltip">Iodine</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="metalloid" data-element-state="solid" data-element-melting-point="575" data-element-boiling-point="610" data-element-period="7" data-element-group="17" data-element-name="Astatine">
      <abbr class="element__abbr">At</abbr>
      <span class="element__name">Astatine</span>
      <span class="element__atomic-number">85</span>
      <span class="element__atomic-mass">(210.000)</span>
      <p class="tooltip top-tooltip">Astatine</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="unknown" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="17" data-element-name="Tennessine">
      <abbr class="element__abbr">Ts</abbr>
      <span class="element__name">Tennes-sine</span>
      <span class="element__atomic-number">117</span>
      <span class="element__atomic-mass">(294.000)</span>
      <p class="tooltip bottom-tooltip">Tennessine</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="noble-gas" data-element-state="gas" data-element-melting-point="0.95" data-element-boiling-point="4.222" data-element-period="1" data-element-group="18" data-element-name="Helium">
      <abbr class="element__abbr">He</abbr>
      <span class="element__name">Helium</span>
      <span class="element__atomic-number">2</span>
      <span class="element__atomic-mass">4.002</span>
      <p class="tooltip left-tooltip">Helium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="noble-gas" data-element-state="gas" data-element-melting-point="24.56" data-element-boiling-point="27.104" data-element-period="2" data-element-group="18" data-element-name="Neon">
      <abbr class="element__abbr">Ne</abbr>
      <span class="element__name">Neon</span>
      <span class="element__atomic-number">10</span>
      <span class="element__atomic-mass">20.180</span>
      <p class="tooltip top-tooltip">Neon</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="noble-gas" data-element-state="gas" data-element-melting-point="83.81" data-element-boiling-point="87.302" data-element-period="3" data-element-group="18" data-element-name="Argon">
      <abbr class="element__abbr">Ar</abbr>
      <span class="element__name">Argon</span>
      <span class="element__atomic-number">18</span>
      <span class="element__atomic-mass">39.948</span>
      <p class="tooltip top-tooltip">Argon</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="noble-gas" data-element-state="gas" data-element-melting-point="115.78" data-element-boiling-point="119.93" data-element-period="4" data-element-group="18" data-element-name="Krypton">
      <abbr class="element__abbr">Kr</abbr>
      <span class="element__name">Krypton</span>
      <span class="element__atomic-number">36</span>
      <span class="element__atomic-mass">83.798</span>
      <p class="tooltip top-tooltip">Krypton</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="noble-gas" data-element-state="gas" data-element-melting-point="161.40" data-element-boiling-point="165.051" data-element-period="5" data-element-group="18" data-element-name="Xenon">
      <abbr class="element__abbr">Xe</abbr>
      <span class="element__name">Xenon</span>
      <span class="element__atomic-number">54</span>
      <span class="element__atomic-mass">131.293</span>
      <p class="tooltip top-tooltip">Xenon</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="noble-gas" data-element-state="gas" data-element-melting-point="202" data-element-boiling-point="211.5" data-element-period="6" data-element-group="18" data-element-name="Radon">
      <abbr class="element__abbr">Rn</abbr>
      <span class="element__name">Radon</span>
      <span class="element__atomic-number">86</span>
      <span class="element__atomic-mass">(222.000)</span>
      <p class="tooltip top-tooltip">Radon</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="unknown" data-element-state="unknown" data-element-melting-point="unknown" data-element-boiling-point="unknown" data-element-period="7" data-element-group="18" data-element-symbol="Og" data-element-name="Oganesson">
      <abbr class="element__abbr">Og</abbr>
      <span class="element__name">Oganes-son</span>
      <span class="element__atomic-number">118</span>
      <span class="element__atomic-mass">(294.000)</span>
      <p class="tooltip bottom-tooltip">Oganesson</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1193" data-element-boiling-point="3737" data-element-period="6" data-element-name="Lanthanum">
      <abbr class="element__abbr">La</abbr>
      <span class="element__name">Lantha-num</span>
      <span class="element__atomic-number">57</span>
      <span class="element__atomic-mass">138.905</span>
      <p class="tooltip top-tooltip">Lanthanum</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1068" data-element-boiling-point="3716" data-element-period="6" data-element-name="Cerium">
      <abbr class="element__abbr">Ce</abbr>
      <span class="element__name">Cerium</span>
      <span class="element__atomic-number">58</span>
      <span class="element__atomic-mass">140.116</span>
      <p class="tooltip top-tooltip">Cerium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1208" data-element-boiling-point="3403" data-element-period="6" data-element-name="Praseodymium">
      <abbr class="element__abbr">Pr</abbr>
      <span class="element__name">Praseod-ymium</span>
      <span class="element__atomic-number">59</span>
      <span class="element__atomic-mass">140.907</span>
      <p class="tooltip top-tooltip">Praseodymium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1297" data-element-boiling-point="3347" data-element-period="6" data-element-name="Neodymium">
      <abbr class="element__abbr">Nd</abbr>
      <span class="element__name">Neod-ymium</span>
      <span class="element__atomic-number">60</span>
      <span class="element__atomic-mass">144.242</span>
      <p class="tooltip top-tooltip">Neodymium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1315" data-element-boiling-point="3273" data-element-period="6" data-element-name="Promethium">
      <abbr class="element__abbr">Pm</abbr>
      <span class="element__name">Prome-thium</span>
      <span class="element__atomic-number">61</span>
      <span class="element__atomic-mass">(145,000)</span>
      <p class="tooltip top-tooltip">Promethium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1345" data-element-boiling-point="2173" data-element-period="6" data-element-name="Samarium">
      <abbr class="element__abbr">Sm</abbr>
      <span class="element__name">Samarium</span>
      <span class="element__atomic-number">62</span>
      <span class="element__atomic-mass">150.360</span>
      <p class="tooltip top-tooltip">Samarium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1099" data-element-boiling-point="1802" data-element-period="6" data-element-name="Europium">
      <abbr class="element__abbr">Eu</abbr>
      <span class="element__name">Europium</span>
      <span class="element__atomic-number">63</span>
      <span class="element__atomic-mass">151.964</span>
      <p class="tooltip top-tooltip">Europium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1585" data-element-boiling-point="3273" data-element-period="6" data-element-name="Gadolinium">
      <abbr class="element__abbr">Gd</abbr>
      <span class="element__name">Gadoli-nium</span>
      <span class="element__atomic-number">64</span>
      <span class="element__atomic-mass">157.250</span>
      <p class="tooltip top-tooltip">Gadolinium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1629" data-element-boiling-point="3396" data-element-period="6" data-element-name="Terbium">
      <abbr class="element__abbr">Tb</abbr>
      <span class="element__name">Terbium</span>
      <span class="element__atomic-number">65</span>
      <span class="element__atomic-mass">157.250</span>
      <p class="tooltip top-tooltip">Terbium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1680" data-element-boiling-point="2840" data-element-period="6" data-element-name="Dysprosium">
      <abbr class="element__abbr">Dy</abbr>
      <span class="element__name">Dyspro-sium</span>
      <span class="element__atomic-number">66</span>
      <span class="element__atomic-mass">162.500</span>
      <p class="tooltip top-tooltip">Dysprosium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1734" data-element-boiling-point="2873" data-element-period="6" data-element-name="Holmium">
      <abbr class="element__abbr">Ho</abbr>
      <span class="element__name">Holmium</span>
      <span class="element__atomic-number">67</span>
      <span class="element__atomic-mass">164.930</span>
      <p class="tooltip top-tooltip">Holmium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1802" data-element-boiling-point="3141" data-element-period="6" data-element-name="Erbium">
      <abbr class="element__abbr">Er</abbr>
      <span class="element__name">Erbium</span>
      <span class="element__atomic-number">68</span>
      <span class="element__atomic-mass">167.259</span>
      <p class="tooltip top-tooltip">Erbium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1818" data-element-boiling-point="2223" data-element-period="6" data-element-name="Thulium">
      <abbr class="element__abbr">Tm</abbr>
      <span class="element__name">Thulium</span>
      <span class="element__atomic-number">69</span>
      <span class="element__atomic-mass">168.934</span>
      <p class="tooltip top-tooltip">Thulium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1097" data-element-boiling-point="1469" data-element-period="6" data-element-name="Ytterbium">
      <abbr class="element__abbr">Yb</abbr>
      <span class="element__name">Ytterbium</span>
      <span class="element__atomic-number">70</span>
      <span class="element__atomic-mass">173.045</span>
      <p class="tooltip top-tooltip">Ytterbium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Lanthanoid" data-element-state="solid" data-element-melting-point="1925" data-element-boiling-point="3675" data-element-period="6" data-element-name="Lutetium">
      <abbr class="element__abbr">Lu</abbr>
      <span class="element__name">Lutetium</span>
      <span class="element__atomic-number">71</span>
      <span class="element__atomic-mass">174.967</span>
      <p class="tooltip top-tooltip">Lutetium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1500" data-element-boiling-point="3500" data-element-period="7" data-element-name="Actinium">
      <abbr class="element__abbr">Ac</abbr>
      <span class="element__name">Actinium</span>
      <span class="element__atomic-number">89</span>
      <span class="element__atomic-mass">(227.000)</span>
      <p class="tooltip bottom-tooltip">Actinium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="2023" data-element-boiling-point="5061" data-element-period="7" data-element-name="Thorium">
      <abbr class="element__abbr">Th</abbr>
      <span class="element__name">Thorium</span>
      <span class="element__atomic-number">90</span>
      <span class="element__atomic-mass">232.038</span>
      <p class="tooltip bottom-tooltip">Thorium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1841" data-element-boiling-point="4300" data-element-period="7" data-element-name="Protactinium">
      <abbr class="element__abbr">Pa</abbr>
      <span class="element__name">Protacti-nium</span>
      <span class="element__atomic-number">91</span>
      <span class="element__atomic-mass">231.035</span>
      <p class="tooltip bottom-tooltip">Protactinium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1405.3" data-element-boiling-point="4404" data-element-period="7" data-element-name="Uranium">
      <abbr class="element__abbr">U</abbr>
      <span class="element__name">Uranium</span>
      <span class="element__atomic-number">92</span>
      <span class="element__atomic-mass">238.028</span>
      <p class="tooltip bottom-tooltip">Uranium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="912" data-element-boiling-point="4447" data-element-period="7" data-element-name="Neptunium">
      <abbr class="element__abbr">Np</abbr>
      <span class="element__name">Neptu-nium</span>
      <span class="element__atomic-number">93</span>
      <span class="element__atomic-mass">(237.000)</span>
      <p class="tooltip bottom-tooltip">Neptunium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="912.5" data-element-boiling-point="3505" data-element-period="7" data-element-name="Plutonium">
      <abbr class="element__abbr">Pu</abbr>
      <span class="element__name">Pluto-nium</span>
      <span class="element__atomic-number">94</span>
      <span class="element__atomic-mass">(244.000)</span>
      <p class="tooltip bottom-tooltip">Plutonium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1449" data-element-boiling-point="2880" data-element-period="7" data-element-name="Americium">
      <abbr class="element__abbr">Am</abbr>
      <span class="element__name">Ameri-cium</span>
      <span class="element__atomic-number">95</span>
      <span class="element__atomic-mass">(243.000)</span>
      <p class="tooltip bottom-tooltip">Americium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1613" data-element-boiling-point="3383" data-element-period="7" data-element-name="Curium">
      <abbr class="element__abbr">Cm</abbr>
      <span class="element__name">Curium</span>
      <span class="element__atomic-number">96</span>
      <span class="element__atomic-mass">(247.000)</span>
      <p class="tooltip bottom-tooltip">Curium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1259" data-element-boiling-point="2900" data-element-period="7" data-element-name="Berkelium">
      <abbr class="element__abbr">Bk</abbr>
      <span class="element__name">Berkelium</span>
      <span class="element__atomic-number">97</span>
      <span class="element__atomic-mass">(247.000)</span>
      <p class="tooltip bottom-tooltip">Berkelium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1173" data-element-boiling-point="1743" data-element-period="7" data-element-name="Californium">
      <abbr class="element__abbr">Cf</abbr>
      <span class="element__name">Califor-nium</span>
      <span class="element__atomic-number">98</span>
      <span class="element__atomic-mass">(251.000)</span>
      <p class="tooltip bottom-tooltip">Californium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1133" data-element-boiling-point="1269" data-element-period="7" data-element-name="Einsteinium">
      <abbr class="element__abbr">Es</abbr>
      <span class="element__name">Einstei-nium</span>
      <span class="element__atomic-number">99</span>
      <span class="element__atomic-mass">(252.000)</span>
      <p class="tooltip bottom-tooltip">Einsteinium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1133" data-element-boiling-point="1269" data-element-period="7" data-element-name="Fermium">
      <abbr class="element__abbr">Fm</abbr>
      <span class="element__name">Fermium</span>
      <span class="element__atomic-number">100</span>
      <span class="element__atomic-mass">(257.000)</span>
      <p class="tooltip bottom-tooltip">Fermium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1133" data-element-boiling-point="unknown" data-element-period="7" data-element-name="Mendelevium">
      <abbr class="element__abbr">Md</abbr>
      <span class="element__name">Mendele-vium</span>
      <span class="element__atomic-number">101</span>
      <span class="element__atomic-mass">(258.000)</span>
      <p class="tooltip bottom-tooltip">Mendelevium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1100" data-element-boiling-point="unknown" data-element-period="7" data-element-name="Nobelium">
      <abbr class="element__abbr">No</abbr>
      <span class="element__name">Nobelium</span>
      <span class="element__atomic-number">102</span>
      <span class="element__atomic-mass">(259.000)</span>
      <p class="tooltip bottom-tooltip">Nobelium</p>
    </div>
    <div class="element flex-row-wrap" data-element-type="Actinoid" data-element-state="solid" data-element-melting-point="1900" data-element-boiling-point="unknown" data-element-period="7" data-element-name="Lawrencium">
      <abbr class="element__abbr">Lr</abbr>
      <span class="element__name">Lawren-cium</span>
      <span class="element__atomic-number">103</span>
      <span class="element__atomic-mass">(266.000)</span>
      <p class="tooltip bottom-tooltip">Lawrencium</p>
    </div>
  </section>
  <section class="modal flex-row-wrap">
    <dialog class="modal__dialog" open>
      <article class="modal__content">
        <div class="modal__content__properties"></div>
        <div class="atom"><div class="atom__core"></div></div>
      </article>
      <a class="modal__close">
        <svg viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
      </a>
    </dialog>
  </section>
</main>
              
            
!

CSS

              
                // Variables
$c-main: hsla(0, 100%, 100%, 1);
$c-element-other-nonmetals: hsla(184, 9%, 62%, 1);
$c-element-alkali-metals: hsla(6, 78%, 57%, 1);
$c-element-alkali-earth-metals: hsla(28, 80%, 52%, 1);
$c-element-transition-metals: hsla(48, 89%, 50%, 1);
$c-element-lanthanoids: hsla(21, 78%, 81%, 1);
$c-element-actinoids: hsla(20, 74%, 68%, 1);
$c-element-post-transition-metals: hsla(168, 76%, 42%, 1);
$c-element-metalloids: hsla(204, 70%, 53%, 1);
$c-element-noble-gas: hsla(282, 44%, 47%, 1);
$c-element-unknown: darken($c-element-transition-metals, 12%);
$c-element-self: (
  hydrogen: 'hsla(0, 100%, 100%, 1)',
);
$c-shadow-main: hsla(0, 1%, 53%, 1);
$bg-main: hsla(210, 3%, 15%, 1);
$table-min-width:  1300px;
$element-width: 70px;
$grid-gap: 5px;
$modal-width: 750px;
$cubic-bezier: cubic-bezier(0.23, 1, 0.32, 1);
$scale: 1.075;

// Mixins
@mixin element-color($element) {
  @if map-has-key($c-element-self, $element) {
    color: #{map-get($c-element-self, $element)};
    background-color: #{map-get($c-element-self, $element)}
  } @else {
    @warn 'Unfortunately, no value could be retrieved from `#{$c-element-self}`. '
      + 'Please make sure it is defined in `$c-element-self` map.';
  }
}

// Fonts
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Montserrat');

// General
* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  height: 100%;
  font-size: 16px; // 1rem=16px
  color: $c-main;
  font-family: 'Josefin Sans', 'Roboto', sans-serif;
  overflow: auto;
  @media screen and (max-width: $table-min-width + $element-width * 2 + $grid-gap * 2) {
    justify-content: normal;
  }
}

main{
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  @media screen and (max-width: $table-min-width + $element-width * 2 + $grid-gap * 2) {
    justify-content: normal;
  }
  @media screen and (min-aspect-ratio: 1 / 1) {
    height: 150vh;
  }
  @media screen and (min-aspect-ratio: 1 / 4) {
    height: 155vh;
  }
  @media screen and (max-aspect-ratio: 1 / 5) {
    height: 50vw;
  }
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

li {
  position: relative;
  cursor: pointer;
  z-index: 10;
}

// Specific
.flex-row-wrap{
  display: flex;
  flex-flow: row wrap;
}

.flex-row-nowrap{
  display: flex;
  flex-flow: row nowrap;
}

.flex-column-nowrap{
  display: flex;
  flex-flow: column nowrap;
}

.flex-column-wrap{
  display: flex;
  flex-flow: column wrap;
}

.group-period{
  height: 100%;
  width: 100%;
  position: relative;
  min-width: $table-min-width + $element-width * 2 + $grid-gap * 2;
  background: radial-gradient(lighten($bg-main, 25%), $bg-main);
}

.group,
.period{
  &__list{
    background: lighten($bg-main, 2.5%);
    box-shadow: 0 0 .5rem $bg-main;
  }
  &__item{
    cursor: default;
    span{
      transition: all .2s ease;
    }
    &:hover{
      span{
        box-shadow: 0 0 1rem darken($c-shadow-main, 30%);    
        font-size: 1.5rem;
      }
    }
  }
}

.group{
  &__list{
    position: sticky;
    top: 0;
    display: grid;
    grid-template: repeat(1, $element-width / 1.5) / repeat(18, $element-width);
    grid-gap: $grid-gap;
    justify-content: center;
    width: 100%;
    min-width: $table-min-width;
    height: $element-width / 1.5;
    margin: 0 auto;
    font-size: 1rem;
    z-index: 10;
    &.--is-fixed{
      z-index: 20;
      .group-1{
        &::before{
          display: none;
        } 
        &::after{
          @media screen and (max-width: $table-min-width + $element-width * 2 + $grid-gap * 2) {
            transform: translateX(-25%) rotate(0);
          }
        }
      }
    }
  }
  &__item{
    width: $element-width;
    justify-content: center;
    align-items: center;
    border-right: 1px solid $c-main;
    span:nth-of-type(2){
      flex-basis: 100%;
      text-align: center;
      font-size: .75rem;
    }
    &.group-1{
      border-left: 1px solid $c-main;
      transition: all .2s ease;
      &::after{
        content: 'Group';
        position: absolute;
        top: 50%;
        font-size: .75rem;
        left: -$element-width / 2 - $grid-gap;
        transform: translateY(-50%);
        cursor: auto;
        transition: all .2s ease;
        @media screen and (max-width: $table-min-width + $element-width * 2 + $grid-gap * 2) {
          top: 1.25rem;
          left: -$element-width / 2 - $grid-gap + 5;
          transform: translateY(-50%) rotate(45deg);
        }
      }
      &::before{
        transition: all .2s ease;
        @media screen and (max-width: $table-min-width + $element-width * 2 + $grid-gap * 2) {
          content: '';
          position: absolute;
          width: 50px;
          height: 1px;
          background-color: $c-main;
          transform: rotate(45deg);
          left: -$element-width / 2 - 20px;
        }
      }
    }
    &.group-15,
    &.group-16,
    &.group-17{
      span:nth-of-type(1){
        margin-top: .75rem;
      }
    }
  }
}

.period{
  &__list{
    position: absolute;
    display: grid;
    grid-template: repeat(8, $element-width) / repeat(1, $element-width / 1.5);
    grid-gap: $grid-gap;
    width: 100%;
    min-width: $element-width / 1.5;
    max-width: $element-width / 1.5;
    padding-top: .4rem;
    font-size: 1rem;
    &.--is-fixed {
      z-index: 10;
      .period-1{
        &::before{
          content:'';
          position: absolute;
          background: lighten($bg-main, 2.5%);
          width: 100%;
          height: 75%;
          box-shadow: 0 0 .5rem $bg-main;
          transform: translate(0, -125%);
        }
        &::after{
          transform: translateX(25%) rotate(0);
        }
      }
    }
  }
  &__item{
    width: $element-width / 1.5;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid $c-main;
    &.period-1{
      border-top: 1px solid $c-main;
      &::before{
        @media screen and (min-width: $table-min-width + $element-width * 4 + $grid-gap * 2) {
          content:'';
          position: absolute;
          background: lighten($bg-main, 2.5%);
          width: 100%;
          height: 75%;
          box-shadow: 0 0 .5rem $bg-main;
          transform: translate(0, -125%);
        }
      }
      &::after{
        content: 'Period';
        position: absolute;
        font-size: .75rem;
        top: -.5rem;
        transform: translateY(-50%);
        cursor: auto;
        transition: all .2s ease;
        @media screen and (max-width: $table-min-width + $element-width * 2 + $grid-gap * 2) {
          top: -1.25rem;
          left: -3px;
          transform: translateY(-50%) rotate(45deg);
        }
      }
    }
  }
}

.dynamic-periodic-table{
  display: grid;
  position: absolute;
  top: $element-width / 1.5;
  grid-gap: $grid-gap;
  grid-template: repeat(10, $element-width) / repeat(18, $element-width); // Shorthand that represents <grid-template-rows> / <grid-template-columns>
  align-self: center;
  justify-self: center;
  justify-content: center;
  width: 100%;
  min-width: $table-min-width;
  margin-top: .4rem;
  @media screen and (max-width: $table-min-width + $element-width * 2 + $grid-gap * 1.5) {
    justify-content: normal;
    margin-left: $element-width - ($grid-gap * 3) - 2;
  }
}

.key, 
.element{
  border: 2px solid;
  font-family: 'Montserrat', sans-serif;
  &__abbr,
  &__name{
    flex-basis: 100%;
    text-align: center;
  }
  &__name{
    text-align: center;
    word-break: break-word;
  }
  &__abbr{
    font-size: 1rem;
  }
  &__atomic-number {
    position: absolute;
    top: .2rem;
    left: .2rem;
    font-size: .65rem;
  }
}

.key{
  position: relative;
  justify-content: center;
  align-items: center;
  grid-area: 1 / 4 / 3 / 5;
  align-self: center;
  justify-self: center;
  width: $element-width * 1.75; 
  height: $element-width * 1.75; 
  border-color: $c-main;
  font-size: 1rem;
  &__abbr{
    font-size: 1.5rem;
    margin-top: .5rem;
  }
  &::after{
    content: 'Key:';
    position: absolute;
    top: -1.15rem;
    left: -.2rem;
    font-family: 'Josefin Sans', 'Roboto', sans-serif;
  }
}

.legend{
  position: relative;
  align-self: center;
  justify-self: center;
  justify-content: space-between;
  align-items: center;
  grid-area: 1 / 7 / 3 / 11;
  width: ($element-width * 5.75) + ($element-width * 1.75 + $grid-gap * 1.75); 
  height: $element-width * 1.75; 
  &__element-type{
    width: $element-width * 5.75;
    justify-content: space-between;
    height: 100%;
    &-box{
      cursor: default;
    }
    &__metals,
    &__nonmetals{
      position: relative;
      align-self: flex-end;
      justify-content: space-between;
      height: 85%;
      &__alkali-metal,
      &__alkali-earth-metal,
      &__transition-metal,
      &__post-transition-metal{
        justify-content: center;
        width: $element-width / 2;
        height: 100%;
        text-align: center;
        margin-right: $grid-gap;
        border: 2px solid;
        transition: all .2s ease;
        &:hover{
          transform: scale($scale);
        }
        span {
          float: left; // Emulates an auto width
          font-size: .85rem;
          width: 100px;      
        }
      }
      &__lanthanoid-actinoid{
        align-content: space-between;
        justify-content: center;
        width: $element-width * 1.5;
        margin-right: $grid-gap;
        .lanthanoid,
        .actinoid{
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100% / 2 - 2;
          border: 2px solid;
          transition: all .2s ease;
          span{
            font-size: .85rem;
          }
          &:hover{
            transform: scale($scale);
          }
        }
        .lanthanoid{
          border-color: $c-element-lanthanoids;
          color: $c-element-lanthanoids;
        }
        .actinoid{
          border-color: $c-element-actinoids;
          color: $c-element-actinoids;
        }
      }
      &__alkali-metal{
        border-color: $c-element-alkali-metals;
        color: $c-element-alkali-metals;
        span{
          transform: rotate(90deg) translate(0, 280%);
        }
      }
      &__alkali-earth-metal{
        border-color: $c-element-alkali-earth-metals;
        color: $c-element-alkali-earth-metals;
        span{
          transform: rotate(90deg) translate(0, 140%);
        }
      }
      &__transition-metal{
        border-color: $c-element-transition-metals;
        color: $c-element-transition-metals;
        span{
          transform: rotate(90deg) translate(0, 138%);
        }
      }
      &__post-transition-metal{
        margin-right: 0;
        border-color: $c-element-post-transition-metals;
        color: $c-element-post-transition-metals;
        span{
          transform: rotate(90deg) translate(0, 138%);
        }
      }
      &::after{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        margin-top: -3px;
        border-right: 2px solid $c-main;
        border-left: 2px solid $c-main;
        transform: translateY(-100%);
      }
    }
    &__metals{
      width: $element-width * 3.5;
      &::after{
        content: 'Metals';
      }
    }
    &__nonmetals{
      width: $element-width;
      &__other-nonmetal,
      &__noble-gas{
        width: $element-width / 2 - $grid-gap / 2;
        text-align: center;
        transition: all .2s ease;
        span{
          transform: rotate(90deg) translate(35%, 138%);
        }
        &:hover{
          transform: scale($scale);
        }
      }
      &__other-nonmetal{
        margin-right: $grid-gap;
        border: 2px solid $c-element-other-nonmetals;
        color: $c-element-other-nonmetals;
      }
      &__noble-gas{
        border: 2px solid $c-element-noble-gas;
        color: $c-element-noble-gas;
        span{
          transform: rotate(90deg) translate(45%, 280%);
        }
      }
      span {
        float: left;
        font-size: .85rem;
        width: 100px;      
      }
      &::after{
        content: 'Non-metals';
      }
    }
    &__metalloid{
      height: 100%;
      width: $element-width / 2;
      color: $c-element-metalloids;
      border: 2px solid $c-element-metalloids;
      transition: all .2s ease;
      span{
        float: left;
        font-size: .85rem;
        width: 100px;    
        transform: rotate(90deg) translate(70%, 265%);
      }
      &:hover{
        transform: scale($scale);
      }
    }
    &__unknown{
      width: $element-width / 2;
      height: 100%;
      border: 2px solid $c-element-unknown;
      color: $c-element-unknown;
      transition: all .2s ease;
      span{
        float: left;
        font-size: .85rem;
        width: 100px;    
        transform: rotate(90deg) translate(0, 55%);
      }
      &:hover{
        transform: scale($scale);
      }
    }
  }
  &__element-state{
    justify-content: space-between;
    align-content: space-between;
    width: $element-width * 1.75 + $grid-gap / 2;
    height: 100%;
    &__gas,
    &__liquid,
    &__solid,
    &__unknown{
      justify-content: center;
      align-items: center;
      width: ($element-width * 1.75 + $grid-gap) / 2 - $grid-gap;
      height: ($element-width * 1.75 + $grid-gap) / 2 - $grid-gap;
      border: 2px $c-main;
      transition: all .2s ease;
      span{
        flex-basis: 100%;
        text-align: center;
        font-size: .85rem;
      }
      &:hover{
        transform: scale($scale);
      }
    }
    &__gas{
      border-style: dashed;
    }
    &__liquid{
      border-style: solid;
    }
    &__solid{
      border: double;
    }
    &__unknown{
      border-style: dotted;
    }
  }
}

.temperature{
  align-items: center;
  justify-content: space-between;
  grid-area: 3 / 3 / 3 / 13;
  margin-left: $element-width / 1.5;
  &__inputs{
    align-items: center;
    &__slider{
      position: relative;
      width: $element-width * 5.75 - $grid-gap;
      height: $grid-gap / 1.5;
      border-radius: $grid-gap;
      background-color: $c-main;
      padding: 0;
      margin: 0 $grid-gap * 2 0 0;
      appearance: none;
      outline: none;
      &::after{
        content: "Drag and drop to modify temperature and element's state";
        position: absolute;
        top: -1.5rem;
        left: 0;
        right: 0;
        text-align: center;
        font-family: 'Josefin Sans', 'Roboto', sans-serif;
        color: $c-main;
      }
      &::-webkit-slider-thumb { // Cross-browser compatibility
        width:  $grid-gap * 4;
        height: $grid-gap * 4;
        appearance: none;
        border-radius: 50%;
        background-color: lighten($bg-main, 30%);
        cursor: pointer;
        transition: all .2s ease-in-out;
        &::after{
          background-color: lighten($bg-main, 30%);
        }
        &:hover {
          background-color: lighten($bg-main, 50%);
        }
        &:active::-webkit-slider-thumb {
          background-color: lighten($bg-main, 40%);
        }
      }
      &::-moz-range-thumb { // Cross-browser compatibility
        width:  $grid-gap * 3.5;
        height: $grid-gap * 3.5;
        appearance: none;
        border-radius: 50%;
        background-color: lighten($bg-main, 30%);
        cursor: pointer;
        transition: all .2s ease-in-out;
        &:hover {
          background-color: lighten($bg-main, 50%);
        }
        &::-moz-range-thumb  {
          background-color: lighten($bg-main, 40%);
        }
      }
    }
    ::-moz-range-track {
      background: $c-main; // Overrides Firefox default styles in range track
      border: 0;
    }
    input::-moz-focus-inner,
    input::-moz-focus-outer { 
      border: 0; // Overrides Firefox default inner and outer range styles 
    }
    &__result{
      position: relative;
      align-items: center;
      justify-content: center;
      width: $element-width - $grid-gap;
      height: $element-width / 2;
      color: $c-main;
      border: 2px solid lighten($bg-main, 30%);
      &::after{
        content: '';
        position: absolute;
        bottom: $grid-gap / 5;
        left: 0;
        border-top: $grid-gap solid transparent;
        border-right: $grid-gap * 1.5 solid lighten($bg-main, 30%);
        border-bottom: $grid-gap solid transparent;
        transform: translate(-100%, -100%);
      }
    }
  }
  &__unit-conversion{
    align-content: space-evenly;
    text-align: center;
    width: $element-width * 1.5;
    height: 100%;
    p {
      flex-basis: 100%;
      opactity: .5;
    }
  }
  .reset__temperature{
    opacity: 0;
    visibility: hidden;
    justify-content: center;
    align-content: center;
    position: relative;
    width: $element-width * 1.5;
    height: $element-width / 1.5;
    overflow: hidden;
    background: transparent;
    margin-right: 1.85rem;
    font-family: 'Josefin Sans', 'Roboto', sans-serif;
    color: $c-main;
    border: 2px solid lighten($bg-main, 30%);
    background: none;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    z-index: 0;
    transition: all .3s ease;
    span{
      position: relative;
      z-index: 100;
    }
    &.--is-visible{
      opacity: 1;
      visibility: visible;
    }
    &::before,
    &::after{
      content: '';
      position: absolute;
      top: 50%;
      width: $grid-gap * 3;
      height: $grid-gap * 3;
      background-color: lighten($bg-main, 30%);
      border-radius: 50%;
    }
    &::before{
      left: -1.25rem;
      transform: translate(-50%, -50%);
    }
    &::after{
      right: -1.25rem;
      transform: translate(50%, -50%);
    }
    &:hover{
      animation: focus .001s .8s forwards;
      &::before{
        animation: criss-cross-left 1s both alternate, lighten-background .001s .8s forwards ;
      }
      &::after {
        animation: criss-cross-right 1s both alternate, lighten-background .001s .8s forwards;
      }
    }
    &:active{
      transform: scale(0.95);
    }
  }
}

.element{
  position: relative;
  width: $element-width;
  height: $element-width;
  justify-content: center;
  align-items: center;
  border: 2px solid;
  cursor: pointer;
  font-size: .75rem;
  transition: all .2s ease;
  &[data-element-type='other-nonmetal']{
    color: $c-element-other-nonmetals;
    border-color: $c-element-other-nonmetals;
  }
  &[data-element-type='alkali-metal']{
    color: $c-element-alkali-metals;
    border-color: $c-element-alkali-metals;
  }
  &[data-element-type='alkali-earth-metal']{
    color: $c-element-alkali-earth-metals;
    border-color: $c-element-alkali-earth-metals;
  }
  &[data-element-type='transition-metal']{
    color: $c-element-transition-metals;
    border-color: $c-element-transition-metals;
  }
  &[data-element-type='Lanthanoid']{
    color: $c-element-lanthanoids;
    border-color: $c-element-lanthanoids;
  }
  &[data-element-type='Actinoid']{
    color: $c-element-actinoids;
    border-color: $c-element-actinoids;
  }
  &[data-element-type='post-transition-metal']{
    color: $c-element-post-transition-metals;
    border-color: $c-element-post-transition-metals;
  }
  &[data-element-type='metalloid']{
    color:  $c-element-metalloids;
    border-color: $c-element-metalloids;
  }
  &[data-element-type='noble-gas']{
    color:  $c-element-noble-gas;
    border-color: $c-element-noble-gas;
  }
  &[data-element-type='unknown']{
    color:  $c-element-unknown;
    border-color: $c-element-unknown;
  }
  &[data-element-state='gas']{
    border-style: dashed;
  }
  &[data-element-state='liquid']{
    border-style: solid;
  }
  &[data-element-state='solid']{
    border: double;
  }
  &[data-element-state='unknown']{
    border-style: dotted;
  }
  &[data-element-name='Hydrogen']{
    grid-area: 1 / 1;
    margin-top: 1px;
  }
  &[data-element-name='Lithium']{
    grid-area: 2 / 1;
  }
  &[data-element-name='Sodium']{
    grid-area: 3 / 1;
  }
  &[data-element-name='Potassium']{
    grid-area: 4 / 1;
  }
  &[data-element-name='Rubidium']{
    grid-area: 5 / 1;
  }
  &[data-element-name='Caesium']{
    grid-area: 6 / 1;
  }
  &[data-element-name='Francium']{
    grid-area: 7 / 1;
  }
  &[data-element-name='Berilyum']{
    grid-area: 2 / 2;
  }
  &[data-element-name='Magnesium']{
    grid-area: 3 / 2;
  }
  &[data-element-name='Calcium']{
    grid-area: 4 / 2;
  }
  &[data-element-name='Stronium']{
    grid-area: 5 / 2;
  }
  &[data-element-name='Barium']{
    grid-area: 6 / 2;
  }
  &[data-element-name='Radium']{
    grid-area: 7 / 2;
  }
  &[data-element-name='Scandium']{
    grid-area: 4 / 3;
  }
  &[data-element-name='Yttrium']{
    grid-area: 5 / 3;
  }
  &[data-element-name='Lanthanoids']{
    grid-area: 6 / 3;
  }
  &[data-element-name='Actinoids']{
    grid-area: 7 / 3;
  }
  &[data-element-name='Titanium']{
    grid-area: 4 / 4;
  }
  &[data-element-name='Zirconium']{
    grid-area: 5 / 4;
  }
  &[data-element-name='Hafnium']{
    grid-area: 6 / 4;
  }
  &[data-element-name='Rutherfordium']{
    grid-area: 7 / 4;
  }
  &[data-element-name='Vanadium']{
    grid-area: 4 / 5;
  }
  &[data-element-name='Niobium']{
    grid-area: 5 / 5;
  }
  &[data-element-name='Tantalum']{
    grid-area: 6 / 5;
  }
  &[data-element-name='Dubnium']{
    grid-area: 7 / 5;
  }
  &[data-element-name='Chromium']{
    grid-area: 4 / 6;
  }
  &[data-element-name='Molybdenum']{
    grid-area: 5 / 6;
  }
  &[data-element-name='Tungsten']{
    grid-area: 6 / 6;
  }
  &[data-element-name='Seaborgium']{
    grid-area: 7 / 6;
  }
  &[data-element-name='Manganese']{
    grid-area: 4 / 7;
  }
  &[data-element-name='Technetium']{
    grid-area: 5 / 7;
  }
  &[data-element-name='Rhenium']{
    grid-area: 6 / 7;
  }
  &[data-element-name='Bohrium']{
    grid-area: 7 / 7;
  }
  &[data-element-name='Iron']{
    grid-area: 4 / 8;
  }
  &[data-element-name='Ruthenium']{
    grid-area: 5 / 8;
  }
  &[data-element-name='Osmium']{
    grid-area: 6 / 8;
  }
  &[data-element-name='Hassium']{
    grid-area: 7 / 8;
  }
  &[data-element-name='Cobalt']{
    grid-area: 4 / 9;
  }
  &[data-element-name='Rhodium']{
    grid-area: 5 / 9;
  }
  &[data-element-name='Iridium']{
    grid-area: 6 / 9;
  }
  &[data-element-name='Meitnerium']{
    grid-area: 7 / 9;
  }
  &[data-element-name='Nickel']{
    grid-area: 4 / 10;
  }
  &[data-element-name='Palladium']{
    grid-area: 5 / 10;
  }
  &[data-element-name='Platinum']{
    grid-area: 6 / 10;
  }
  &[data-element-name='Darmstadtium']{
    grid-area: 7 / 10;
  }
  &[data-element-name='Copper']{
    grid-area: 4 / 11;
  }
  &[data-element-name='Silver']{
    grid-area: 5 / 11;
  }
  &[data-element-name='Gold']{
    grid-area: 6 / 11;
  }
  &[data-element-name='Roentgenium']{
    grid-area: 7 / 11;
  }
  &[data-element-name='Zinc']{
    grid-area: 4 / 12;
  }
  &[data-element-name='Cadmium']{
    grid-area: 5 / 12;
  }
  &[data-element-name='Mercury']{
    grid-area: 6 / 12;
  }
  &[data-element-name='Copernicium']{
    grid-area: 7 / 12;
  }
  &[data-element-name='Boron']{
    grid-area: 2 / 13;
  }
  &[data-element-name='Aluminium']{
    grid-area: 3 / 13;
  }
  &[data-element-name='Galium']{
    grid-area: 4 / 13;
  }
  &[data-element-name='Indium']{
    grid-area: 5 / 13;
  }
  &[data-element-name='Thalium']{
    grid-area: 6 / 13;
  }
  &[data-element-name='Nihonium']{
    grid-area: 7 / 13;
  }
  &[data-element-name='Carbon']{
    grid-area: 2 / 14;
  }
  &[data-element-name='Silicon']{
    grid-area: 3 / 14;
  }
  &[data-element-name='Germanium']{
    grid-area: 4 / 14;
  }
  &[data-element-name='Tin']{
    grid-area: 5 / 14;
  }
  &[data-element-name='Lead']{
    grid-area: 6 / 14;
  }
  &[data-element-name='Flevorium']{
    grid-area: 7 / 14;
  }
  &[data-element-name='Nitrogen']{
    grid-area: 2 / 15;
  }
  &[data-element-name='Phosphorus']{
    grid-area: 3 / 15;
  }
  &[data-element-name='Arsenic']{
    grid-area: 4 / 15;
  }
  &[data-element-name='Antimony']{
    grid-area: 5 / 15;
  }
  &[data-element-name='Bismuth']{
    grid-area: 6 / 15;
  }
  &[data-element-name='Moscovium']{
    grid-area: 7 /  15;
  }
  &[data-element-name='Oxygen']{
    grid-area: 2 /  16;
  }
  &[data-element-name='Sulfur']{
    grid-area: 3 /  16;
  }
  &[data-element-name='Selenium']{
    grid-area: 4 /  16;
  }
  &[data-element-name='Tellurium']{
    grid-area: 5 /  16;
  }
  &[data-element-name='Polonium']{
    grid-area: 6 /  16;
  }
  &[data-element-name='Livemorium']{
    grid-area: 7 /  16;
  }
  &[data-element-name='Fluorine']{
    grid-area: 2 /  17;
  }
  &[data-element-name='Chlorine']{
    grid-area: 3 /  17;
  }
  &[data-element-name='Bromine']{
    grid-area: 4 /  17;
  }
  &[data-element-name='Iodine']{
    grid-area: 5 /  17;
  }
  &[data-element-name='Astatine']{
    grid-area: 6 /  17;
  }
  &[data-element-name='Tennessine']{
    grid-area: 7 /  17;
  }
  &[data-element-name='Helium']{
    grid-area: 1 /  18;
  }
  &[data-element-name='Neon']{
    grid-area: 2 /  18;
  }
  &[data-element-name='Argon']{
    grid-area: 3 /  18;
  }
  &[data-element-name='Krypton']{
    grid-area: 4 /  18;
  }
  &[data-element-name='Xenon']{
    grid-area: 5 /  18;
  }
  &[data-element-name='Radon']{
    grid-area: 6 /  18;
  }
  &[data-element-name='Oganesson']{
    grid-area: 7 /  18;
  }
  &[data-element-name='Lanthanum']{
    grid-area: 9 /  3;
  }
  &[data-element-name='Cerium']{
    grid-area: 9 /  4;
  }
  &[data-element-name='Praseodymium']{
    grid-area: 9 /  5;
  }
  &[data-element-name='Neodymium']{
    grid-area: 9 /  6;
  }
  &[data-element-name='Promethium']{
    grid-area: 9 /  7;
  }
  &[data-element-name='Samarium']{
    grid-area: 9 /  8;
  }
  &[data-element-name='Europium']{
    grid-area: 9 /  9;
  }
  &[data-element-name='Gadolinium']{
    grid-area: 9 /  10;
  }
  &[data-element-name='Terbium']{
    grid-area: 9 /  11;
  }
  &[data-element-name='Dysprosium']{
    grid-area: 9 /  12;
  }
  &[data-element-name='Holmium']{
    grid-area: 9 /  13;
  }
  &[data-element-name='Erbium']{
    grid-area: 9 /  14;
  }
  &[data-element-name='Thulium']{
    grid-area: 9 /  15;
  }
  &[data-element-name='Ytterbium']{
    grid-area: 9 /  16;
  }
  &[data-element-name='Lutetium']{
    grid-area: 9 /  17;
  }
  &[data-element-name='Actinium']{
    grid-area: 10 /  3;
  }
  &[data-element-name='Thorium']{
    grid-area: 10 /  4;
  }
  &[data-element-name='Protactinium']{
    grid-area: 10 /  5;
  }
  &[data-element-name='Uranium']{
    grid-area: 10 /  6;
  }
  &[data-element-name='Neptunium']{
    grid-area: 10 /  7;
  }
  &[data-element-name='Plutonium']{
    grid-area: 10 /  8;
  }
  &[data-element-name='Americium']{
    grid-area: 10 /  9;
  }
  &[data-element-name='Curium']{
    grid-area: 10 /  10;
  }
  &[data-element-name='Berkelium']{
    grid-area: 10 /  11;
  }
  &[data-element-name='Californium']{
    grid-area: 10 /  12;
  }
  &[data-element-name='Einsteinium']{
    grid-area: 10 /  13;
  }
  &[data-element-name='Fermium']{
    grid-area: 10 /  14;
  }
  &[data-element-name='Mendelevium']{
    grid-area: 10 /  15;
  }
  &[data-element-name='Nobelium']{
    grid-area: 10 /  16;
  }
  &[data-element-name='Lawrencium']{
    grid-area: 10 /  17;
  }
  .tooltip{
    position: absolute;
    padding: .25rem;
    text-align: center;
    background-color: darken($bg-main,5%);
    color: $c-main;
    border-radius: 1px;
    visibility: hidden;
    z-index: 100;
    transition: visibility .15s $cubic-bezier;
    &.--is-hidden{
      display:none;
    }
    &.right-tooltip{
      left: 100%;
      margin-left: .75rem;
      &::after{
        content: '';
        position: absolute;
        top: 50%;
        right: 100%; 
        border-top: 5px solid transparent;
        border-right: 7.5px solid darken($bg-main,5%);
        border-bottom: 5px solid transparent;
        transform: translateY(-50%);
      }
    }
    &.left-tooltip{
      right: 100%;
      margin-right: .75rem;
      &::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 100%; 
        border-top: 5px solid transparent;
        border-left: 7.5px solid darken($bg-main,5%);
        border-bottom: 5px solid transparent;
        transform: translateY(-50%);
      }
    }
    &.top-tooltip{
      top: -.75rem;
      transform: translateY(-100%);
      &::after{
        content: '';
        position: absolute;
        bottom: -.9rem;
        left: 50%; 
        border-top: 7.5px solid darken($bg-main,5%);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        transform: translate(-50%, -100%);
      }
    }
    &.bottom-tooltip{
      bottom: -.75rem;
      transform: translateY(100%);
      &::after{
        content: '';
        position: absolute;
        bottom: .75rem;
        left: 50%; 
        border-bottom: 7.5px solid darken($bg-main,5%);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        transform: translate(-50%, -100%);
      }
    }
  }
  &:hover:not([data-element-name='Lanthanoids']):not([data-element-name='Actinoids']),
  &.--is-active {
    box-shadow: 0 0 1rem $c-shadow-main;   
    transform: scale($scale);
  }
  &.--is-triggered{
    z-index: 10;
  }
  &:hover{
    &[data-element-name='Lanthanoids'],
    &[data-element-name='Actinoids']{
      transform: scale($scale);
    }
    .tooltip{
      visibility: visible;
    }
  }
}

.modal{
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  opacity: 0;
  background-color: darken(rgba($c-shadow-main, .975), 30%);
  z-index: 1000;
  will-change: visibility, opacity;
  transition: all .5s $cubic-bezier;
  &__dialog{
    position: relative;
    max-width: $modal-width;
    width: 100%;
    max-height: 90%;
    height: 100%;
    padding: 1.2rem;
    border: none;
    background: none;
  }
  &__content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    opacity: 0;
    border: 3px solid transparent;
    transition: all .25s $cubic-bezier;
    &.--is-visible{
      opacity: 1;
      border: 3px solid transparent;
      color: $c-main;
      &::before, 
      &::after{
        transform: scale(1);
      }
    }
    .atom{
      position: absolute;
      top: $element-width + $grid-gap * 2;
      left: 0;
      right: 0;
      animation: up-and-down 7s ease infinite;
      &__core{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.5rem;
        height: 1.5rem;;
        border-radius: 50%;
        background-color: darken($c-shadow-main, 5%);
        z-index: 0;
      }
      &::before,
      &::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -($element-width - $grid-gap) 0 -($element-width - $grid-gap) 0;
        width: $element-width * 2 + $grid-gap * 2;
        height: $element-width * 2 + $grid-gap * 2;
        border-radius: 50%;
        border: 4px solid darken($c-shadow-main, 5%);
      }
      &::before{
        z-index: 1;
        animation: clockwise-rotation-2 2s linear infinite;
      }
      &::after{
        z-index: 2;
        animation: clockwise-rotation-1 2s linear infinite;
      }
    }
    &::before, 
    &::after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      transform: scale(0);
      transition: all .7s $cubic-bezier;
    }
    &::before{
      border-bottom: 3px solid darken($c-shadow-main, 5%);
      border-left: 3px solid darken($c-shadow-main, 5%);
      transform-origin: 0 100%;
    }
    &::after{
      border-top: 3px solid darken($c-shadow-main, 5%);
      border-right: 3px solid darken($c-shadow-main, 5%);
      transform-origin: 100% 0%;
    }
    &__properties{
      display: grid;
      grid-template:  repeat(auto-fill, minmax($element-width, 1fr)) / repeat(10,  $element-width);
      height: 100%;
    }
  }
  &__close{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: .15rem;
    background: transparent;
    cursor: pointer;
    z-index: 100;
    transition: all .5s $cubic-bezier;
    svg{
      width: 1.75rem;
      height: 1.75rem;
      border: 2px solid darken($c-shadow-main, 5%);
      fill: darken($c-shadow-main, 5%);
      pointer-events: none;
      transition: all 0.5s $cubic-bezier;
    }
    &:hover{
      svg{
        background: darken($c-shadow-main, 5%);
        fill: darken($c-shadow-main, 30%);
      }
    }
    &:active{}
  }
  &.--modal__background{
    background: $c-shadow-main;
  }
  &.--is-visible{
    visibility: visible;
    opacity: 1;
  }
}

// Animations
@keyframes criss-cross-left {
  0% {
    left: -1.5rem;
  }
  50% {
    left: 50%;
    width:$grid-gap * 3;
    height: $grid-gap * 3;
  }
  100% {
    left: 50%;
    width: 150%;
    height: 150%;
  }
}

@keyframes criss-cross-right {
  0% {
    right: -1.5rem;
  }
  50% {
    right: 50%;
    width:$grid-gap * 3;
    height: $grid-gap * 3;
  }
  100% {
    right: 50%;
    width: 150%;
    height: 150%;
  }
}

@keyframes focus{
  to{
    border: 2px solid lighten($bg-main, 10%);
    color: lighten($bg-main, 10%);
    font-weight: 600;
    box-shadow: 0 0 1rem $c-shadow-main;  
  }
}

@keyframes lighten-background{
  to{
    background-color: lighten($bg-main, 30%);
  }
}

@keyframes clockwise-rotation-1 {
  from { 
    transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);
  }
  to{ transform: perspective(1000px) rotate3d(1, 1, 1, 360deg); 
  }
}

@keyframes clockwise-rotation-2 {
  from { 
    transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);
  }
  to { 
    transform: perspective(1000px) rotate3d(1, -1, 1, 360deg); 
  }
}

@keyframes up-and-down{
  0%{
    margin-top: -1rem;
  }
  50%{
    margin-top: 1rem;
  }
  100%{
    margin-top: -1rem;
  }
}
              
            
!

JS

              
                
console.clear();

const DELAY = 5,
      STP = 273,
      ELEMENT_MODAL_DATA = {
        "Hydrogen": {"name": "Element: Hydrogen", "symbol": "Symbol: H", "atomic-number": "Atomic number: 1", "atomic-weight": "Atomic weight: 1.008 (conventional)", "group": " Group: 1", "period": "Period: 1", "category": "Category: Reactive non-metal", "block": "Block: s-block", "electron-configuration": "Electron configuration: 1s<sup>1</sup>", "electron-per-shell": "Electrons per shell: 1", "phase-at-STP": "Phase at STP: Gas", "melting-point": "Melting point: 13.99 K", "boiling-point": "Boiling point: 20.271 K", "oxidation-states": "Oxidation states: -1, +1 (an amphoteric oxide)", "electronegativity": "Pauling scale: 2.20", "ionization-energy": "Ionization energy: 1st: 1312.0 kJ/mol", "covalent-radius": "Covalent radius: 31±5 pm", "van-der-waals-radius": "Van der Waals radius: 120 pm", "crystal-structure": "Crystal structure: hexagonal", "thermal-conductivity": "Thermal conductivity: 0.1805 W/(m·K)", "magnetic-order": "Magnetic order: diamagnetic", "magnetic-susceptibility": "Magnetic susceptibility: −3.98·10−6 cm<sup>3</sup>/mol ", "miscellaneous": "Discovered in 1766 by Henry Cavendish (named by Antoine Lavoisier in 1783)"},
        "Litium": {}
      };

let periodList = document.querySelectorAll('.period__item'),
    groupList = document.querySelectorAll('.group__item'),
    elementList = document.querySelectorAll('.element'),
    legendList = document.querySelectorAll('.legend-box'),
    temperatureSlider = document.querySelector('.temperature__inputs__slider'),
    resetTemperatureButton = document.querySelector('.reset__temperature'),
    lanthanoidBox = document.querySelector(`[data-element-name='Lanthanoids']`),
    actinoidBox = document.querySelector(`[data-element-name='Actinoids']`),
    modalBox = document.querySelector('.modal'),
    modalContent = document.querySelector('.modal__content'),
    modalProperties = document.querySelector('.modal__content__properties'),
    modalClose = document.querySelector('.modal__close'),
    isOpen = false,
    elementClicked;

window.addEventListener('scroll', () => {
  let scrollY = (window.scrollY > 0) ? true : false,
      scrollX = (window.scrollX > 0) ? true : false,
      period = document.querySelector('.period__list'),
      group = document.querySelector('.group__list');

  if(scrollX){
    addClass('--is-fixed', period, 0);
    period.style.left = `${window.scrollX}px`;
  } else{
    removeClass('--is-fixed', period, 0);
    period.style.left = 0;
  }
  if(scrollY){
    addClass('--is-fixed', group, 0);
  } else {
    removeClass('--is-fixed', group, 0);
  }
});


modalClose.addEventListener('click', closeModal);
modalBox.addEventListener('click', closeModal);
document.addEventListener('keydown', (event) => {
  if(event.keyCode === 27 && isOpen){
    closeModal(event);
  }
});

actinoidBox.addEventListener('mouseenter', (self) =>{
  let dataActinoids = self.target.getAttribute('data-element-type'),
      dataToSearch = 'type';

  highlightElement(dataActinoids, dataToSearch);
});

actinoidBox.addEventListener('mouseleave', () =>{
  equalizeElement();
});

lanthanoidBox.addEventListener('mouseenter', (self) =>{
  let dataLantanoids = self.target.getAttribute('data-element-type'),
      dataToSearch = 'type';

  highlightElement(dataLantanoids, dataToSearch);
});

lanthanoidBox.addEventListener('mouseleave', () =>{
  equalizeElement();
});

resetTemperatureButton.addEventListener('click', () => {
  let dataToSearch = ['melting-point','boiling-point'];

  temperatureSlider.value = STP;

  setNewTemperature(STP);
  highlightElement(STP, dataToSearch);
  removeClass('--is-visible', resetTemperatureButton, 0);
});

temperatureSlider.addEventListener('input', (self) => {
  let currentValue = Number(self.target.value),
      dataToSearch = ['melting-point','boiling-point'];

  if(currentValue !== STP && !resetTemperatureButton.classList.contains('--is-visible')){
    addClass('--is-visible', resetTemperatureButton, 0);
  } else if(currentValue === STP){
    removeClass('--is-visible', resetTemperatureButton, 0);
  }

  setNewTemperature(currentValue);
  highlightElement(currentValue, dataToSearch);
});

Array.from(elementList).forEach(elementItem => {
  elementItem.addEventListener('click', () =>{
    if(isLanthanoidOrActinoid(elementItem)){
      elementClicked = elementItem;
      elementName = elementClicked.getAttribute('data-element-name');

      modalAnimation(elementItem);
      createModalContent(elementName);
    }
  });
});

Array.from(legendList).forEach(legendItem => {
  legendItem.addEventListener('mouseenter', (self) => {
    let legendData,
        dataToSearch;

    if (legendItem.getAttribute('data-element-type')){
      legendData = self.target.getAttribute('data-element-type');
      dataToSearch = 'type';
    } else {
      legendData = self.target.getAttribute('data-element-state');
      dataToSearch = 'state';
    }

    highlightElement(legendData, dataToSearch);
  });

  legendItem.addEventListener('mouseleave', () => {
    equalizeElement();
  });
});

Array.from(periodList).forEach(periodItem => {
  periodItem.addEventListener('mouseenter', (self) => {
    let periodNumber = Number(self.target.firstChild.innerHTML),
        dataToSearch = 'period';

    highlightElement(periodNumber, dataToSearch);
  });

  periodItem.addEventListener('mouseleave', () => {
    equalizeElement();
  });
});

Array.from(groupList).forEach(groupItem => {
  groupItem.addEventListener('mouseenter', (self) => {
    let groupNumber = Number(self.target.firstChild.innerHTML),
        dataToSearch = 'group';

    highlightElement(groupNumber, dataToSearch);
  });

  groupItem.addEventListener('mouseleave', () => {
    equalizeElement();
  });
});

function equalizeElement(){
  let index = 0;

  Array.from(elementList).forEach(elementItem => {
    removeClass('--is-active', elementItem, index);
    index++;
  });
};

function highlightElement(dataElement, dataToSearch) {
  let index = 0;

  Array.from(elementList).forEach(elementItem => {
    let dataFromElement = elementItem.getAttribute(`data-element-${dataToSearch}`);

    if (dataToSearch === 'group' || dataToSearch === 'period') {
      dataFromElement = Number(dataFromElement);
    }

    if (dataToSearch.length === 2) {
      let meltingPoint = Number(elementItem.getAttribute(`data-element-${dataToSearch[0]}`)),
          boilingPoint = Number(elementItem.getAttribute(`data-element-${dataToSearch[1]}`));

      if (!isNaN(meltingPoint) && !isNaN(boilingPoint)){
        if (dataElement < meltingPoint){
          elementItem.setAttribute('data-element-state', 'solid');
        }
        else if (dataElement < boilingPoint){
          if (isLanthanoidOrActinoid(elementItem)){
            elementItem.setAttribute('data-element-state', 'liquid');
          }
        } else {
          elementItem.setAttribute('data-element-state', 'gas');
        }
      } else if (isNaN(boilingPoint)){
        let elementState = 'unknown';
        if (dataElement < meltingPoint){
          elementState = 'solid'
        }           
        elementItem.setAttribute('data-element-state', elementState);
      }
    }

    if (dataElement === dataFromElement) {
      addClass('--is-active', elementItem, index);
    }

    index++;
  });
};

function createModalContent(elementName){
  Object.keys(ELEMENT_MODAL_DATA[elementName]).forEach(key => modalProperties.innerHTML += `<p class='element-property element-${key}'>${ELEMENT_MODAL_DATA[elementName][key]}</p>`);
}

function removeModalContent(){
  modalProperties.innerHTML = '';
}

function modalAnimation(self){
  let selfProperties = self.getBoundingClientRect(),
      modalProperties = modalContent.getBoundingClientRect(),
      tooltip = self.querySelector('.tooltip'),
      translateX,
      translateY,
      scale,
      positionX = window.innerWidth / 2,
      positionY = window.innerHeight / 2;

  addClass('--is-hidden', tooltip, 0);
  addClass('--is-triggered', self, 0);
  addClass('modal__background', modalBox, 0);

  scale = modalProperties.width /  100;
  translateX = Math.round(positionX - selfProperties.left - selfProperties.width / 2);
  translateY = Math.round(positionY - selfProperties.top - selfProperties.height / 2);
  self.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`

  window.requestAnimationFrame(() => {
    openModal();
  });
}

function openModal(){
  if (!isOpen) {
    let content = modalBox.querySelector('.modal__content');

    addClass('--is-visible', modalBox, 0)
    addClass('--is-visible', content, 75)

    content.addEventListener('transitionend', hideContent(content), false);

    isOpen = true;
  }
}

function hideContent(content){
  content.removeEventListener('transitionend', hideContent, false);
}

function closeModal(event){
  event.preventDefault();
  event.stopImmediatePropagation();

  let target = event.target,
      tooltip = elementClicked.querySelector('.tooltip');

  if (isOpen && target.classList.contains('modal__background') || target.classList.contains('modal__close') || event.keyCode === 27) {
    removeClass('--is-visible', modalBox, 0)
    removeClass('--is-visible', modalContent, 0)

    elementClicked.removeAttribute('style');

    removeClass('--is-triggered', elementClicked, 0)
    removeClass('modal__background', modalBox, 0)
    removeClass('--is-hidden', tooltip, 0);

    removeModalContent();

    elementClicked = '';
    isOpen = false;
  }
}

function setNewTemperature(currentValue){
  let kelvinOutput = document.querySelector('.temperature__inputs__result'),
      celsiusOutput = document.querySelector('.celsius'),
      farenheitOutput = document.querySelector('.farenheit');

  kelvinOutput.innerHTML = `${currentValue} K`;
  celsiusOutput.innerHTML = `${currentValue - 273}ºC`;
  farenheitOutput.innerHTML = `${Math.round((currentValue * 9 / 5 - 460) * 100) / 100}ºF`
}

function addClass(className, element, index){
  setTimeout(() => {
    element.classList.add(className);
  }, index * DELAY);
}

function removeClass(className, element, index){
  setTimeout(() => {
    element.classList.remove(className);
  }, index * DELAY);
}

function isLanthanoidOrActinoid(elementItem){
  if(elementItem.getAttribute('data-element-name') !== 'Lanthanoids' && elementItem.getAttribute('data-element-name') !== 'Actinoids'){
    return true;
  } else {
    return false;
  }
}
              
            
!
999px

Console