body {
    font-family: 'Josefin Sans';
    margin: 0;
    padding: 15px;
    background-color: rgb(48, 36, 63);
  }
  .wrap {
    width: 100%;
    max-width: 320px;
    padding-top: 100px !important;
    margin: 0 auto;
  }
  .profile {
    text-align: center;
    color: #FFF;
    margin-bottom: 20px;
  }
  .photo {
    height: 200px;
    width: 100%;        
  }
  .img{
    height: 100%;
    width: 200px;
    border-radius: 50%;
    background: url("../images/rachealdrayton.webp");
    background-position: center;
    background-size: cover;
    margin: 0 auto;
  }
  .profile_name {
    font-weight: bold;
    font-size: larger;
    display: block;
    margin: 4px 0;
  }
  .at {
    font-size: 13px;
  }
  
.custom-btn {
width: 100%;
height: 45px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Josefin Sans';
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}



.btn-8 {
background-color: #f0ecfc;
background-image: linear-gradient(315deg, #f0ecfc 0%, #b096d2 100%);
line-height: 52px;
padding: 0;
margin: 14px 0;
border: none;
text-align: center;
}
.btn-8 {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-8{
text-decoration: none;
color: black;
}
.btn-8:before,
.btn-8:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: #c797eb;
/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
          -4px -4px 6px 0 rgba(116, 125, 136, .2), 
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn-8:before{
height: 0%;
width: 2px;
}
.btn-8:after {
width: 0%;
height: 2px;
}
.btn-8:hover:before {
height: 100%;
}
.btn-8:hover:after {
width: 100%;
}
.btn-8:hover{
background: #ddbaf7;
}
.btn-8 span:hover{
color: #c797eb;
}
.btn-8 span:before,
.btn-8 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #c797eb;
/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
          -4px -4px 6px 0 rgba(116, 125, 136, .2), 
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn-8:before {
width: 2px;
height: 0%;
}
.btn-8:after {
height: 2px;
width: 0%;
}
.btn-8:hover:before {
height: 100%;
}
.btn-8:hover:after {
width: 100%;
}