body{
  background-color: #B5D5C5;
}
h1,h2{
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
}
p,span{
    font-family: 'Kumbh Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #698269;
}
.container{
  padding: 0;
  margin: 10% 20% 10% 35%;
  text-align: center;
  width: 25%;
  height: 60%;
  border-radius: 20px;
  border-width: 1px;
  border-style: solid;
  background-color: #ffff;
  align-items: center;
  display: block;
}
.col-1{width: 100%;}
.col-2{width: 33.33%;}
.col-3{width: 33.33%;}
.col-4{width: 33.33%;}

.profile-pic{
  background-image: url('../images/bg-pattern-card.svg');
  background-repeat: repeat-x;
  border-radius:20px 20px 0 0;
  height: 40%;
}
.profile-pic img{
  border-radius: 100%;
  position: relative;
  top: 5rem;
  padding: 5px;
  margin: 5%;
}
.username{
  padding-top: 5rem;
}
.username h1{
  display: inline-block;
}
#contact{
  padding: 5% 7%;
  background-color: #ADE792;
}
.attribution{
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
/* mobile version */

@media screen and (max-width:900px) {
  .container{
    width:60%;
    height: 60%;
    margin: 20% 5% 20% 20%;

  }
  .username{
    padding:0;
    margin-top: 4rem;
  }
  hr{
    width: 95%;
    margin-left: 10px;
  }
  .attribution{
    padding-bottom: 10%;
  }
  .col-1{width: 100%;}
  .col-2{width: 33.33%;}
  .col-3{width: 33.33%;}
  .col-4{width: 33.33%;}
}