@-ms-viewport {
  width: device-width;
}

@media screen and (max-width: 700px) {
  .top-photo {
    width: 100vw;
    transform: translate(-50%, -50%);
  }
  .bot-photo {
    width: 100vw;
    transform: translate(50%, 50%);
  }

  .card {
    width: 300px;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
header {
  text-decoration: none;
  padding: 0;
  margin: 0;
}
body {
  background-color: hsl(185, 75%, 39%);
  font-family: "Kumbh Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.top-photo {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-30%, -70%);
}
.bot-photo {
  pointer-events: none;
  position: fixed;
  bottom: 0;
  right: 0;
  transform: translate(30%, 70%);
}
a {
  text-decoration: none;
  color: #ffffff;
}
a:hover {
  color: #efefef;
}
.credits {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #ffffff;
  z-index: 100;
}
.container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 100vh;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background-color: #ffffff;
  width: 350px;
}
.stats {
  display: flex;
}

.banner {
  width: 100%;
  height: 125px;
  background-image: url(./images/bg-pattern-card.svg);
  border-radius: 20px 20px 0 0;
}
.avatar {
  height: 50px;
}
.avatar-img {
  width: 90px;
  height: 90px;
  background-image: url(./images/image-victor.jpg);
  background-size: cover;
  border: solid #ffffff 5px;
  border-radius: 100%;
  transform: translateY(-50%);
}
.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 80px;
}
.name-age {
  display: flex;
  flex-direction: row;
}
.name {
  font-weight: 600;
  font-size: 18px;
  padding: 0 5px;
  color: #323232;
}
.age {
  font-weight: 200;
  font-size: 18px;
  color: hsl(0, 0%, 59%);
  padding: 0 5px;
}
.location {
  font-weight: 200;
  font-size: 13px;
  color: hsl(0, 0%, 59%);
  padding-top: 7px;
}
.stats-child {
  padding-top: 5px;
  margin: 20px 30px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.stats-value {
  font-weight: 650;
  color: #323232;
}
.stats-type {
  font-size: 10px;
  color: hsla(0, 0%, 59%, 1);
  padding: 5px 0;
  letter-spacing: 1px;
}

.line-between {
  height: 1px;
  width: 100%;
  border-top: solid hsla(0, 0%, 59%, 0.2) 1px;
}