body {
    background-color: #ffe6ed;
    background-image: url("http://cdn.lowgif.com/full/3976758bcebff103-smashbox-vlada-petal-metal-collection-smashbox.gif");
  }

  .phone {
        border: 2px solid black;
        border-radius: 15px;
        height: 700px;
        width: 500px;
        box-shadow: 10px 10px 8px #888888;
        background-image: url("https://img.artpal.com/626621/4-19-8-2-11-18-31m.jpg");
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;

      }
      
      .p {
        color: #40383a;
    }
  
      .box1 {
        width: 100px;
        height: 100px;
        background: #c2a9b6;
        margin: 2px;
        border-radius: 10px
      }
      .box2 {
        width: 100px;
        height: 100px;
        background: #e0bfc8;
        margin: 2px;
        border-radius: 10px
      }
      .box3 {
        width: 100px;
        height: 100px;
        background: #4d4d4d;
        margin: 2px;
        border-radius: 10px;
        flex-direction: row;
      }
      .box4 {
        width: 100px;
        height: 100px;
        background: #edadbf;
        margin: 2px;
        border-radius: 10px
        
      }
      .box5 {
        width: 100px;
        height: 100px;
        background:#786d6d;
        margin: 2px;
        flex-direction: row;
        border-radius: 10px
      }
      .box6 {
        width: 100px;
        height: 100px;
        background: #c9afaf;
        margin: 2px;
        border-radius: 10px
      }
      .box7 {
        width: 100px;
        height: 100px;
        background:#ebdddf;
        margin: 2px;
        border-radius: 10px
      }
      .box8 {
        width: 100px;
        height: 100px;
        background: #bfa6aa;
        margin: 2px;
        border-radius: 10px
      }  
      .box9 {
        width: 100px;
        height: 100px;
        background: #b08f94;
        margin: 2px;
        border-radius: 10px
      } 
      .box10 {
        width: 100px;
        height: 100px;
        background: #ffe6e9;
        margin: 2px;
        border-radius: 10px
      } 
      .box11 {
        width: 100px;
        height: 100px;
        background: #7d7774;
        margin: 2px;
        border-radius: 10px
      } 
      .box12 {
        width: 100px;
        height: 100px;
        background: #e0b8c9;
        margin: 2px;
        border-radius: 10px
      } 
      .box13 {
        width: 100px;
        height: 100px;
        background: #fff2f8;
        margin: 2px;
        border-radius: 10px
      } 
      .box14 {
        width: 100px;
        height: 100px;
        background: #dbcfc5;
        margin: 2px;
        border-radius: 10px
      } 
      .box15 {
        width: 100px;
        height: 100px;
        background: #b0a0a7;
        margin: 2px;
        border-radius: 10px
      } 
      .box16 {
        width: 100px;
        height: 100px;
        background: #a16f86;
        margin: 2px;
        border-radius: 10px
      } 
      .box17 {
        width: 100px;
        height: 100px;
        background: #cfc0c5;
        margin: 2px;
        border-radius: 10px
      } 
      .box18 {
        width: 100px;
        height: 100px;
        background: #f2c7d2;
        margin: 2px;
        border-radius: 10px
      } 
      .box19 {
        width: 100px;
        height: 100px;
        background: #a68694;
        margin: 2px;
        border-radius: 10px
      } 
      .box20 {
        width: 100px;
        height: 100px;
        background: #e0d1d5;
        margin: 2px;
        border-radius: 10px
      } 
      .p {
          color: #40383a;
      }
    
  }