
.my-head-box {
  background: var(--main-bg-color);
  border-radius: 0px 0px 120px 120px;
  height: 50vw;
  display: flex;
  justify-content: center;

  .profile-box {
    flex: none;
    width: 40vw;
    height: 40vw;

    .profile-avatar {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(255, 255, 255, .01);
        border-radius: 50%;
      }
      
      &::after {
        content: '';
        position: absolute;
        top: 15%;
        left: 15%;
        width: 70%;
        height: 70%;
        z-index: 2;
        background-color: rgba(255, 255, 255, .03);
        border-radius: 50%;
      }


      image {
        position: relative;
        display: block;
        width: 16vw;
        height: 16vw;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;
        z-index: 3;
        margin: auto;
      }
    }

    .profile-name {
      font-size: 32px;
      color: #FFFFFF;
      text-align: center;
    }
  }
}
