html,body {
  background-image: url(../images/4.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
    }
    

    .container{
         width: 100vw;
         display: flex;
         height: 100vh;
         justify-content: center;
    }
    
    .item{
       color: white;
       font-weight: bold;
      align-self: center;
    }
    
    .hexagon {
      position: relative;
      width: 70px; 
      height: 40.41px;
      background-color: #05c3f9 ;
      margin: 90px auto 140px auto;
      box-shadow: 0 0 10px rgba(0,0,0,0.35);
    }

    .qrcode {
      display: flex;
      justify-content: center;
    }
    
    .hexagon:before,
    .hexagon:after {
      content: "";
      position: absolute;
      z-index: 1;
      width: 49.50px;
      height: 49.50px;
      -webkit-transform: scaleY(0.5774) rotate(-45deg);
      -ms-transform: scaleY(0.5774) rotate(-45deg);
      transform: scaleY(0.5774) rotate(-45deg);
      background-color: inherit;
      left: 10.2513px;
      box-shadow: 0 0 10px rgba(0,0,0,0.35);
    }
    
    .hexagon:before {
      top: -24.7487px;
    }
    
    .hexagon:after {
      bottom: -24.7487px;
    }
    
    /*cover up extra shadows*/
    .hexagon span {
      display: block;
      position: absolute;
      top:0px;
      left: 0;
      width:70px;
      height:40.4145px;
      z-index: 2;
      background: inherit;
    }
    
    .logo{
            text-align:center;
            padding:30px 0;
            background:#05c3f9;
            width:12%;
            margin:0 auto;
        }
    .hexagon i { font-size: 50px;
    color: #fff;
    position: absolute;
    left: 35%;
    z-index: 10;
    top: -13%; }
    
    h1, h2, h3, h4, h5, h6{
        font-family:'Coustard', sans-serif;
        margin:0;
        padding:0;
        font-weight:300;
    }
    h2{
        font-size:40px;
    }
    p{
        color:#fff;
        font:18px/28px 'Raleway', sans-serif;
        font-weight:300;
    }