:root {
  --clr-dark-grayish-blue: rgb(72, 85, 106);
  --clr-desaturated-dark-blue: rgb(109, 127, 151);
  --clr-grayish-blue: rgb(158, 175, 194);
  --clr-light-grayish-blue: rgb(236, 242, 248);

  --ff: "Manrope", sans-serif;

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

  --fs-paragraph: 0.9rem;

  --fluid-intro-text: clamp(1.1875rem, 1.0606rem + 0.4615vw, 1.3rem);
}

* {
  padding: 0;
}

body {
  padding: 1.5rem;
  background-color: var(--clr-light-grayish-blue);

  display: grid;
  place-items: center;
}

main {
  display: flex;

  background-color: white;
  color: var(--clr-dark-grayish-blue);
  border-radius: 0.75rem;
  box-shadow: 0 0 16px 20px rgba(0, 0, 0, 0.03);

  font-family: var(--ff);

  max-width: 50rem;
}

.article-image {
  max-width: 20rem;
  object-fit: cover;
  object-position: left;
  border-radius: 0.75rem 0 0 0.75rem;
}

.article-body-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 3rem 1rem 3rem;
}

.article-intro-text {
  font-weight: 700;
  font-size: var(--fluid-intro-text);
}

.article-text {
  font-weight: var(--fw-500);
  font-size: var(--fs-paragraph);
  color: rgba(72, 85, 106, 0.8);
}

.article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 84px;
  border-radius: 0 0 0.75rem 0.75rem;

  padding: 1rem 3rem 2rem 3rem;
}

.author-details {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

.avatar {
  max-width: 2.5rem;
  border-radius: 50%;
}

.details-text {
  margin-left: 1rem;
  font-size: 0.9rem;
}

.author-name {
  font-weight: var(--fw-700);
}

.upload-date {
  color: var(--clr-grayish-blue);
  font-weight: var(--fw-500);
}

.share-button {
  margin-left: auto;

  border: none;
  padding: 0.75rem;
  border-radius: 50%;
  background-color: var(--clr-light-grayish-blue);
  cursor: pointer;

  transition: all 0.25s ease-in-out;

  &:hover {
    background-color: var(--clr-grayish-blue);

    & svg path {
      fill: var(--clr-light-grayish-blue);
    }
  }

  &:active {
    background-color: var(--clr-desaturated-dark-blue);
  }
}

@media (max-width: 720px) {
  main {
    flex-direction: column;
  }

  .article-image {
    max-width: none;
    max-height: 20rem;
  }

  .article-footer {
    padding-bottom: 1rem;
  }
}