:root{
      --bg1:#429BE0;
      --bg2:red;
      --bg3:green;
      --bg4:peru;
      --bg5:yellow;
      --bg6:gray;
      --bg7:pink;
      --bg8:cyan;
      --bg9:brown;
      --bg10:#7D80B0;
      --bg11:#438C24;
      --bg12:#5DBC30;
      --bg13:#F4BFCA;
      --Yposition:70px;
      --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:24px;
      font-family: SimSun;
      opacity: 0.8;
    }
    
    div.Cu2p {
      background-color: var(--bg1);
      top: calc(var(--Yposition)*0);
      left:calc(var(--X1position)*0);

    }
    div.Clm {
      background-color: var(--bg4);
      top: calc(var(--Yposition)*1);
      left:calc(var(--X1position)*0);

    }

    div.Hp {
      background-color: var(--bg7);
      top: calc(var(--Yposition)*2);
      left:calc(var(--X1position));
    }
    div.OHm {
      background-color: var(--bg8);
      top: calc(var(--Yposition)*3);
      left:calc(var(--X1position));
    }

    div.electron {
      background-color:var(--bg5);
      top: calc(var(--Yposition)*4);
      left:calc(var(--X1position));
    }

    
    div.Cu {
      background-color: var(--bg9);
      top: calc(var(--Yposition)*0);
      left:calc(var(--X2position));
    }
    div.Cl2 {
      background-color: var(--bg3);
      top: calc(var(--Yposition)*1);
      left:calc(var(--X2position));
    }
    div.H2 {
      background-color: var(--bg10);
      top: calc(var(--Yposition)*2);
      left:calc(var(--X2position));
    }
    
    img{
      margin-left:calc(var(--Yposition)*2); 
    }

    @media(max-width:1170px){
      :root{
        --Yposition:60px;
     }
      div{
        font-size:20px;
        box-shadow: -20px -20px 30px 5px rgba(0, 0, 0, 0.4) inset;
      }
    }