:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:#222}#root{margin:auto;position:relative}.periodic-table{display:grid;grid-template-columns:50px 70px repeat(16,50px);grid-template-rows:repeat(7,70px) 15px repeat(2,70px);grid-gap:5px;padding:60px 20px;-webkit-user-select:none;user-select:none;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.4;font-weight:400}.element{position:relative;width:50px;height:50px;border:1px solid #434343;border-radius:4px;text-align:center;font-size:12px;background-color:#333;display:flex;flex-direction:column;justify-content:center;align-items:center}.number{position:absolute;top:0;left:3px;font-size:10px;color:#ccc}.symbol{font-size:16px;font-weight:700;color:#fff}.ionization{font-size:10px;color:#ccc}.sequence{position:absolute;display:block;border-bottom:solid 1px #aaa;border-left:solid 1px #aaa;border-right:solid 1px #aaa;text-anchor:middle;font-size:12px;color:#fff;text-align:center;height:10px}.sequence>span{background-color:#222;padding:0 7px}.highlight1{background-color:#005ba5}.highlight2{background-color:#cb5800}.text{color:#eee}