#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.table{display:grid;grid-template-columns:repeat(17,auto) 1fr;margin-right:100px;width:90%;max-width:100%}.group-two{padding-top:100%}.group-three,.group-four,.group-five,.group-six,.group-seven,.group-eight,.group-nine,.group-ten,.group-eleven,.group-twelve{padding-top:300%}.group-thirteen,.group-fourteen,.group-fifteen,.group-sixteen,.group-seventeen{padding-top:100%}.group-eighteen{padding-right:150%}.f-block{padding-top:25%}.storybook-chemical-element{font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif;width:100px;height:100px;border:solid;border-width:thin;opacity:1;transition:.3s}.storybook-chemical-element #atomic-number{font-size:smaller;text-align:left;padding-left:2%}.storybook-chemical-element #symbol{font-size:large;text-align:center}.storybook-chemical-element #name{font-size:smaller;text-align:center;margin-top:-2%}.storybook-chemical-element:hover{opacity:1;transition:.6s}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999}.modal-container{background-color:#fff;border-radius:4px;padding:20px;position:relative;width:400px}.modal-close{background:none;border:none;font-size:1.5rem;position:absolute;top:10px;right:15px;cursor:pointer}.modal-content{margin-top:20px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#fff;color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}