:root {
  --Yellow: hsl(47, 88%, 63%);
  --White: hsl(0, 0%, 100%);
  --Gray-500: hsl(0, 0%, 42%);
  --Gray-950: hsl(0, 0%, 7%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* may change these values later. */
  /* margin: 0;
  padding: 0; */
}

body {
  padding: 0;
  margin: 0;
  font-family: "Figtree", sans-serif, Arial;
  background: var(--Yellow);
}

/* typography */

p {
  line-height: 1.45;
}

a {
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--Gray-950);
  border-radius: 2px;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.h-full {
  height: 100vh;
}

.card {
  width: clamp(10rem, 86%, 26rem);
  background: white;
  padding: 1.5em;
  box-shadow: 8px 8px 0 1px var(--Gray-950);
}

.rounded {
  border-radius: 1rem;
}

.border-1-black {
  border: 1px solid var(--Gray-950);
}

.article-image {
  width: 100%;
}

.font-bold {
  font-weight: 800;
}

.font-normal {
  font-weight: 500;
}

.margin-2 {
  margin: 1.8em 0 1.2em 0;
}

.tag {
  display: inline-block;
  background: var(--Yellow);
  padding: 0.5em 1em;
  font-size: clamp(0.8rem, 1vw + 0.3rem, 0.9rem);
  border-radius: 0.3em;
}

.heading {
  font-size: clamp(1.4rem, 1vw + 1em, 1.65rem);
}

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

.hover-yellow:focus {
  text-decoration: underline;
}

.text-gray-500 {
  color: var(--Gray-500);
}

.paragraph {
  font-size: clamp(0.98rem, 1vw + 0.4rem, 1.05rem);
}

.time {
  font-size: 0.9rem;
}

.font-500 {
  font-weight: 500;
}

.text-gray-950 {
  color: var(--Gray-950);
}

.circle {
  background: var(--Gray-950);
  border-radius: 100%;
  height: 35px;
  width: 35px;
}

.gap-5 {
  gap: 0.6em;
}

.person {
  margin-top: 2em;
  margin-bottom: 0;
  padding: 0;
}

.attribution {
  font-size: 11px;
  text-align: center;
  margin-bottom: 0.5em;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}