:root {
  --clr-primary: hsl(47, 88%, 63%);

  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-600: hsl(0, 0%, 50%);
  --clr-neutral-800: hsl(0, 0%, 7%);

  --ff-regular: "Figtree", sans-serif;

  --fs-200: 0.75rem;
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5rem;

  --fw-normal: 500;
  --fw-bold: 800;

  --br-small: 4px;
  --br-medium: 10px;
  --br-large: 20px;
}

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

* {
  margin: 0;
}

body {
  color: var(--clr-neutral-800);
  font-family: var(--ff-regular);
  font-size: var(--fs-300);
  font-weight: var(--fw-normal);
  line-height: 1.5;
}

main {
  background-color: var(--clr-primary);

  min-height: 100vh;
  align-content: center;
}

.grid-flow {
  display: grid;
  gap: 1.5rem;
}

.grid-flow[data-item-spacing="small"] {
  justify-items: flex-start;
  gap: 0.75rem;
}

.blogcard {
  background-color: var(--clr-neutral-100);
  border: 2px solid var(--clr-neutral-600);
  border-radius: var(--br-large);
  box-shadow: 8px 8px 0px 0px var(--clr-neutral-800);
  width: min(87%, 384px);
  margin: auto;
  padding: 1.4rem;
  overflow: hidden;

  &:has(.title:hover) {
    box-shadow: 10px 10px 0px 0px var(--clr-neutral-800);
  }
}

.blogimage {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--br-medium);
}

.category {
  display: inline-block;
  background-color: var(--clr-primary);
  border-radius: var(--br-small);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  padding: 0.25rem 0.75rem;
}

.publishdate {
  font-size: var(--fs-200);
  font-weight: var(--fw-normal);
}

.title {
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);

  &:hover {
    color: var(--clr-primary);
    cursor: pointer;
  }
}

.description {
  color: var(--clr-neutral-600);
}

.author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.userpic {
  width: 32px;
  height: 32px;
}

.authorname {
  color: var(--clr-neutral-800);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
}

@media (min-width: 800px) {
  body {
    font-size: var(--fs-400);
  }

  .category,
  .publishdate {
    font-size: var(--fs-300);
  }

  .title {
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
  }
}