html,
body {
  height: 100%;
  min-height: 100vh;

  * {
    position: relative;
    box-sizing: border-box;
  }
}

 flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* body {
  margin: 0;
  color: #505050;
  font-weight: 300;
  user-select: none;
  font-family: Roboto;
  background-image: linear-gradient(45deg, #b1584f 0%, #f5dab1 100%);
} */
/* @media (max-width:1274px) {
   .wrapper &.card{
        width: 450px;
        margin-left: 5%;
}
} */
.wrapper {
  width: 100%;
  height: 100%;
  .card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    @media (min-width: 1290px) and (max-width: 3000px) {
        width: 500px;
        margin-left: 11%;
    }
    /* width: 500px; */
    /*300*/
    height: 700px;
    /* 420 */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    border: 1px solid rgba(249, 250, 253, 0.125);
    border-radius: 0;
    background-clip: border-box;
    float: left;
    display: flex;
    overflow: hidden;
    /* margin-left: 5%; */
    margin-top: 25px;
    border-radius: 50px;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.25),
      0 12px 40px 5px rgba(0, 0, 0, 0.2);


    .card-header {
      flex: 1 1 0;
      position: relative;
     

      .header-image {
        z-index: 2;
        width: 140px;
        height: 140px;
        border-radius: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15),
          0 20px 40px 0 rgba(0, 0, 0, 0.1);
        /* background-image: url(https://media-exp2.licdn.com/dms/image/C4D03AQGb552AURaJpw/profile-displayphoto-shrink_400_400/0/1652520478867?e=1661385600&v=beta&t=4Z1SO9ynv72XZmWTooHS9jQWCkPiot99xStyTZMaIZ8); */

        &:after {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          background: inherit;
          border-radius: inherit;
        }

        &:before {
          top: -50%;
          content: "";
          width: 100%;
          height: 100%;
          opacity: 0.3;
          filter: blur(50px);
          transform: scale(2);
          position: absolute;
          background: inherit;
          border-radius: inherit;
        }
      }

      .waves {
        top: -100%;
        width: 100%;
        height: 100%;
        position: absolute;

        

        .wave {
          opacity: 0.3;
          overflow: hidden;
          position: absolute;
          border-radius: 40%;

          &.-one {
            width: 600px;
            height: 750px;/*630px*/
            animation: drift 5000ms infinite linear;
            background-image: linear-gradient(to top, #ffe4c1 0%, #9d3930 100%);
          }

          &.-two {
            width: 630px;
            height: 750px;/*600px*/
            background-image: linear-gradient(
              to bottom,
              #fff0bb 0%,
              #75371b 100%
            );
            animation: drift 7000ms infinite linear;
          }

          &.-three {
            width: 600px;
            height: 600px;
            animation: drift 9000ms infinite linear;
            background-image: blinear-gradient(
              to left,
              #ffd953 0%,
              #ba7d5a 100%
            );
          }
        }
      }
    }
  
        .waveCancellation{
          opacity: 0.3;
          overflow: hidden;
          position: absolute;
          border-radius: 40%;

          &.-one {
            width: 600px;
            height: 670px;/*630px*/
            animation: drift 5000ms infinite linear;
            background-image: linear-gradient(to top, #ffe4c1 0%, #9d3930 100%
            );
          }

          &.-two {
            width: 630px;
            height: 670px;/*600px*/
            background-image: linear-gradient(
              to bottom,
              #fff0bb 0%,
              #75371b 100%
            );
            animation: drift 7000ms infinite linear;
          }

          &.-three {
            width: 600px;
            height: 600px;
            animation: drift 9000ms infinite linear;
            background-image: blinear-gradient(
              to left,
              #ffd953 0%,
              #ba7d5a 100%
            );
          }
        }
  
    .card-body {
      flex: 1 1 0;
      display: flex;
      margin-top:-20px;

      .body-wrapper {
        flex: 1 1 0;
        padding: 30px 50px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;

        .body-name-wrapper {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;

          .body-name {
            text-transform: uppercase;
          }

          .body-profile {
            font-size: 8pt;
          }
        }

        .body-social {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;

          .fa {
            cursor: pointer;
            min-width: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.15s ease-in-out;
          }
        }

        .body-about,
        .body-position {
          font-size: 8pt;
          text-align: center;
        }
      }
    }
  }
}

@keyframes drift {
  from {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(360deg);
  }
}