:root {
  /* Color */
  --yellow: hsl(47, 88%, 63%);
  --gray-950: hsl(0, 0%, 7%);
  --gray-500: hsl(0, 0%, 42%);
  --white: hsl(0, 0%, 100%);

  /* Typography*/

  /* font-family */
  --ff-base: "Figtree", sans-serif;
  
   /* Typography Present*/
  --fs-1: 1.5rem; /* Extra Bold */
  --fs-2: 1rem; /* Medium */
  --fs-3: 0, 875rem; /* Medium/Extra Bold */
  --fs-4: 1.25rem; /*Mobile-Bold */
  --lh-defauld: 150%;
  --ls-defauld: 0px;
  --fw-bold: 800;
  --fw-medium: 500;

  /* Spacing */
  --space-300: 1.5em;
  --space-150: 0.75em;
  --space-100: 0.5em;
  --space-50: 0.25em;

  /*Border - Radius */
  --br-default: 1px solid #000;
  --br-round: 1.25rem;
  --br-roundmd: 0.625rem;
  --br-roundsm: 0.25rem;

  /* box-shodow */
  --box-shadow: 8px 8px 0 0 var(--gray-950);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
   background-color: var(--yellow);
  font-family: var(--ff-base);
 display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-size: var(--fs-2);
 
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
 
}

.card {
  max-width: 24rem;
  min-height: 32.625rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  background-color: var(--white);
  border-radius: var(--br-round);
  padding: var(--space-300);
  border: var(--br-default);
  box-shadow: var(--box-shadow);
}

.blog-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--br-roundmd);
}

.category {
  padding: var(--space-100);
  margin: 0;
  background-color: var(--yellow);
  display: inline-block;
  text-align: center;
  border-radius: var(--br-roundsm);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-defauld);
  color: var(--gray-950);
}

.pDate {
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-defauld);
}
.title {
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-defauld);
}

.title:hover {
  cursor: pointer;
  color: var(--yellow);
}
.description {
  padding: 0;
  margin: 0;
  color: var(--gray-500);
}

.author {
  display: flex;
  align-items: center;
  margin: 0;
}
.author img {
  width: 2rem;
  height: 2rem;
}
.author span {
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-defauld);
  color: var(--gray-950);
  margin: 0.75rem;
}

@media (max-width:375px) {
  .card {
  max-width: 20.4375rem;
  min-height: 31.3125rem;
}

.category {
  padding: var(--space-100);
  margin: 0;
  background-color: var(--yellow);
  display: inline-block;
  text-align: center;
  border-radius: var(--br-roundsm);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-defauld);
  color: var(--gray-950);
}
.pDate {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-defauld);
}

.title {
  font-size: var(--fs-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-defauld);
}

.title:hover {
  cursor: pointer;
  color: var(--yellow);
}

.description {
  font-size: 0.875rem;
  padding: 0;
  margin: 0;
  color: var(--gray-500);
}
  
}