:root {
  --clr-yellow: hsl(47, 88%, 63%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-gray-500: hsl(0, 0%, 42%);
  --clr-gray-950: hsl(0, 0%, 7%);
  --paragraph-fnt-sz: 1rem;
  --fnt-family: Figtree;
  --fnt-500: 500;  
  --fnt-800: 800;  
  
}

* {
  box-sizing: border-box;
  margin: 0;
}

/* @font-face {
  font-family: 'Figtree';
  src: url();
} */

body {
  background-color: var(--clr-yellow);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow-y: hidden; */
  font-family: var(--fnt-family);
}

.card {
  background-color: var(--clr-white);
  width: 384px;
  height: auto;
  padding: 1.5rem;
  border-radius: 20px;

  border: 1px solid var(--clr-gray-950);
  box-shadow: 8px 8px 0px;
}

.learning {
  background-color: var(--clr-yellow);
  width: fit-content;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: var(--fnt-800);
  line-height: 1.5em;
  letter-spacing: 0px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
}

.card__image {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

div.content p:nth-child(2) {
  width: fit-content;
  color: var(--clr-gray-950);
  font-weight: var(--fnt-500);
  font-size: 0.875rem;
  line-height: 1.5em;
  letter-spacing: 0px;
}

div.content p:last-child {
  font-size: 1rem;
}

.title-link {
  /* color: var(--clr-gray-950); */
  text-decoration: none;
  font-weight: var(--fnt-800);
  font-size: 1.5rem;
  color: var(--clr-gray-950);
  line-height: 1.5em;
  letter-spacing: 0px;
}

.title-link:hover,
.title-link:active,
.title-link:focus {
  color: var(--clr-yellow);
  cursor: pointer;
}

.author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.5rem;
  /* padding-bottom: 1.5rem; */
  font-weight: var(--fnt-800);
  font-size: 0.875rem;
  line-height: 1.5em;
  letter-spacing: 0px;
}

.author img {
  width: 32px;
  height: 32px;
}