@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");

* {
  box-sizing: border-box;
  /*border: solid black 1px; */
  margin: 0;
  padding: 0;
}

@media (orientation: portrait) {
  /* mobile rules */
  body {
    /* each background property is a liast for each background image */
    background-image: url("../images/bg-pattern-top.svg"),
      url("../images/bg-pattern-bottom.svg");
    background-position: left 175% top 50%, right 150% bottom 140%;
    background-repeat: no-repeat, no-repeat;
    background-color: hsl(185, 75%, 39%);
  }
}

@media (orientation: landscape) {
  /* desktop rules */
  body {
    /* each background property is a liast for each background image */
    background-image: url("../images/bg-pattern-top.svg"),
      url("../images/bg-pattern-bottom.svg");
    background-position: -50% 45%, 150% -32%;
    background-repeat: no-repeat, no-repeat;
    background-color: hsl(185, 75%, 39%);
  }
}

hr {
  width: 99%;
  margin: 0 auto;
  background-color: lightgray;
}

/* typography */

.grey-text {
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: hsl(227, 10%, 46%);
}

.black-text {
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: hsl(229, 23%, 23%);
}

#age {
  font-size: 18px;
}

#location {
  font-size: 13px;
}

.card-footer-small-text {
  letter-spacing: 0.1rem;
}

/* card */

#profile-card {
  width: 350px;
  height: 380px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: white;
}

.card-corners {
  border-radius: 15px;
}

/* card header */

#card-header-container {
  height: 140px;

  background-color: hsl(183, 62%, 54%)
}

.card-top-corners {
  border-radius: 15px 15px 0px 0px;
}

/* card body */

.card-body-container {
  position: relative; /* allows me to position child elements with absolute */
}

#profile-picture {
  width: 96;
  height: 96;

  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 2%);

  border: solid white 5px;
  border-radius: 50%;
}

#name-age-container {
  margin: 19% auto 0;
  text-align: center; /* inline block child elements are centered because of this */
}

#name,
#age {
  display: inline-block;
}

#name {
  margin-right: 0.5rem;
}

#location {
  margin: 0.6rem auto 2rem;
  text-align: center;
}

/* card footer */

.card-footer-block {
  display: inline-block;
  width: 32.5%;
  margin-top: 7%;
}

.card-footer-block p {
  text-align: center;
}

/* attribution */

.attribution {
  width: 100%;
  position: fixed;
  bottom: 5px;
  font-size: 11px;
  text-align: center;
  font-family: "Kumbh Sans", sans-serif;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

/*
# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### Primary

Dark cyan: hsl(185, 75%, 39%)
Very dark desaturated blue: hsl(229, 23%, 23%)
Dark grayish blue: hsl(227, 10%, 46%)

### Neutral

Dark gray: hsl(0, 0%, 59%)

## Typography

### Body Copy

- Font size (name and stats): 18px

### Font

- Family: [Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans)
- Weights: 400, 700
*/