.avatar {
    --avatar-size: 150px;
    height: var(--avatar-size);
    width: var(--avatar-size);
    border: 4px solid var(--main-blue);
    padding: 0;
    border-radius: 50%;
    position: relative;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .avatar::before, .avatar::after {
    content: "";
    position: absolute;
    height: 6px;
    width: 6px;
    transform: rotate(45deg);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .avatar::before {
    box-shadow: 0px 0px 0px transparent, 4.94975rem 4.94975rem var(--main-blue), 0rem 7rem var(--main-blue), -4.94975rem 4.94975rem var(--main-blue), -7rem 0rem var(--main-blue), -4.94975rem -4.94975rem var(--main-blue), 0rem -7rem var(--main-blue), 4.94975rem -4.94975rem var(--main-blue), 7rem 0rem var(--main-blue);
    -webkit-animation: animate-2 4s ease-in-out infinite;
            animation: animate-2 4s ease-in-out infinite;
  }
  .avatar::after {
    box-shadow: 0px 0px 0px transparent, 5.54328rem 2.2961rem var(--main-blue), 4.24264rem 4.24264rem var(--main-blue), 2.2961rem 5.54328rem var(--main-blue), 0rem 6rem var(--main-blue), -2.2961rem 5.54328rem var(--main-blue), -4.24264rem 4.24264rem var(--main-blue), -5.54328rem 2.2961rem var(--main-blue), -6rem 0rem var(--main-blue), -5.54328rem -2.2961rem var(--main-blue), -4.24264rem -4.24264rem var(--main-blue), -2.2961rem -5.54328rem var(--main-blue), 0rem -6rem var(--main-blue), 2.2961rem -5.54328rem var(--main-blue), 4.24264rem -4.24264rem var(--main-blue), 5.54328rem -2.2961rem var(--main-blue), 6rem 0rem var(--main-blue);
    transform: rotate(12deg);
    -webkit-animation: animate-1 4s ease-in-out infinite;
            animation: animate-1 4s ease-in-out infinite;
  }
  .avatar img {
    max-width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: inherit;
  }
  
  @-webkit-keyframes animate-1 {
    0%,
    100% {
      box-shadow: 0px 0px 0px transparent, 5.54328rem 2.2961rem var(--main-blue), 4.24264rem 4.24264rem var(--main-blue), 2.2961rem 5.54328rem var(--main-blue), 0rem 6rem var(--main-blue), -2.2961rem 5.54328rem var(--main-blue), -4.24264rem 4.24264rem var(--main-blue), -5.54328rem 2.2961rem var(--main-blue), -6rem 0rem var(--main-blue), -5.54328rem -2.2961rem var(--main-blue), -4.24264rem -4.24264rem var(--main-blue), -2.2961rem -5.54328rem var(--main-blue), 0rem -6rem var(--main-blue), 2.2961rem -5.54328rem var(--main-blue), 4.24264rem -4.24264rem var(--main-blue), 5.54328rem -2.2961rem var(--main-blue), 6rem 0rem var(--main-blue);
    }
    50% {
      box-shadow: 0px 0px 0px transparent, 5.08134rem 2.10476rem var(--main-blue), 3.88909rem 3.88909rem var(--main-blue), 2.10476rem 5.08134rem var(--main-blue), 0rem 5.5rem var(--main-blue), -2.10476rem 5.08134rem var(--main-blue), -3.88909rem 3.88909rem var(--main-blue), -5.08134rem 2.10476rem var(--main-blue), -5.5rem 0rem var(--main-blue), -5.08134rem -2.10476rem var(--main-blue), -3.88909rem -3.88909rem var(--main-blue), -2.10476rem -5.08134rem var(--main-blue), 0rem -5.5rem var(--main-blue), 2.10476rem -5.08134rem var(--main-blue), 3.88909rem -3.88909rem var(--main-blue), 5.08134rem -2.10476rem var(--main-blue), 5.5rem 0rem var(--main-blue);
    }
  }
  
  @keyframes animate-1 {
    0%,
    100% {
      box-shadow: 0px 0px 0px transparent, 5.54328rem 2.2961rem var(--main-blue), 4.24264rem 4.24264rem var(--main-blue), 2.2961rem 5.54328rem var(--main-blue), 0rem 6rem var(--main-blue), -2.2961rem 5.54328rem var(--main-blue), -4.24264rem 4.24264rem var(--main-blue), -5.54328rem 2.2961rem var(--main-blue), -6rem 0rem var(--main-blue), -5.54328rem -2.2961rem var(--main-blue), -4.24264rem -4.24264rem var(--main-blue), -2.2961rem -5.54328rem var(--main-blue), 0rem -6rem var(--main-blue), 2.2961rem -5.54328rem var(--main-blue), 4.24264rem -4.24264rem var(--main-blue), 5.54328rem -2.2961rem var(--main-blue), 6rem 0rem var(--main-blue);
    }
    50% {
      box-shadow: 0px 0px 0px transparent, 5.08134rem 2.10476rem var(--main-blue), 3.88909rem 3.88909rem var(--main-blue), 2.10476rem 5.08134rem var(--main-blue), 0rem 5.5rem var(--main-blue), -2.10476rem 5.08134rem var(--main-blue), -3.88909rem 3.88909rem var(--main-blue), -5.08134rem 2.10476rem var(--main-blue), -5.5rem 0rem var(--main-blue), -5.08134rem -2.10476rem var(--main-blue), -3.88909rem -3.88909rem var(--main-blue), -2.10476rem -5.08134rem var(--main-blue), 0rem -5.5rem var(--main-blue), 2.10476rem -5.08134rem var(--main-blue), 3.88909rem -3.88909rem var(--main-blue), 5.08134rem -2.10476rem var(--main-blue), 5.5rem 0rem var(--main-blue);
    }
  }
  @-webkit-keyframes animate-2 {
    0%,
    100% {
      box-shadow: 0px 0px 0px transparent, 3.88909rem 3.88909rem var(--main-blue), 0rem 5.5rem var(--main-blue), -3.88909rem 3.88909rem var(--main-blue), -5.5rem 0rem var(--main-blue), -3.88909rem -3.88909rem var(--main-blue), 0rem -5.5rem var(--main-blue), 3.88909rem -3.88909rem var(--main-blue), 5.5rem 0rem var(--main-blue);
    }
    50% {
      box-shadow: 0px 0px 0px transparent, 4.24264rem 4.24264rem var(--main-blue), 0rem 6rem var(--main-blue), -4.24264rem 4.24264rem var(--main-blue), -6rem 0rem var(--main-blue), -4.24264rem -4.24264rem var(--main-blue), 0rem -6rem var(--main-blue), 4.24264rem -4.24264rem var(--main-blue), 6rem 0rem var(--main-blue);
    }
  }
  @keyframes animate-2 {
    0%,
    100% {
      box-shadow: 0px 0px 0px transparent, 3.88909rem 3.88909rem var(--main-blue), 0rem 5.5rem var(--main-blue), -3.88909rem 3.88909rem var(--main-blue), -5.5rem 0rem var(--main-blue), -3.88909rem -3.88909rem var(--main-blue), 0rem -5.5rem var(--main-blue), 3.88909rem -3.88909rem var(--main-blue), 5.5rem 0rem var(--main-blue);
    }
    50% {
      box-shadow: 0px 0px 0px transparent, 4.24264rem 4.24264rem var(--main-blue), 0rem 6rem var(--main-blue), -4.24264rem 4.24264rem var(--main-blue), -6rem 0rem var(--main-blue), -4.24264rem -4.24264rem var(--main-blue), 0rem -6rem var(--main-blue), 4.24264rem -4.24264rem var(--main-blue), 6rem 0rem var(--main-blue);
    }
  }