body {
    background: #181818;
    color: white;
    font-size: 20px;
    font-family: Raleway, Helvetica, Arial, sans-serif;
}

a {
    color: #487EEF !important;
    text-decoration: none !important;
    position: relative;
    font-weight: bold;
}

a:hover:after {
    content: "";
    height: 3px;
    background-color: #513d91;
    width: 100%;
    position: absolute;
    bottom: -5px;
    left: 0;
}

.aavtar {
    position: relative;
    min-height: 300px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .aavtar {
        width: 300px;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
    }
}

.aavtar .backdrop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.aavtar .backdrop:before {
    content: "";
    display: inline-block;
    position: relative;
    width: 220px;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 22px;
    z-index: 1;
    border-radius: 50%;
    background: -webkit-radial-gradient(bottom,#487eef,#513d91);
    background: -o-radial-gradient(bottom,#487eef,#513d91);
    background: radial-gradient(0deg,#487eef,#513d91);
    border: 15px solid;
    box-sizing: content-box;
}

.aavtar .clipMask {
    position: relative;
    z-index: 2;
    -webkit-clip-path: ellipse(154px 162px at 50% 160px);
    clip-path: ellipse(120px 135px at 50% 122px);
}

.aavtar .clipMask img {
    z-index: 3;
    width: 100%;
    height: 100%;
    min-width: 200px;
    max-width: 224px;
    margin-top: 33px;
}

.max-width-1200 {
    max-width: 1200px;
}

.nav {
    display: inline-flex;
}