:root{
      --bg1:#429BE0;
      --bg2:rgb(131, 251, 255);
      --bg3:green;
      --bg4:peru;
      --bg5:yellow;
      --bg6:gray;
      --bg7:pink;
      --bg8:cyan;
      --bg9:brown;
      --bg10:#7D80B0;
      --bg11:#438C24;
      --bg12:#5DBC30;
      --bg13:#F4BFCA;
      --Yposition:80px;
      --X1position:0px;
      --X2position:var(--Yposition);
    }

    div{
      width: var(--Yposition);
      height: var(--Yposition);
      border-radius: 100%;
      position: absolute;
      box-shadow: -20px -20px 30px 5px rgba(0, 0, 0, 0.5) inset;
      text-align:center;
      line-height: var(--Yposition);
      font-size:30px;
      font-family: SimSun;
      opacity: 0.8;
    }
    
    div.Hp {
      background-color: var(--bg7);
      top: calc(var(--Yposition)*0);
      left:calc(var(--X1position));
    }
    div.Mg2p {
      background-color: var(--bg2);
      top: calc(var(--Yposition)*1);
      left:calc(var(--X1position));
    }
    div.electron {
      background-color:var(--bg5);
      top: calc(var(--Yposition)*2);
      left:calc(var(--X1position));
    }
    div.Clm {
      background-color:var(--bg12);
      top: calc(var(--Yposition)*3);
      left:calc(var(--X1position));
    }
    
    div.H2 {
      background-color: var(--bg13);
      top: calc(var(--Yposition)*4);
      left:calc(var(--X1position));
    }

    div.Mg {
      background-color: var(--bg6);
      top: calc(var(--Yposition)*5);
      left:calc(var(--X1position));
    }