:root{
  --dark-cyan:hsl(185, 75%, 39%);
  --desatured-blue:hsl(229, 23%, 23%);
  --grayish-blue: hsl(227, 10%, 46%);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  position:relative;
  background-color: var(--dark-cyan);
  background-image: url('../images/bg-pattern-top.svg'), url('../images/bg-pattern-bottom.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  font-family: 'Kumbh Sans', sans-serif;
}

.flex{
  display:flex;
  justify-content:center;
  align-items:center;
  height: 100vh;
}

.card{
  height:370px;
  background: white;
  width: 350px;
  margin: 0 auto;
  border-radius: 12px;
  position:relative;
  /* offset-x | offset-y | blur-radius | color */
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.233);
  overflow: hidden;
}

.card-header{
  min-height:130px;
  width: 100%;
  background:url(../images/bg-pattern-card.svg);
  background-size: cover;
  overflow: hidden;
}

.card img{
  position: absolute;
  justify-content: center;
  border-radius: 50%;
  border: 4px solid white;
  background: white;
  top:70px;
  left:120px;
  
 
}

.card-body{
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items:center;
}

.card-body p:first-child{
  font-weight: 700;
  margin-bottom: 5px;
}

.card-body p:first-child span{
  font-weight: 400;

}

.card-body p:not(:first-child){
  font-size: 14px;
  color: grey;
}

.card-body{
  border-bottom: 1px solid rgb(223, 223, 223);
  padding-bottom: 20px;
}

.card-body span{
  color: grey;
  font-weight: 400;
}

.card-footer{
  display: flex;
  justify-content:space-between;
  align-items: center;
  padding: 40px;
  text-align: center;
 
}

.followers p:first-child, .likes p:first-child, .photos p:first-child{
  font-weight: 700;
  margin-bottom: -10px;
}

.followers p:not(:first-child), .likes p:not(:first-child), .photos p:not(:first-child){
  margin-top: 20px;
  font-weight: 400;
  font-size: 12px;
  color: grey;
}