body {
   display: flex;
   flex-direction: column;
   width: 100vw;
   min-height: 100vh;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background-image: url('background-default.webp');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.vcard {
   position: relative;
   width: 100%;
   overflow: hidden;
   color: #FFFFFF;
   border-radius: 10px;
}

.emp_name {
   font-family: 'Franklin Gothic';
   font-size: 26px;
   font-weight: 400;
}

a {
   color: inherit;
   text-decoration: none;
}

.view_qr {
   display: block;
   width: 100%;
   background-color: #EEAD5960;
   color: #FFFFFF;
   text-align: center;
   font-weight: bolder;
   padding: 10px;
   letter-spacing: 1px;
   border-radius: 10px;
    backdrop-filter: blur(10px);
}

.keep_contact {
   display: block;
   width: 100%;
   background-color: #4C926660;
   color: #FFFFFF;
   text-align: center;
   font-weight: bolder;
   padding: 10px;
   letter-spacing: 1px;
   border-radius: 10px;
    backdrop-filter: blur(10px);
}

.maxw {
   width: 100%;
}

@media only screen and (max-width: 991px) {
   .maxw {
      max-width: 400px;
   }

   .vcard-cloud {
      content: '';
      position: absolute;
      bottom: 0;
      right: -100px;
      width: calc(100% + 200px);
      height: 100%;
      z-index: -1;
      background-image: url('vcard-background-mobile.webp');
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: cover;
      animation-name: vcard-cloud-open;
      animation-duration: 4s;
   }

   .playgravity {
      animation-name: vcard-cloud-gravity;
      animation-duration: 40s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
   }

   .vcard:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
   }

   @keyframes vcard-cloud-open {
      from {
         bottom: 100%;
      }

      to {
         bottom: 0;
      }
   }

   @keyframes vcard-cloud-gravity {
      0% {
         right: -100px;
      }

      25% {
         right: 0px;
      }

      50% {
         right: -100px;
      }

      75% {
         right: -200px;
      }

      100% {
         right: -100px;
      }
   }

   .emp_photo_zone {
      width: 100%;
      max-width: 200px;
      margin-top: -90px;
      border-radius: 50%;
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
   }

   .emp_photo {
      width: 100%;
      opacity: 0;
   }

   .emp_name {}

   .emp_jobtitle {
      color: var(--color-main2);
   }

   .company_name {
      font-size: 20px;
      font-weight: 700;
      color: var(--color-main2);
   }
}

@media only screen and (min-width: 992px) {
   .maxw {
      max-width: 800px;
   }

   .vcard-cloud {
      content: '';
      position: absolute;
      top: -100px;
      right: 0;
      width: 100%;
      height: calc(100% + 200px);
      z-index: -1;
      background-image: url('vcard-background.webp');
      background-position: right center;
      background-repeat: no-repeat;
      background-size: cover;
      animation-name: vcard-cloud-open;
      animation-duration: 4s;
   }

   .playgravity {
      animation-name: vcard-cloud-gravity;
      animation-duration: 60s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
   }

   .vcard:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
   }

   @keyframes vcard-cloud-open {
      from {
         right: 100%;
      }

      to {
         right: 0;
      }
   }

   @keyframes vcard-cloud-gravity {
      0% {
         top: -100px;
      }

      25% {
         top: 0px;
      }

      50% {
         top: -100px;
      }

      75% {
         top: -200px;
      }

      100% {
         top: -100px;
      }
   }

   .company_address {
      color: #676767;
   }

   .emp_photo_zone {
      width: 100%;
      max-width: 200px;
      border-radius: 50%;
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
   }

   .emp_photo {
      width: 100%;
      opacity: 0;
   }

   .emp_name {}

   .emp_jobtitle {
      color: var(--color-main2);
   }

   .company_name {
      font-size: 20px;
      font-weight: 700;
      color: var(--color-main2);
   }
}

.logo {
   max-width: 200px;
   width: 100%;
}