/*************************TAG SELECTORS***************************************/

/************************ CLASS SELECTORS*************************************/
/************************ Card Layers ****************************************/
.card-layer{
  position: relative;
  background-color: hsl(185, 75%, 39%);
  background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg");
  background-position: -60% 190%, 150% -130%;
  background-repeat: no-repeat, no-repeat;
  margin: 100px auto;
  max-width: 1440px;
  height: 700px;
}

.usercard-layer{
  border-radius: 25px;
  background-color: white;
  width: 350px;
  height: 415px;
  position: absolute;
  text-align: center;
  /*-- 1440 / 1440 - 350px to get the middle position*/
  margin: 10% 37.85%;
}
/****************************Image Positioning*********************************/

.portfolio{
  border-radius: 100px;
  border: 5px solid white;
  position: absolute;
  top: 100px;
  left: 125px;
}

.upper-background{
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  background-image: url("../images/bg-pattern-card.svg");
  height: 150px;
}

/****************************Text Positioning**********************************/

.name{
  font-size: 1.15rem;
  margin: 75px auto 0;
  display: inline-block;

}

.age{
  font-size: 1.15rem;
  display: inline-block;
  margin: 0 0 0 5px;
  color: hsl(227, 10%, 46%);
}

.city{
  margin: 5px auto 20px;
  color: hsl(227, 10%, 46%);
}

.user-stats{
  font-size: 1.25rem;
  position: absolute;
  bottom: 5%;
  margin: 9% 0 2% 0;
}

.stat-bottom{
  font-size: 0.80rem;
  color: hsl(227, 10%, 46%);
}

/**************************Other Positioning***********************************/

.stats{
  border-spacing: 40px 0;
}

.breakpoint{
  border-style: none;
  border-top-style: solid;
  width: 350px;
  margin: 5% 30px 5% 0;
  border-color: hsl(0, 0%, 59%);
}

/**************************Text Editing**************************************/


.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }