span.swatch{display:inline-block;width:14px;height:14px;margin-right:10px}span.swatch.element-metal{background-color:#6a6a6a}span.swatch.element-alkali-metal{background-color:#0095ff}span.swatch.element-alkali-earth-metal{background-color:#50bc08}span.swatch.element-transition-metal{background-color:#969695}span.swatch.element-lanthoid{background-color:#df3035}span.swatch.element-actinoid{background-color:#fcb002}span.swatch.element-metalloid{background-color:#3d3f7f}span.swatch.element-non-metal{background-color:#969695}span.swatch.element-halogen{background-color:#333236}span.swatch.element-noble-gas{background-color:#131f6b}span.swatch.element-lanthanoid-transitional-metal{background-color:#df3035}span.swatch.element-actinoid-transitional-metal{background-color:#fcb002}#wrapper{width:100%;margin:0 auto 30px auto;position:relative;display:flex;flex-direction:column-reverse;justify-content:center;align-content:center}#wrapper #key{position:relative;z-index:100;width:auto;justify-content:center;display:flex;margin-top:var(--spacer1)}#wrapper #key ul{float:left;margin-right:40px}#wrapper #key ul li{line-height:1.5em;font-size:.8em;color:#b6b6b6}#wrapper #elements{display:grid;grid-template-columns:repeat(18, calc((100% - 90px) / 18));grid-template-rows:repeat(10, 75px);grid-gap:5px;position:relative}[class^=element-]{cursor:pointer;position:relative;z-index:1;color:#333;width:100%;height:100%;font-size:12px;border:2px solid #fff;perspective:1000px;border:1px solid #fff}[class^=element-] .chip{height:100%;padding:4px;display:flex;flex-direction:column;align-content:center}[class^=element-] .chip i{width:-moz-fit-content;width:fit-content;font-size:.8em}[class^=element-] .chip strong{margin:0 auto;font-size:1.5em;width:-moz-fit-content;width:fit-content;font-weight:bold;text-align:center;margin-top:4px;white-space:nowrap;transition:opacity var(--transition-duration, 0.2s) var(--transition-ease, cubic-bezier(0.42, 0, 0.58, 1)) var(--transition-delay, )}[class^=element-] .chip::before,[class^=element-] .chip::after{white-space:nowrap;position:absolute;top:100%;left:4px;font-size:0.75em;opacity:0;transform:translate(0, var(--title-y-position));transition:transform var(--transition-duration, 0.2s) var(--transition-ease, cubic-bezier(0.42, 0, 0.58, 1)) var(--transition-delay, ),opacity var(--transition-duration, 0.2s) var(--transition-ease, cubic-bezier(0.42, 0, 0.58, 1)) var(--transition-delay, );color:var(--primary, #131f6b);background-color:#fff}[class^=element-] .chip::after{content:attr(data-title);border-bottom:none}[class^=element-] .chip::before{content:attr(data-number);border-top:none}[class^=element-] .chip:hover strong{opacity:0}[class^=element-] .chip:hover::after{--title-y-position: calc(-100% - calc(var(--gap) * 2));opacity:1}[class^=element-] .chip:hover::before{--title-y-position: calc(-100% - calc(var(--gap) * 0.5));opacity:1}[class^=element-].r1{grid-row-start:1;grid-row-end:calc(1 + 1)}[class^=element-].r2{grid-row-start:2;grid-row-end:calc(2 + 1)}[class^=element-].r3{grid-row-start:3;grid-row-end:calc(3 + 1)}[class^=element-].r4{grid-row-start:4;grid-row-end:calc(4 + 1)}[class^=element-].r5{grid-row-start:5;grid-row-end:calc(5 + 1)}[class^=element-].r6{grid-row-start:6;grid-row-end:calc(6 + 1)}[class^=element-].r7{grid-row-start:7;grid-row-end:calc(7 + 1)}[class^=element-].r8{grid-row-start:8;grid-row-end:calc(8 + 1)}[class^=element-].r9{grid-row-start:9;grid-row-end:calc(9 + 1)}[class^=element-].r10{grid-row-start:10;grid-row-end:calc(10 + 1)}[class^=element-].c1{grid-column-start:1;grid-column-end:calc(1 + 1)}[class^=element-].c2{grid-column-start:2;grid-column-end:calc(2 + 1)}[class^=element-].c3{grid-column-start:3;grid-column-end:calc(3 + 1)}[class^=element-].c4{grid-column-start:4;grid-column-end:calc(4 + 1)}[class^=element-].c5{grid-column-start:5;grid-column-end:calc(5 + 1)}[class^=element-].c6{grid-column-start:6;grid-column-end:calc(6 + 1)}[class^=element-].c7{grid-column-start:7;grid-column-end:calc(7 + 1)}[class^=element-].c8{grid-column-start:8;grid-column-end:calc(8 + 1)}[class^=element-].c9{grid-column-start:9;grid-column-end:calc(9 + 1)}[class^=element-].c10{grid-column-start:10;grid-column-end:calc(10 + 1)}[class^=element-].c11{grid-column-start:11;grid-column-end:calc(11 + 1)}[class^=element-].c12{grid-column-start:12;grid-column-end:calc(12 + 1)}[class^=element-].c13{grid-column-start:13;grid-column-end:calc(13 + 1)}[class^=element-].c14{grid-column-start:14;grid-column-end:calc(14 + 1)}[class^=element-].c15{grid-column-start:15;grid-column-end:calc(15 + 1)}[class^=element-].c16{grid-column-start:16;grid-column-end:calc(16 + 1)}[class^=element-].c17{grid-column-start:17;grid-column-end:calc(17 + 1)}[class^=element-].c18{grid-column-start:18;grid-column-end:calc(18 + 1)}.element-metal{border-color:#6a6a6a}.element-alkali-metal{border-color:#0095ff}.element-alkali-earth-metal{border-color:#50bc08}.element-transition-metal{border-color:#969695}.element-lanthoid{border-color:#df3035}.element-actinoid{border-color:#fcb002}.element-metalloid{border-color:#3d3f7f}.element-non-metal{border-color:#969695}.element-halogen{border-color:#333236}.element-noble-gas{border-color:#131f6b}.element-lanthanoid-transitional-metal{border-color:#df3035}.element-actinoid-transitional-metal{border-color:#fcb002}@media(max-width: 989px){#wrapper #elements{filter:blur(10px)}#wrapper #key{display:none}#wrapper:after{position:absolute;display:block;content:"The Periodic Table is best viewed on desktop.";top:25%;left:25vw;right:25vw;width:50vw;text-align:center;filter:blur(-5px);font-size:2em;font-weight:bold}}