:root {
  --primary-clr-600: hsl(217, 19%, 35%);
  --primary-clr-500: hsl(214, 17%, 51%);
  --primary-clr-400: hsl(212, 23%, 69%);
  --primary-clr-300: hsl(210, 46%, 95%);
  --white: hsl(0, 0%, 100%);

  --ff-base: 'Manrope', sans-serif;

  --fw-500: 500;
  --fw-700: 700;
}

/* ---------- Reset ---------- */
/* 1. More-intuitive box-sizing model. */
*, *::before, *::after {box-sizing: border-box;}
/* 2. Remove default margin and padding */
* {margin: 0;padding: 0;}
/* 3. Allow percentage-based heights in the application */
html, body {height: 100%;}
/* Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering */
body {line-height: 1.5;-webkit-font-smoothing: antialiased;}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {display: block;
  max-width: 100%;
}
/* 7. Remove built-in form typography styles */
input, button, textarea, select {font: inherit;}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
/* ---------- Global ---------- */
html {
  font-size: 100%;
}
body {
  background-color: var(--primary-clr-300);
  font-family: var(--ff-base);
  min-height: 37.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h1, h2, a {
  color: var(--primary-clr-600);
  font-weight: var(--fw-700);
}
/* ---------- Utility classes ---------- */
.fs-body-copy {
  font-size: 0.8287rem;
}
/* ---------- Layout ---------- */
.card {
  width: 20.4375rem;
  height: 32rem;
  background-color: var(--white);
  overflow: hidden;
  border-radius: .75rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}
/* ----- Section | card__img ----- */
.card__img {
  height: 12.5rem;
  background: url(../assets/images/drawers.jpg) no-repeat center center/cover;
}
/* ----- Section | card__info ----- */
.card__info {
  padding: 2rem 2rem 0;
}
.card__info__title {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.card__info__text {
  color: var(--primary-clr-500);
  font-weight: var(--fw-500);
  padding-bottom: 2rem;
}
/* ----- Section | card__info__avatar  ----- */
.card__info__avatar {
  position: relative;
  justify-content: space-between;
}
.card__info__avatar__container {gap: 1rem;}

.card__info__avatar__container__pfp {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.card__info__avatar__container__container__date {
  color: var(--primary-clr-400);
}
/* ----- share-btn ----- */
.share-btn {
  width: 2rem;
  height: 2rem;
  background-color: var(--primary-clr-300);
  color: var(--primary-clr-500);
  text-align: center;
  line-height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition: 500ms;
}
/* ----- Hover states ----- */
.share-btn:hover,
.card__info__avatar__socials__icon:hover,
.footer a:hover {
  transition: 500ms;
  opacity: .7;
  transform: scale(1.05);
}
/* ----- Socials ----- */
.card__info__avatar__socials {
  position: absolute;
  right: -2rem;
  bottom: -0.75rem;
  width: calc(100% + 4rem);
  height: 4rem;
  background-color: var(--primary-clr-600);
  padding-left: 2rem;
  display: none;
  align-items: center;
  gap: 1rem;
}
.card__info__avatar__socials__text {
  color: var(--primary-clr-400);
  text-transform: uppercase;
  letter-spacing: 0.375rem;
}
/* Classes to add interactivity with JS */
.flex {display: flex;} /* This class is also used as a utility class */

.share-btn.active {
  color: var(--white);
  background-color: var(--primary-clr-500);
  margin-top: 0.25rem;
  transform: rotate(180deg);
  transition: 500ms;
}
/* ----- Footer ----- */
.footer {
  font-size: 0.6875rem;
  text-align: center;
  margin-top: 2rem;
}
/* ----- Responsiveness ----- */
@media (min-width: 55.5rem) {
  .card {
    width: 45.625rem;
    height: 17.5rem;
    overflow: unset;
    display: flex;
  }
  .card__img {
    width: 17.8125rem;
    height: 100%;
    background-position: center left;
    border-radius: .75rem 0 0 .75rem;
  }
  .card__info {
    width: calc(100% - 17.8125rem);
    padding: 2.25rem 2.25rem 2rem;
  }
  .card__info__title {
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .card__info__text {
    line-height: 1.35;
    padding-bottom: 1.375rem;
  }
  .card__info__avatar__socials {
    right: -6.75rem;
    bottom: 3.625rem;
    max-width: 15.5rem;
    height: 3.625rem;
    border-radius: .75rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
    padding-left: 0;
    justify-content: center;
  }
  .triangle {
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--primary-clr-600);
    transform: rotate(45deg);
    position: absolute;
    bottom: -0.5rem;
    /* 
    If you are trying to figure out why the triangle is centered it is because it's inherited 
    by its parent (card__info__avatar__socials), I'm saying this because at some point 
    I couldn't understand why it was centered lol. 
    Hope this comment helps someone who's reading my code.
    */
  }
}