*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: #FCF0FF;
    font-family: "Nunito", sans-serif;

}


.top-strip{
    height:36px;
    width: 100%;
    background-color: #9D40E4;
}

.bottom-strip{
    height:36px;
    width: 100%;
    background-color: #9D40E4;
    bottom: 0px;
}


.container{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 16px;
}
.profile-card{
    max-width: 335px;
    width: 100%;
    height:auto;
    background-color:#9D40E4 ;
    border-radius: 30px;
    padding: 32px 22px 20px;
    position: relative;
}

.icons-container{
    display: flex;
    justify-content: space-between;
}

.icons-container img:hover{
    cursor: pointer;
    transform: rotate(10deg);

}

.profile-content{
    background-color: white;
    border-radius: 30px;
    text-align: center;
    justify-content: center;
    margin-top: 60px;
    position: relative;
}

.avatar-container{
    display: inline-block;
    margin-top: -60px;
    border: 8px solid white;
    border-radius: 100%;
    position: relative;
}

.green-dot{
    height:14px;
    width: 14px;
    background-color: greenyellow;
    border-radius: 100%;
    box-sizing: content-box;
    border: 4px solid white;
    position: absolute;
    bottom: 10px;
    right: 0px;
}
.view-profile-btn{
    display: inline-block;
    background-image: linear-gradient(90deg, #FFC107, #FF9800);
    text-decoration: none;
    color: white;
    padding: 8px 20px;
    margin-top: 16px;
    margin-bottom: 22px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 700;

}


.view-profile-btn:hover{
    background-image: linear-gradient(0deg, #FFC107, #FF9800);
}

.card-heading{
    margin-top: 0;
    margin-top:14px;

}

.card-subtitle{
    margin-top:8px;
    color: #9E9E9E;
}
.social-icons{
    border-top: 1px solid #E0E0E0;
    padding: 16px 0px 10px;
    cursor: pointer;
}

.social-icons-icon + .social-icons-icon{
    margin-left: 16px;
}

.circle{
    background-image: linear-gradient(0deg, #9C45DE 0%, #A453e2 100%);
    border-radius: 50%;
    position: absolute;
}

.circle1{
    top: 8px;
    right: 36px;
    height:160px;
    width: 160px;
}

.circle2{
    top: 90px;
    left: 8px;
    height: 90px;
    width: 90px;
}