@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    --light-blue: #1c9eff;
    --dark-blue: #007da6;
    --btn-yellow: #ffd01a;
    --btn-hover-yellow: #efb10a;
    --btn-active-yellow: #e8a200;
    --light-grey: #f0f0f0;
    --grey: #a0a0a0;
    --pink: #ff9eaa;
}

body{
    background: linear-gradient(to bottom right, #fff, var(--pink));
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.card{
    background-color: #fff;
    max-width: 350px;
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

.card .banner{
    background: url('cover-img.jpeg') no-repeat;
    background-size: cover;
    background-position: top;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.card .banner .imgBox{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    transform: translateY(50%);
    z-index: 1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.505);
    transition: all .3s;
}

.card .banner .imgBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.card .card-body{
    position: relative;
    padding: 100px 30px 40px;
}

.card .banner .imgBox:hover{
    transform: translateY(50%) scale(1.1);
}

.card .card-body .menu{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s;
}

.card .card-body .menu:hover{
    background-color: var(--light-grey);
}

.card .name{
    text-align: center;
}

.card .title{
    text-align: center;
    color: var(--grey);
    font-size: 14px;
    padding-bottom: 10px;
}

.card .action{
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.card .action .follow-info{
    display: flex;
    padding-bottom: 10px;
}

.card .action .follow-info h2{
    text-align: center;
    width: 50%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    transition: .3s;
}

.card .action .follow-info h2 span{
    color: var(--light-blue);
    font-weight: bold;
}

.card .action .follow-info h2 small{
    color: var(--grey);
    font-size: 14px;
    font-weight: normal;
}

.card .action .follow-info h2:hover{
    background-color: var(--light-grey);
    cursor: pointer;
}

.card .action .btn{
    background-color: var(--btn-yellow);
    border: none;
    outline: none;
    padding: .8rem;
    width: 100%;
    border-radius: 1.5rem;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.card .action .btn:hover{
    background-color: var(--btn-hover-yellow);
    transform: scale(1.1);
}

.card .action .btn:active{
    background-color: var(--btn-active-yellow);
    transform: scale(1);
}

.card .desc{
    text-align: justify;
    color: var(--grey);
    font-size: 14px;
}


@media (max-width:600px) {
    .card{
        max-width: 330px;
    }
}