@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap);*{box-sizing:border-box;margin:0}:root{--color-white:#fff;--color-body-bg-color:#1d0f1e;--color-dark:#110911;--color-grey:hsla(0,0%,100%,.2);--color-box-shadow:rgba(0,0,0,.3);--element-size:60px;--font-main:"Poppins",sans-serif;--fs-xl:3rem;--fs-600:1.8rem;--fs-500:1.2rem;--fs-400:1rem;--fs-300:.7rem;--fs-200:.5rem}#root,body,html{color:#fff;color:var(--color-white);scroll-behavior:auto}a,body,input,textarea{color:var(--color-text-color);font-family:Poppins,sans-serif;font-family:var(--font-main)}body{background:#1d0f1e;background:var(--color-body-bg-color);font-size:16px;line-height:1}button,input{background:none;border:none;outline:none}img{max-width:100%}::selection{background:#240e71;color:#fff;color:var(--color-white)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#110911;background:var(--color-dark)}::-webkit-scrollbar-thumb{background:#502061}::-webkit-scrollbar-thumb:hover{background-color:#2e1736}.header-periodic{align-items:center;background-color:#1d0f1e;background-color:var(--color-body-bg-color);box-shadow:0 5px 0 rgba(0,0,0,.3);box-shadow:0 5px 0 var(--color-box-shadow);display:flex;justify-content:space-between;left:0;padding:.75em 1rem;position:-webkit-sticky;position:sticky;top:0;width:100%;z-index:999}.header-periodic>h1{font-size:1.2rem;font-size:var(--fs-500)}.main-periodic{--gap:.25rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0 auto 40px;position:relative;width:95%}.periodic-wrapper{display:grid;grid-template-areas:"- xbar" "ybar periodic";margin-top:40px;overflow-x:auto;position:relative}.overflow-hidden{background-color:#1d0f1e;background-color:var(--color-body-bg-color);height:94px;position:fixed;top:0;width:100%;z-index:99}.x-bar,.y-bar{background-color:#110911;background-color:var(--color-dark);border-radius:5px;position:relative}.x-bar{display:grid;grid-area:xbar;grid-template-columns:repeat(18,1fr);margin-bottom:5px;margin-left:-5px;padding:.5rem 0;width:calc(1085px + var(--gap)*17);width:calc(var(--element-size)*18 + var(--gap)*17 + 5px);z-index:97}.y-bar{display:grid;grid-area:ybar;grid-template-rows:repeat(10,1fr);height:calc(100% + 5px);justify-self:end;margin-right:5px;margin-top:-5px;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;padding:0 .5rem;z-index:98}.x-element,.y-element{align-items:center;display:flex;justify-content:center}.shadow{height:100%;width:100%}.shadow:after,.shadow:before{background-color:initial;content:"";display:block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .2s ease-in;width:100%;z-index:9}.shadow:after{background:linear-gradient(270deg,#000,hsla(0,0%,99%,0) 10%)}.shadow:before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 90%,#000)}.shadow.left:after,.shadow.middle:after,.shadow.middle:before,.shadow.right:before{opacity:.4}.periodic-table{grid-gap:var(--gap);display:grid;gap:var(--gap);grid-area:periodic;grid-template-columns:repeat(18,60px);grid-template-columns:repeat(18,var(--element-size));grid-template-rows:repeat(10,60px);grid-template-rows:repeat(10,var(--element-size))}.atom{align-items:center;border-radius:5px;color:#fff;cursor:pointer;display:flex;flex-direction:column;gap:.3rem;justify-content:center;position:relative;transition:all .2s ease}.atomic-name,.atomic-number{font-size:.5rem;font-size:var(--fs-200)}.atomic-number{left:5px;position:absolute;top:5px}.periodic-categories{grid-column-gap:10px;-webkit-column-gap:10px;column-gap:10px;display:grid;grid-area:1/3/span 3/span 10;grid-template-columns:repeat(4,1fr);padding:2rem;text-transform:capitalize}.category-wrapper:last-child,.category-wrapper:nth-last-child(2){grid-column:span 2}.category-content,.category-wrapper{align-items:center;display:flex;justify-content:center}.category-content{cursor:pointer;font-size:.8rem;gap:5px;text-align:center;white-space:nowrap}.category-ball{aspect-ratio:1/1;border-radius:50%;width:5px}.dn{background-color:#ffb22d}.ng{background-color:#240e71}.am{background-color:#dd6814}.aem{background-color:#dda414}.m{background-color:#dd1446}.h{background-color:#21b73d}.pm{background-color:#463680}.tm{background-color:#8c1835}.l{background-color:#240e71}.a{background-color:#0e6571}.all{background-color:#635f64}.density{--color:#240e71}.electronegativity{--color:#0e6571}.mass{--color:#9e27ff}.electrons{--color:#ffb22d}body{overflow-x:hidden}body:has(.modal){overflow:hidden}.modal{background-color:rgba(0,0,0,.3);background-color:var(--color-box-shadow);height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .2s ease;width:100%}.modal.open{opacity:1}.modal-container{background-color:#1d0f1e;background-color:var(--color-body-bg-color);border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px var(--color-box-shadow);display:flex;flex-direction:column;height:500px;left:50%;max-width:500px;overflow:hidden;position:relative;top:50%;-webkit-transform:translate(-50%,-50%) scale(.5);transform:translate(-50%,-50%) scale(.5);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;width:90%}@media (max-width:568px){.modal-container:not(.smaller){border-radius:0;height:100%;max-width:100%;width:100%}}.modal.open>.modal-container{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.modal-container.smaller{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:400px;width:90%}.modal-header{align-items:center;box-shadow:0 5px rgba(0,0,0,.3);box-shadow:0 5px var(--color-box-shadow);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:1rem;z-index:1}.modal-header.reverse{flex-direction:row-reverse}.modal-close{cursor:pointer}.modal-content{height:100%;overflow-y:auto}.modal-content,.modal-inside{display:flex;flex-direction:column}.modal-inside{gap:2rem;padding:2rem}.atom-header{align-items:center;display:flex;flex:0 0 auto;flex-direction:column;gap:5px;height:200px;justify-content:center;position:relative;width:100%}.atom-properties{gap:1rem;padding:1rem 0}.atom-properties,.atom-property,.atom-wrapper{display:flex;flex-direction:column}.atom-property{gap:5px;padding:1rem;position:relative}.atom-property.horizontal{align-items:center;flex-direction:row}.atom-property.tiny{border-bottom:1px solid hsla(0,0%,100%,.2);border-bottom:1px solid var(--color-grey);height:120px;overflow:hidden}.atom-content{display:flex;flex:1 0 auto;flex-direction:column;gap:5px}.atom-property:not(:last-child){border-bottom:1px solid hsla(0,0%,100%,.2);border-bottom:1px solid var(--color-grey)}.atom-label{align-items:center;border-radius:0 5px 5px 0;display:flex;font-weight:700;gap:5px;margin-bottom:.75rem;padding:.75rem 1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.atom-label.general,.solid{background-color:#dd1446}.atom-label.note,.liquid{background-color:#2bb4c6}.atom-label.properties,.gas{background-color:#0e7120}.atom-label.reactivity{background-color:#463680}.atom-phase-wrapper{border-radius:50%;padding:.6rem}.atom-symbol{font-size:3rem;font-size:var(--fs-xl);font-weight:700}.atom-number{left:1rem;position:absolute;top:1rem}.atom-name{font-size:1.2rem;font-size:var(--fs-500)}.atom-category{border-radius:5px;font-size:.7rem;font-size:var(--fs-300);text-transform:capitalize}.atom-link{aspect-ratio:1/1;position:absolute;right:1rem;top:1rem;width:20px}.atom-mass:after{content:" (g/mol)";font-size:.5rem;font-size:var(--fs-200);opacity:.75}.atom-spectral{border-radius:5px;overflow:hidden}.atom-key{font-weight:700}.atom-nav{border-bottom:1px solid hsla(0,0%,100%,.2);border-bottom:1px solid var(--color-grey);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:relative}.atom-nav .ball{--size:5px;border-radius:50%;height:var(--size);width:var(--size)}.atom-nav>.left,.atom-nav>.right{align-items:center;display:flex;flex-direction:row;gap:5px;padding:1rem;width:100%}.atom-nav>.right>.arrowicon{margin-left:auto;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.atom-nav>.left>.arrowicon{margin-right:auto}.atom-nav>.left{flex-direction:row-reverse}.atom-nav:after{background-color:hsla(0,0%,100%,.2);background-color:var(--color-grey);content:"";height:100%;left:50%;position:absolute;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:1px}.celsius,.fahrenheit,.kelvin{font-weight:700}.celsius{color:#2bb4c6}.fahrenheit{color:#dd6814}.kelvin{color:#21b73d}.icon-normal,.icon-smaller,.icon-tiny{flex-shrink:0}.icon-normal{cursor:pointer;height:30px;width:30px}.icon-smaller{cursor:pointer;height:20px;width:20px}.icon-tiny{height:15px;width:15px}.icon-reverse{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.icon-nocursor{cursor:default}.flex-wrap{flex-wrap:wrap}.input-wrapper{align-items:center;display:flex;flex:1 1;gap:.75rem}.input-search{caret-color:#fff;color:#fff;width:100%}.atom-search--element{align-items:center;cursor:pointer;display:flex;flex-direction:row;gap:1rem;padding:1rem;position:relative}.atom-search--element:after{content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:all .2s ease;width:100%}.atom-search--element:hover:after{background-color:rgba(0,0,0,.3);background-color:var(--color-box-shadow);opacity:.5}.atom-search--nn{align-items:baseline;display:flex;gap:5px}.atom-search--symbol{align-items:center;aspect-ratio:1/1;border-radius:50%;display:flex;font-size:1.2rem;font-size:var(--fs-500);justify-content:center;width:50px}.atom-search--name{font-weight:700;margin-bottom:5px}.atom-search--mass,.atom-search--number{font-size:.7rem;font-size:var(--fs-300)}.atom-search--specs{display:flex;flex-direction:column;gap:5px}.search-extra{font-size:.7rem;font-size:var(--fs-300);font-weight:400}.not-found{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%}.not-found>span{font-size:1.8rem;font-size:var(--fs-600);font-weight:700;width:50%}.electron-wrapper{left:100%;position:absolute;-webkit-transform:translateX(-60%);transform:translateX(-60%)}.electron-container{align-items:center;display:flex;justify-content:center;position:relative}.electron-wrapper>.electron-container{-webkit-animation:rotating 24s linear infinite;animation:rotating 24s linear infinite;cursor:pointer}.electron-shell{border:1px solid #fff;border-radius:50%;padding:1rem;position:relative}.electron-center{aspect-ratio:1/1;background-color:#fff;border-radius:50%;width:.9rem}.electron-ball-wrapper{height:100%;left:0;position:absolute;top:0;width:100%}.electron-ball{aspect-ratio:1/1;background-color:#fff;border-radius:50%;left:50%;position:absolute;top:0;-webkit-transform:translate(-50%,-50%) rotate(0deg);transform:translate(-50%,-50%) rotate(0deg);width:.6rem}.filter{align-items:center;cursor:pointer;display:flex;gap:5px;-webkit-user-select:none;user-select:none;width:120px}.filter-ball{aspect-ratio:1/1;background-color:var(--color);border-radius:50%;width:10px}.filter-text{margin-right:auto;overflow:hidden;padding:.5rem 0;text-overflow:ellipsis;text-transform:capitalize}.filter-properties{grid-gap:5px;display:grid;gap:5px;grid-template-columns:repeat(2,1fr);white-space:nowrap}.alpha-button,.filter-categories,.prop-button{border-radius:5px;color:#fff;cursor:pointer;font-size:.7rem;font-size:var(--fs-300);padding:.75em;text-align:center;text-transform:capitalize}.alpha-button.active,.prop-bar,.prop-button.active{background-color:#110911;background-color:var(--color-dark)}.prop-bar{align-items:center;border-radius:5px;display:flex;flex:1 1;flex-direction:row;justify-content:space-between;padding:.5rem}.prop-bar--content{display:flex;flex-direction:column;gap:5px}.filter-wrapper{display:flex;flex-direction:column;gap:.75rem}.filter-order{cursor:pointer;-webkit-user-select:none;user-select:none}.filter-label{font-size:1rem;font-size:var(--fs-400);font-weight:700}.search-categories{display:flex;flex-basis:100%;flex-direction:row;gap:5px;overflow-x:auto}.filter-categories.search{align-items:center;display:flex;font-size:.7rem;font-size:var(--fs-300);gap:5px;white-space:nowrap}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotating{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.2fde27e1.css.map*/