#box{
  /*    
      /* padding-left: 70%;
      padding-top: 300px; */
      margin-top: 550px;
      padding-left: 50%;
       z-index: 9;
      position: absolute; 
      
  }
  #b1{
      
    border-radius: 0 7px 0 7px;
    width: 130px;
    height: 130px;
    background:  #A7C7E7;
    background-image: url(assest/);
    margin: 0 4px;
    outline-color: black;
    text-align: center;
    vertical-align: middle;
    line-height: 5;
  
  
  }
   
  #b2 {
    background: grey;
    border-radius: 0 7px 0 7px;
    width: 130px;
    height: 130px;
    margin: 0 4px;
   
  text-align: center;
  vertical-align: middle;
  line-height: 5;
  }
  
  
  
   #boxes{
    list-style: none;
    /* margin: 0; */
    display: flex;
    /* z-index: -9;   */
  }
   
  @media(max-width: 572px){
    #box{
      margin-left: 20px;
      padding-left: 50px;
      text-align: center;
      vertical-align: middle;
      line-height: 5;
      
  
    }
    #b1,#b2{
      height: 100px; 
      width: 100px;
      font-size: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 4;
       
    }
  }
  
  @media(max-width: 315px){
    #box{
      margin-left: 20px;
      padding-left: 50px;
      text-align: center;
      vertical-align: middle;
      line-height: 5;
      
  
    }
    #b1,#b2{
      height: 70px; 
      width: 70px;
      font-size: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 4;
       
    }
  }