@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap);#container-info-element{display:flex;flex-direction:row;justify-content:center}@media screen and (min-width:1316px){#container-info-element{position:absolute;right:26rem;top:8rem;width:calc(100vw - 26rem)}}.info-element{font-size:1.2rem;padding:1.5rem 3vw}.info-element-text{letter-spacing:.01rem;padding:.3rem;text-align:center}.info-element-text-heading{padding:1rem 0 .7rem}.info-element-box{aspect-ratio:1/1;border:.2rem solid #efefef;border-radius:1rem;height:10.4rem;margin:auto;padding:.5rem}.info-element-box-atomic-number{font-size:1.4em}.info-element-box-symbol{font-size:4.8em;font-weight:500;margin:-.5rem 0 0;text-align:center}@media screen and (min-width:768px){.info-element{display:flex;flex-direction:row;gap:2rem;height:13rem;justify-content:center;padding:2.4rem 4.8rem}.info-element-box{margin:0}.info-element-text{text-align:left}.info-element-text-heading{padding-top:0}}#periodic-table{margin:0 auto;overflow:auto;padding:0 3vw}#periodic-table-main{display:grid;gap:.2rem;grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(7,1fr)}#periodic-table-actinoids,#periodic-table-lanthanoids{display:grid;gap:.2rem;grid-template-columns:repeat(16,1fr);grid-template-rows:1fr;margin:.6rem 0 0 10.8rem}@media screen and (min-width:1316px){#periodic-table{width:min-content}}#white-space-H{grid-column:2/18}#white-space-Be,#white-space-Mg{grid-column:3/13}.container-element{border:.2rem solid;cursor:pointer;height:5.2rem;padding:.4rem;width:5.2rem;z-index:1}.container-element-symbol{font-size:1.5rem;font-weight:500;text-align:center}.container-element-name{font-size:.7rem;text-align:center}.other-nonmetals{border-color:#e39798}.other-nonmetals:hover{background:#e39798;color:#000}.noble-gases{border-color:#e12729}.noble-gases:hover{background:#e12729;color:#fff}.alkali-metals{border-color:#f37324}.alkali-metals:hover{background:#f37324;color:#000}.alkaline-earth-metals{border-color:#f8cc1b}.alkaline-earth-metals:hover{background:#f8cc1b;color:#000}.metalloids{border-color:#72b043}.metalloids:hover{background:#72b043;color:#000}.halogens{border-color:#007f4e}.halogens:hover{background:#007f4e;color:#fff}.transition-metals{border-color:#166d78}.transition-metals:hover{background:#166d78;color:#fff}.post-transition-metals{border-color:#33558f}.post-transition-metals:hover{background:#33558f;color:#fff}.lanthanoids{border-color:#4f3da5}.lanthanoids:hover{background:#4f3da5;color:#fff}.actinoids{border-color:#711fa8}.actinoids:hover{background:#711fa8;color:#fff}#white-space-Ba,#white-space-Ra{align-items:center;display:flex;justify-content:center}*{box-sizing:border-box;margin:0;padding:0;text-decoration:none}body,html{background:#0f0f0f;color:#efefef;font-family:Roboto,sans-serif;font-size:13px;font-weight:300;min-height:100vh}h2,strong{font-weight:500}.non-display{display:none!important}#page-header{min-height:8rem;padding:1.5rem 0 0 3vw}#page-header-heading{font-size:4rem;font-weight:700}#page-footer{padding:2rem 3vw;text-align:center;width:100%}#page-footer a:link,#page-footer a:visited{color:inherit}#page-footer a:hover{color:#afafaf}@media screen and (min-width:1316px)and (min-height:870px){#page-footer{bottom:0;position:fixed}}