:root {
  --bg-color-primary: hsl(47, 88%, 63%);
  --bg-color-secondary: hsl(0, 0%, 100%);
  --rounded-md: 10px;
  --bold-lg: 800;
  --bold-md: 500;
}

@font-face {
  font-family: 'Figtree';
  src: url("/assets/fonts/Figtree-VariableFont_wght.ttf")
}

body {
  margin: 0;
  font-family: 'Figtree';
}

.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  min-height: 100vh;

  background-color: var(--bg-color-primary);
}

.blog-tile {
  max-width: 20rem;
  background-color: var(--bg-color-secondary);
  border: 2px solid;
  border-radius: var(--rounded-md);
  padding: 20px;

  img {
    width: 100%;
    border-radius: inherit;
  }

  .category-container {
    background-color: var(--bg-color-primary);
    width: min-content;
    padding: 5px 10px;
    font-weight: var(--bold-lg);
  }

  .pub-date-container {
    font-weight: var(--bold-md);
  }

  h2 {
    font-weight: var(--bold-lg);
    cursor: pointer;

    &:hover {
      color: var(--bg-color-primary);
    }
  }

  .small-paragraph {
    color: hsl(0, 0%, 42%);
  }

  .avatar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: var(--bold-lg);

    img {
      width: 3em;
    }
  }
}

footer {
  font-size: 0.8rem;
  text-align: center;
  padding-bottom: 10px;
}

footer a {
  color: hsl(228, 45%, 44%);
}