/* Fonts */
@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 100 1000;
}

:root {
  /* Font */
  --font-figtree: "Figtree", sans-serif;

  /* Colors */
  --color-yellow: hsl(47, 88%, 63%);
  --color-gray-500: hsl(0, 0%, 42%);
  --color-gray-950: hsl(0, 0%, 7%);
  --color-white: hsl(0, 0%, 100%);

  /* Spacings */
  --space-50: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-300: 24px;
}

/* General */
body {
  font-family: var(--font-figtree);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0px;
  background-color: var(--color-yellow);
  color: var(--color-gray-950);
  font-size: 12px;
}

/* Main */
main {
  height: 100vh;
  display: grid;
  place-items: center;
}

/* Card */
.card {
  background-color: var(--color-white);
  width: 327px;
  border-radius: 20px;
  padding: var(--space-300);
  border: 1px solid var(--color-gray-950);
  box-shadow: 8px 8px 0 hsl(0, 100%, 0%);
}

/* Card Illustration */
.card__illustration {
  border-radius: 10px;
}

/* Card Content */
.card__content {
  margin: var(--space-300) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
}

.card__tag {
  background-color: var(--color-yellow);
  padding: var(--space-50) var(--space-150);
  border-radius: 4px;
  font-weight: 800;
  width: min-content;
}

.card__date {
  font-weight: 500;
}

.card__header {
  font-weight: 800;
  font-size: 20px;
}

.card__header:focus,
.card__header:active,
.card__header:hover,
.card__header:invalid {
  color: var(--color-yellow);
  cursor: pointer;
}

.card__paragraph {
  color: var(--color-gray-500);
  font-size: 14px;
}

/* Card Author */
.card__author {
  display: flex;
  align-items: center;
  gap: var(--space-100);
}

.card__author-avatar {
  width: 32px;
  height: 32px;
}

.card__author-name {
  font-weight: 800;
  font-size: 14px;
}

/* Footer Attribution */
.attribution {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  text-align: center;
  color: var(--color-gray-500);
}

.attribution a {
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s ease;
  color: var(--color-gray-950);
}

.attribution a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

@media only screen and (min-width: 1440px) {
  body {
    font-size: 14px;
  }

  .card {
    width: 384px;
  }

  .card__header {
    font-size: 24px;
  }

  .card__paragraph {
    font-size: 16px;
  }
}