*{box-sizing:border-box}body{font-family:sans-serif}label{display:inline-block;margin-right:.4em}.grid{border:1px solid #333}.isotope:after{content:'';display:block;clear:both}.element-item{position:relative;float:left;width:100px;height:100px;margin:5px;padding:10px;background:#888;color:#262524}.element-item>*{margin:0;padding:0}.element-item .name{position:absolute;left:10px;top:60px;text-transform:none;letter-spacing:0;font-size:12px;font-weight:normal}.element-item .symbol{position:absolute;left:10px;top:0px;font-size:42px;font-weight:bold;color:white}.element-item .number{position:absolute;right:8px;top:5px}.element-item .weight{position:absolute;left:10px;top:76px;font-size:12px}.element-item.alkali{background:#F00;background:hsl(0,100%,50%)}.element-item.alkaline-earth{background:#F80;background:hsl(36,100%,50%)}.element-item.lanthanoid{background:#FF0;background:hsl(72,100%,50%)}.element-item.actinoid{background:#0F0;background:hsl(108,100%,50%)}.element-item.transition{background:#0F8;background:hsl(144,100%,50%)}.element-item.post-transition{background:#0FF;background:hsl(180,100%,50%)}.element-item.metalloid{background:#08F;background:hsl(216,100%,50%)}.element-item.diatomic{background:#00F;background:hsl(252,100%,50%)}.element-item.halogen{background:#F0F;background:hsl(288,100%,50%)}.element-item.noble-gas{background:#F08;background:hsl(324,100%,50%)}