.center-screen
{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.center-screen2
{
    position: absolute;
    top: 0%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(0%);
    -webkit-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}
.center-screen2 h1
{
    text-align: center;
}
.center-screen h1
{
    text-align: center;
}
#qrcode
{
    position: absolute;
    height: fit-content;
    width: fit-content;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(0%);
    -webkit-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  ul li{
    display:inline-block;
    clear: both;
    padding: 10px;
    border-radius: 30px;
    margin-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
  }
  
  .him{
    background: #eee;
    float: left;
  }
  
  .me{
    float: right;
    background: #0084ff;
    color: #fff;
  }
  
  .him + .me{
    border-bottom-right-radius: 5px;
  }
  
  .me + .me{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .me:last-of-type {
    border-bottom-right-radius: 30px;
  }
 .float-right
 {
    float: right;
 }