:root{
    --dark-cyan:hsl(185, 75%, 39%);
    --dark-desaturated-blue:hsl(229,23%,23%);
    --dark-grayish-cyan:hsl(227,10%,46%);
    --dark-gray:hsl(0,0%,59%);
    --light-gray:#E8E8E8;
}
body{
    font-family: 'Kumbh Sans';
    font-size: 18px;
    margin: 0;
    background-color:var(--dark-cyan);
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.top-pattern,.bottom-pattern{
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
   
}
.bottom-pattern{
    background-image: url("../images/bg-pattern-bottom.svg") ;
    top:50vh;
    left:50vw;
}
.top-pattern{
    background-image: url("../images/bg-pattern-top.svg") ;
    background-position: bottom right;
    right: 50vw;
    bottom: 50vh;
}

.card{
    border-radius: 1em;
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    width: 350px;
}
.card-header{
    background-image: url("../images/bg-pattern-card.svg");
    height: 142px;
    border-radius: 1em 1em 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.card-header__img{
    margin: 0;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: -48px;
    border: 4px solid white;
}
.card-body-profile{
    margin-top: 48px;
    padding-top: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card-body-profile__name{
    margin: 0;
}
.card-body-profile__city{
    font-size: 0.75em;
    color: var(--dark-gray);  
}
.card-body-profile__age{
    font-weight: 400;
    color: var(--dark-grayish-cyan);
}
.card-body-social{
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    padding:1.5em 0;
    border-top: 0.5px solid var(--light-gray);
}
.card-body-social__element-quantity,.card-body-profile__name{
    font-weight: 700;
    color: var(--dark-desaturated-blue);
}
.card-body-social__element-detail{
  color: var(--dark-gray);  
  font-size: 0.5em;
  margin-top: 0.5em;
}
@media screen and (max-width: 1000px) {
    .card{
        margin: 0 24px;
    }
}