@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
 
 
* {
 box-sizing: border-box;
}
 
body {
 background-image: linear-gradient(to right top, #d400ff, #0fffeb);
 font-family: Montserrat, sans-serif;
 
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 
 min-height: 100vh;
 margin: 0;
}
 
h3 {
 margin: 10px 0;
 font-family: Poppins;
 color: rgb(0, 247, 255);
}
 
h6 {
 margin: 5px 0;
 color: #fff;
 text-transform: uppercase;
}
 
p {
 font-size: 14px;
 line-height: 21px;
}
 
.card-container {
 background-color: #231E39;
 border-radius: 25px;
 box-shadow: 10px 10px 15px rgba(0,0,0,0.35);
 color: #B3B8CD;
 padding: 30px 0 0;
 position: relative;
 width: 360px;
 max-width: 100%;
 text-align: center;
 margin: 20px 0;
 overflow: hidden;
}
 
.card-container .pro {
 color: #231E39;
 background-color: #FEBB0B;
 border-radius: 3px;
 font-size: 14px;
 font-weight: bold;
 padding: 3px 7px;
 position: absolute;
 top: 30px;
 left: 30px;
}
 
.card-container img {
 border: 3px solid #ff0095;
 border-radius: 50%;
 padding: 7px;
 height: 150px;
 width: 150px;
}
 
button.primary {
 background-color: #C400D7;
 border: 1px solid #C400D7;
 border-radius: 10px;
 color: #fff;
 font-family: Montserrat, sans-serif;
 font-weight: 900;
 padding: 12px 26px;
 margin: 6px;
 letter-spacing: 1px;
 transition: .2s;
}
 
button.primary.ghost {
 background-color: transparent;
 color: #C400D7;
}
button:hover
{
    padding: 13px 27px;
}
a:hover
{
    padding: 13px 27px;
}
a
{
    background-color: transparent;
    color: #C400D7;
}
.primary {
    background-color: #C400D7;
    border: 1px solid #C400D7;
    border-radius: 10px;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 900;
    font-size: 13px;
    padding: 10px 22px;
    margin: 6px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: .2s;
   }
.skills {
 background-color: #1F1A36;
 text-align: left;
 padding: 15px;
 margin-top: 30px;
}
 
.skills ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
 
.skills ul li {
 border: 1px solid #2D2747;
 border-radius: 2px;
 display: inline-block;
 font-size: 12px;
 margin: 0 7px 7px 0;
 padding: 7px;
}
.icons ul li
{
    display: inline;
    margin: 30px;
}
.social-links {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.icons .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background-color: #c74385;
    color: #ffffff;
    font-size: 20px;
    border-radius: 100%;
    text-decoration: none;
    margin:  13px 10px 0;
    transition: .3s;
}

.icons .social-icon:last-child {
    margin-right: 0;
}

.icons .social-icon:hover {
    background-color: #d885af;
    height: 50px;
    width: 50px;
    text-decoration: none;
}