:root {
  --clr-white: #fff;
  --clr-black: #000;
  --clr-grey-900: #48556A;
  --clr-grey-500: #6E8098;
  --clr-grey-400: #9DAEC2;
  --clr-grey-200: #ECF2F8;

  /* Text */
  --txt-1: 1.25rem;
  --txt-2: 0.8125rem;
  --txt-3-spacing: 25%;

  /* Spacing */
  --spg-0: 0px;
  --spg-200: 16px;
  --spg-300: 24px;
  --spg-400: 32px;
  --spg-500: 40px;
  --spg-600: 48px;
  --spg-700: 56px;
  --spg-800: 64px;
  --spg-1300: 104px;
  --spg-2000: 160px;
}

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

body {
  margin: 0;
  padding: 2rem;
  background-color: var(--clr-grey-200);
  min-height: 100vh;
  min-height: 100svh;
  font-family: "Manrope", sans-serif;
  
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--spg-200) 0;
}

p,
h1 {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

article {
  background-color: var(--clr-white);
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 40px 40px -10px rgba(201, 213, 225, 0.50);
  max-width: clamp(22rem, 70vw, 29rem);

  position: relative;
}

.article-body {
  padding: var(--spg-400);
}

.article-profile {
  display: flex;
  align-items: center;
}

.article-profile img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

h1 {
  font-size: var(--txt-1);
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-grey-900);
}

.article-body > p {
  font-weight: 500;
  font-size: var(--txt-2);
  line-height: 1.4;
  color: var(--clr-grey-500);
  margin-top: var(--spg-300);
  margin-bottom: var(--spg-600);
}

.article-author p {
  font-size: var(--txt-2);
  font-weight: 700;
  color: var(--clr-grey-900);
  margin-left: var(--spg-200);
}

.article-author .time {
  font-size: var(--txt-2);
  font-weight: 500;
  color: var(--clr-grey-500);
}

.article-profile .share-icon {
  margin-left: auto;
}

.article-share-popup {
  background-color: var(--clr-grey-900);
  display: none;
  align-items: center;
  padding: 1rem 2rem;
  height: 4.75rem;
  
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.article-share-popup p {
  text-transform: uppercase;
  color: var(--clr-grey-400);
  letter-spacing: 0.2rem;
  margin-right: var(--spg-300);
}

.popup-icons {
  display: flex;
  gap: var(--spg-200);
  align-items: center;
}

.popup-share-icon {
  margin-left: auto;
}




@media (min-width: 48rem) {
  
  article {
    max-width: 38rem;
    display: flex;
  }

  article img {
    max-width: 17rem;
  }

  .popup-share-icon {
    display: none;
  }
  
  .share-icon {
    anchor-name: --popup;
  }
  
  .article-share-popup {
    position-anchor: --popup;
    height: auto;
    position: fixed;
    inset: initial;
    
    /* Hacky solution for firefox polyfill */
    --anchor-position: anchor(--popup 0%);
    --left-position: calc(var(--anchor-position) - 102px);

    left: var(--left-position);
    bottom: anchor(top);
    justify-self: anchor-center;
    margin-block-end: var(--spg-300);
    border-radius: 10px;

    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  }
  
  .article-share-popup::after {
    content: " ";
    --tail-position: 50%;
    --tail-height: 12px;
    border-top: var(--tail-height) solid var(--clr-grey-900);

    border-left: var(--tail-height) solid transparent;
    border-right: var(--tail-height) solid transparent;

    position: absolute;
    bottom: calc(-1 * var(--tail-height));
    left: calc((var(--tail-position)) - var(--tail-height));
    
  }
}


@media (min-width: 90rem) {
  
  article {
    max-width: 45.625rem;
  }
  
  article img {
    max-width: 20rem;
    object-fit: cover;
    object-position: left;
  }

}