:root {
  --main-yellow: hsl(47, 88%, 63%);
  --box-shadow-color: black;
  --main-color: hsl(0, 0%, 7%);
  --secondary-color: hsl(0, 0%, 42%);

  --title-font-size: 24px;
  --smaller-title-font-size: 20px;
  --even-smaller-title-font-size: 16px;

  --paragraph-font-size: 16px;
  --smaller-paragraph-font-size: 14px;
  --even-smaller-paragraph-font-size: 12px;

  --secondary-font-size: 14px;
  --smaller-secondary-font-size: 12px;
  --even-smaller-secondary-font-size: 10px;

  --extra-bold-font-weight: 800;
}

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

html {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  line-height: 150%;
  font-size: var(--paragraph-font-size);
}

body {
  background-color: var(--main-yellow);
}

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.blog-card {
  max-width: 384px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-style: solid;
  border-radius: 20px;
  border-color: var(--main-color);
  border-width: 1px;
  box-shadow: 8px 8px 0px var(--box-shadow-color);
  background-color: white;
}

.blog-card-image {
  border-radius: 10px;
  max-width: 100%;
}

.blog-card-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-card-categories ul {
  list-style-type: none;
}

.blog-card-categories li {
  display: inline-block;
  background-color: var(--main-yellow);
  border-radius: 4px;
  max-width: fit-content;
  padding: 4px 12px;
  font-weight: var(--extra-bold-font-weight);
  font-size: var(--secondary-font-size);
}

.blog-card-publish-date {
  font-size: var(--secondary-font-size);
}

.blog-card-title {
  font-size: var(--title-font-size);
  font-weight: var(--extra-bold-font-weight);
  transition: color 0.2s ease;
}

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

.blog-card-description {
  color: var(--secondary-color);
}

.blog-card-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-card-author img {
  max-width: 32px;
}

.blog-card-author p {
  font-size: var(--secondary-font-size);
  font-weight: var(--extra-bold-font-weight);
}

@media screen and (max-width: 320px) {
  html {
    font-size: var(--smaller-paragraph-font-size);
  }

  .blog-card-title {
    font-size: var(--smaller-title-font-size);
  }

  .blog-card-categories p,
  .blog-card-publish-date,
  .blog-card-author p {
    font-size: var(--smaller-secondary-font-size);
  }
}

@media screen and (max-width: 210px) {
  html {
    font-size: var(--even-smaller-paragraph-font-size);
  }

  .blog-card-title {
    font-size: var(--even-smaller-title-font-size);
  }

  .blog-card-categories p,
  .blog-card-publish-date,
  .blog-card-author p {
    font-size: var(--even-smaller-secondary-font-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}