/* Fonts */

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

/* Custom Properties */

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

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

  --fw-500: 500;
  --fw-800: 800;

  --border-radius: 1em;
  --box-shadow: 0.5em 0.5em black;
  --border: solid 1px;
}

/* Style Reset */

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

h1,
h2,
h3,
h4,
h5,
h6,
p,
body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Styling  */

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background: var(--clr-yellow-400);
  font-family: var(--ff-body);
}

.h2 {
  font-size: 1.5em;
  font-weight: var(--fw-800);
}

.article-card {
  display: flex;
  flex-direction: column;
  max-width: 25em;
  gap: 1.25em;
  padding: 1.5em;
  background: var(--clr-white-100);
  border-radius: var(--border-radius);
  border: var(--border);
  box-shadow: var(--box-shadow);
  font-weight: var(--fw-500);
  line-height: 1.5;
  color: var(--clr-gray-950);
}

.article-card > img {
  border-radius: var(--border-radius);
}

.article-card .tag {
  display: inline-block;
  max-width: fit-content;
  padding: 0.3em 0.9em;
  background: var(--clr-yellow-400);
  border-radius: calc(var(--border-radius) / 4);
  font-weight: var(--fw-800);
}

.article-card .summary {
  color: var(--clr-gray-500);
}

.article-card .author {
  display: flex;
  gap: 0.8em;
  align-items: center;
}

.article-card .author img {
  max-width: 2em;
}

.article-card .author .name {
  font-weight: var(--fw-800);
}

@media (max-width: 25rem) {
  .article-card {
    font-size: 0.8rem;
  }
}

.article-card .title:hover,
.article-card .title:focus,
.article-card .author:hover,
.article-card .author:focus,
.article-card > img:hover,
.article-card > img:focus {
  color: var(--clr-yellow-400);
  cursor: pointer;
}