*,*:before,*:after { box-sizing: border-box; } html,body { background:black; color:white; } #board { border: 1px dotted white; } .orb.disabled { opacity: 0.6; } .orb.highlight .orb-fill, .highlight-salt .orb.element-salt .orb-fill, .highlight-air .orb.element-air .orb-fill, .highlight-fire .orb.element-fire .orb-fill, .highlight-water .orb.element-water .orb-fill, .highlight-earth .orb.element-earth .orb-fill, .highlight-mercury .orb.element-mercury .orb-fill, .highlight-lead .orb.element-lead .orb-fill, .highlight-tin .orb.element-tin .orb-fill, .highlight-iron .orb.element-iron .orb-fill, .highlight-copper .orb.element-copper .orb-fill, .highlight-silver .orb.element-silver .orb-fill, .highlight-gold .orb.element-gold .orb-fill, .highlight-vitae .orb.element-vitae .orb-fill, .highlight-mors .orb.element-mors .orb-fill { stroke: yellow; stroke-width: 7px; } .orb.disabled .orb-glow, .orb.disabled .orb-shadow, .orb.disabled:hover .orb-glow, .orb.disabled:hover .orb-shadow{ fill-opacity: 0; } .orb .orb-glow, .orb .orb-shadow { transition: fill-opacity linear 0.2s; } .orb:hover .orb-glow, .orb.selected .orb-glow { fill-opacity: 1; } .orb:hover .orb-shadow, .orb.selected .orb-shadow { fill-opacity: 0; }