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

html {
  font-size: 8px;
}

/* background images */
body {
  /* Something I learned is that I used min height because 
  the height of the top second circle did not reach the top 
  of the viewport */
  min-height: 100vh;
  font-family: "Kumbh Sans", sans-serif;
  background-color: hsl(185, 75%, 39%);
  background-image: url("/images/bg-pattern-top.svg"),
    url("/images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  /* what this is saying is that the first image is to the right and to the bottom 50% of the browser windows width and it's height and the second one is left and to the top of the screen the same length and height */
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
}

main {
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Card */

.profile-card {
  background-color: white;
  background-image: url(/images/bg-pattern-card.svg);
  background-repeat: no-repeat;
  background-position: top 0% left 0%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 46.25rem;
  width: 43.75rem;
  margin: auto;
  border-radius: 12px;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  box-shadow: 0 20px 40px rgb(0 0 0 / 19%), 0 6px 20px rgb(0 0 0 / 23%);
}

.profile-picture {
  background-color: white;
  border: solid white 5px;
  border-radius: 50%;
}

.picture {
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
}

.about {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.gray {
  color: hsl(0, 0%, 59%);
  font-weight: 400;
}

.stats {
  display: flex;
  padding-top: 20px;
  justify-content: space-around;
  border-top: solid 0.01em hsl(0, 0%, 59%);
  text-align: center;
  line-height: 1.8;
}

@media only screen and (max-width: 400px) {
  body {
    width: 100vw;
    background-size: 125vw;
    background-position: top -50vw left -75vw, bottom -25vw right -75vw;
  }
}