*{
    margin: 0;
    padding: 0;
    font-family: "Ubuntu", sans-serif;
    box-sizing: border-box;
    text-decoration: none;
}

body{
    height: 100vh;
    background: url(assets/bg.png) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card{
    display: flex;
    width: 300px;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
}

.card-header{
    background: #2c3a47;
    padding: 30px 20px;
}

.pic{
    display: inline-block;
    padding: 8px;
    background: linear-gradient(130deg, #74b9ff, #e66767);
    margin: auto;
    border-radius: 50%;
    background-size: 200% 200%;
    animation: animated-gradient 2s linear infinite;
}

@keyframes animated-gradient{
    25%{
      background-position: left bottom;
    }
    50%{
      background-position: right bottom;
    }
    75%{
      background-position: right top;
    }
    100%{
      background-position: left top;
    }
}

.pic img{
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
}

.name{
      color: #97ff9a;
      font-size: 28px;
      font-weight: 600;
      margin: 10px 0;
}

.desc{
      font-size: 14px;
      color: #e66767;
}

p {
      margin: 5px;
      font-size: 13px;
      color: darkgoldenrod;
}

.sm{
      display: flex;
      justify-content: center;
      margin: 20px 0;
}

.sm a{
      color: #f2f2f2;
      width: 56px;
      font-size: 22px;
      transition: .3s linear;
}

.sm a:hover{
      color: #e66767;
}