:root {
  /* Colors: */
  --clr-grey900: #48556a;
  --clr-grey500: #6e8098;
  --clr-grey400: #9daec2;
  --clr-grey200: #ecf2f8;
  --clr-attribution: #3e52a3;

  /* Pixel Sizes: */
  --4px: 0.25rem;
  --8px: 0.5rem;
  --10px: 0.625rem;
  --11px: 0.688rem;
  --12px: 0.75rem;
  --13px: 0.813rem;
  --14px: 0.875rem;
  --16px: 1rem;
  --18px: 1.125rem;
  --20px: 1.25rem;
  --24px: 1.5rem;
  --26px: 1.625rem;
  --28px: 1.75rem;
  --30px: 1.875rem;
  --32px: 2rem;
  --34px: 2.125rem;
  --36px: 2.25rem;
  --38px: 2.375rem;
  --40px: 2.5rem;
  --50px: 3.125rem;
  --60px: 3.75rem;
}

/* 
********************************
SELF-HOSTING FONT:
********************************
*/

/* VARIABLE FONT: */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Bold.woff2") format("woff2"),
    url("/assets/fonts/Manrope-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Medium.woff2") format("woff2"),
    url("/assets/fonts/Manrope-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 
********************************
GLOBAL CSS VALUES:
********************************
*/

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

* {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-weight: inherit;
}

body {
  font-family: "Manrope", sans-serif;
  font-size: var(--13px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12px;

  background-color: var(--clr-grey200);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 
********************************
MAIN:
********************************
*/
.container {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

/* *** CARD MAIN *** */
.card {
  display: flex;
  max-width: 45.63rem;
  height: 17.5rem;
  border-radius: var(--10px);
  background-color: white;

  box-shadow: 0px 40px 40px -10px #c9d5e1;
}

/* Card Left: Picture */
.card-container-img {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  overflow: hidden;
  width: 17.81rem;
}

.card__image {
  object-fit: cover;
  object-position: left;
}

/* Card Right: Text Content */
.card-container-text {
  max-width: 27.81rem;
  padding: var(--30px) var(--40px);
  display: flex;
  flex-direction: column;
  gap: var(--24px);
}
.card__title {
  color: var(--clr-grey900);
  font-size: var(--20px);
  line-height: 1.3;
  letter-spacing: 0.25px;
  font-weight: 700;
}
.card__description {
  color: var(--clr-grey500);
}

/* *** CARD FOOTER *** */
.card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Left card footer */
.card__footer-left {
  display: flex;
  gap: var(--16px);
}
.card__author-avatar {
  border-radius: 50%;
}
.card__author-text-container {
}
.card__author-name {
  color: var(--clr-grey900);
  font-weight: 700;
}
.card__date {
  color: var(--clr-grey400);
}

/* Right card footer */
.card__btn {
  border-radius: 50%;
  border: none;
  width: var(--32px);
  height: var(--32px);
  display: flex;
  justify-content: center;
  align-items: center;

  transition: 0.1s;
}

.card__btn-svg {
  fill: var(--clr-grey500);
}

.card__btn:hover {
  opacity: 75%;
  cursor: pointer;
}

.card__btn:active {
  scale: 0.95;
}

/* Share Menu Component */
.relative {
  position: relative;
}

.share-component {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.063rem var(--38px);
  gap: var(--24px);
  background-color: var(--clr-grey900);
  width: 15.5rem;
  border-radius: var(--10px);

  position: absolute;

  top: -5.313rem;
  left: -6.563rem;

  box-shadow: 0px 10px 10px 0px #c9d5e1;
}
.share-component__text {
  color: var(--clr-grey400);
  text-transform: uppercase;
  letter-spacing: 2.5px;
}
.share-component__social-icons-container {
  display: flex;
  align-items: center;
  gap: var(--16px);
}
.share-component__social-icon:hover {
  opacity: 75%;
}

.share-component::after {
  content: "";
  border-left: var(--12px) solid transparent;
  border-right: var(--12px) solid transparent;

  border-top: var(--12px) solid var(--clr-grey900);

  position: absolute;
  bottom: -0.75rem;
  left: 7rem;
}

/* 
********************************
PAGE FOOTER:
********************************
*/

/*UPDATE VALUES!*/
.attribution {
  text-align: center;
  font-size: var(--12px);
  color: var(--clr-attribution);
  margin-bottom: var(--24px);
}

/* LINKS */
/* Default State */
.attribution a:link {
  color: var(--clr-attribution);
  text-decoration: none;
}

/* Visited State */
.attribution a:visited {
  color: var(--clr-attribution);
}

/* State On Hover / Whilst being clicked */
.attribution a:hover,
.attribution a:active {
  opacity: 75%;
}

/* 
********************************
UTILITY CLASSES:
********************************
*/
.hidden {
  display: none;
}