:root{--drawerBg:#181d25de}*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow:hidden}body{background:#181d25}.container,body{position:relative}.container{height:100vh}.periodicTable{grid-gap:2px;gap:2px;margin:10px auto;display:grid;grid-template-columns:repeat(18,1fr);width:-moz-fit-content;width:fit-content}.periodicTable .keyBox{grid-column:3/13;grid-row:2/4;padding:10px}.periodicTable .keyBox .categories{display:flex;flex-wrap:wrap;flex-direction:column;height:100px}.periodicTable .keyBox .categories .single{display:flex;align-items:center;color:#fff;cursor:pointer}.periodicTable .keyBox .categories .single .categoryColor{height:15px;width:15px;border-radius:3px;margin:5px}.periodicTable .keyBox .categories .single .category{font-size:14px}.periodicTable .keyBox .categories .single .category:first-letter{text-transform:uppercase}.periodicTable .keyBox .matterPhase{display:flex;place-content:center;margin-bottom:15px}.periodicTable .keyBox .btmContainer{display:flex;height:100%;align-items:center;justify-content:center}.periodicTable .keyBox .btmContainer .section{margin:0 15px}.periodicTable .keyBox .matterPhase .single{margin:4px;cursor:pointer;height:80px;width:80px;display:flex;ALIGN-ITEMS:CENTER;justify-content:center;color:#fff;font-weight:700;font-size:22px;border-radius:8px}.periodicTable .keyBox .currentTemp{display:flex}.periodicTable .keyBox .currentTemp .single{color:#fff;font-size:20px;margin:0 15px}.periodicTable .keyBox .currentTemp .single:nth-of-type(2){padding:0 15px;border-right:1px solid #999;border-left:1px solid #999}.periodicTable .keyBox .title{color:#fff;margin-bottom:10px;display:block}.periodicTable .displayMode{grid-column:2/18;grid-row:1;display:flex;justify-content:space-between;align-items:center}.periodicTable .displayMode .dropdown{min-width:250px}.periodicTable .displayMode .sliderMode{display:flex;align-items:center}.slider{-webkit-appearance:none;width:500px;height:15px;border-radius:5px;background:#0016ff;background:linear-gradient(90deg,#0016ff,red);outline:none;transition:opacity .2s}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#fff;cursor:pointer}.slider::-moz-range-thumb{width:25px;height:25px;background:#fff;cursor:pointer}.periodicTable .displayMode .sliderMode .radioLabel{color:#fff;font-size:16px;display:block;margin:5px}.periodicTable .displayMode .sliderMode .radioLabel input{margin-right:5px}.periodicTable .element{height:75px;width:70px;display:flex;flex-direction:column;padding:1px;background:#999;border-radius:5px;color:#fff;cursor:pointer;border:1px solid #cecccc42}.periodicTable .element .topBox{display:flex;justify-content:space-between;align-items:center}.periodicTable .element .atomicNumber{font-size:11px;font-weight:700}.periodicTable .element .symbol{flex:1 1;display:flex;align-items:center;align-self:center;font-size:35px;font-weight:700}.periodicTable .element .name{font-size:11px;text-align:center}.periodicTable .element .atomicWeight{font-size:10px}.drawerContainer{min-height:250px;max-height:300px;background:var(--drawerBg);position:sticky;right:0;z-index:9999;width:100%;position:-webkit-sticky;bottom:0;padding:5px}.drawerContainer .close{position:absolute;bottom:100%;background:var(--drawerBg);padding:8px 13px;cursor:pointer;color:#e60101;font-weight:800;font-size:18px;right:16px;border-radius:5px 5px 0 0}.drawerContainer .content{display:flex}.drawerContainer .content .model3d model-viewer{height:100%;min-height:100%;width:350px}.drawerContainer .content .elementData{flex:1 1;max-height:300px;overflow-y:auto}.drawerContainer .content .elementData .elementName{font-size:20px;margin:0 5px;font-weight:700;color:#fff}.drawerContainer .content .elementData .elementBoxName{display:flex;align-items:center;justify-content:center}.drawerContainer .content .elementData .elementSummary{margin:10px}.drawerContainer .content .elementData .elementBoxName .element{height:80px;width:80px;flex-basis:80px;flex-grow:0;flex-shrink:0;display:flex;flex-direction:column;padding:1px;background:#999;border-radius:5px;color:#fff;cursor:pointer;border:1px solid #cecccc42}.drawerContainer .content .elementData .elementBoxName .element .topBox{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700}.drawerContainer .content .elementData .elementBoxName .element .symbol{flex:1 1;display:flex;align-items:center;align-self:center;font-size:40px;font-weight:700}.drawerContainer .content .elementData .elementBoxName .element .name{font-size:12px;text-align:center}.drawerContainer .content .elementData .elementSummary .summary{color:#fff;margin-left:12px}.drawerContainer .content .elementData .elementSummary .disData{display:flex;flex-wrap:wrap;margin-top:5px}.drawerContainer .content .elementData .elementSummary .disData .single{flex:30% 1;padding:5px;font-size:14px}.drawerContainer .content .elementData .elementSummary .disData .single:nth-child(odd){background:#62626969}.drawerContainer .content .elementImage img{width:200px;height:200px;border-radius:5px}.drawerContainer .content .elementImage .title{color:#fff;font-size:14px;text-align:center;max-width:190px}.periodicTable .namePopup{position:absolute;background:#565656;font-size:14px;padding:3px 4px;border-radius:5px;color:#fff;font-weight:700;left:0;z-index:999;top:100%}@font-face{font-family:__Inter_39fd30;font-style:normal;font-weight:100 900;font-display:swap;src:url(/react-periodic-table/_next/static/media/55c55f0601d81cf3-s.woff2) format("woff2");unicode-range:U+0460-052f,U+1c80-1c8a,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:__Inter_39fd30;font-style:normal;font-weight:100 900;font-display:swap;src:url(/react-periodic-table/_next/static/media/26a46d62cd723877-s.woff2) format("woff2");unicode-range:U+0301,U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:__Inter_39fd30;font-style:normal;font-weight:100 900;font-display:swap;src:url(/react-periodic-table/_next/static/media/97e0cb1ae144a2a9-s.woff2) format("woff2");unicode-range:U+1f??}@font-face{font-family:__Inter_39fd30;font-style:normal;font-weight:100 900;font-display:swap;src:url(/react-periodic-table/_next/static/media/581909926a08bbc8-s.woff2) format("woff2");unicode-range:U+0370-0377,U+037a-037f,U+0384-038a,U+038c,U+038e-03a1,U+03a3-03ff}@font-face{font-family:__Inter_39fd30;font-style:normal;font-weight:100 900;font-display:swap;src:url(/react-periodic-table/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1ea0-1ef9,U+20ab}@font-face{font-family:__Inter_39fd30;font-style:normal;font-weight:100 900;font-display:swap;src:url(/react-periodic-table/_next/static/media/6d93bde91c0c2823-s.woff2) format("woff2");unicode-range:U+0100-02ba,U+02bd-02c5,U+02c7-02cc,U+02ce-02d7,U+02dd-02ff,U+0304,U+0308,U+0329,U+1d00-1dbf,U+1e00-1e9f,U+1ef2-1eff,U+2020,U+20a0-20ab,U+20ad-20c0,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:__Inter_39fd30;font-style:normal;font-weight:100 900;font-display:swap;src:url(/react-periodic-table/_next/static/media/a34f9d1faa5f3315-s.p.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+0304,U+0308,U+0329,U+2000-206f,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:__Inter_Fallback_39fd30;src:local("Arial");ascent-override:90.20%;descent-override:22.48%;line-gap-override:0.00%;size-adjust:107.40%}.__className_39fd30{font-family:__Inter_39fd30,__Inter_Fallback_39fd30;font-style:normal}