*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /*  Primary */
  --Base: hsl(246, 80%, 60%);
  --work: hsl(15, 100%, 70%);
  --play: hsl(195, 74%, 62%);
  --study: hsl(348, 100%, 68%);
  --exercise: hsl(145, 58%, 55%);
  --social: hsl(264, 64%, 52%);
  --self-care: hsl(43, 84%, 65%);
  /* Neutral */
  --Very-dark-blue: hsl(226, 43%, 10%);
  --Dark-blue: hsl(235, 46%, 20%);
  --Desaturated-blue: hsl(235, 45%, 61%);
  --Pale-Blue: hsl(236, 100%, 87%);
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Rubik", sans-serif;
  background-color: var(--Very-dark-blue);
  color: #fff;
  display: grid;
  padding: 2rem;
  place-items: center;
  min-height: 100vh;
}

/* ======================================================= */
main {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.container-card,
.container-up,
.container-down {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.container-card {
  width: 40rem;
}

.container-up,
.container-down {
  border-radius: 1rem;
}

.container-up {
  background: var(--Base);
}

.container-down {
  background: var(--Dark-blue);
  padding: 2rem;
  width: 100%;
}

.profile {
  padding: 2rem;
}
.profile #profile-pic {
  border: 0.4rem solid var(--Pale-Blue);
  border-radius: 50%;
  width: 10rem;
}
.profile h3 > span {
  font-size: 1.25rem;
}
.profile h3 {
  font-size: 1.8rem;
  font-weight: 300;
  width: 10ch;
}

.container-down > button {
  border: none;
  padding: 0.25rem;
  background: 0;
  color: #fff;
}

/* ------------------------------------------------------------------ */
.attribution {
  font-size: 11px;
  text-align: center;
  /* position: fixed;
  bottom: 5px;
  margin: 0 auto; */
}
.attribution a {
  color: hsl(228, 45%, 44%);
}/*# sourceMappingURL=style.css.map */