:root {
  /* Backgrounds */
  --primary-color: hsl(47, 88%, 63%);
  --card-bg: hsl(0, 0%, 100%);

  /* Fonts */
  --title-color: hsl(0, 0%, 7%);
  --card-font: hsl(0, 0%, 42%);
  --frontend-mentor: hsl(228, 45%, 44%);

  /* padding & gap */
  --padding-md: 1rem;
  --padding-sm: 0.5rem;

  /* radius */
  --radius-md: 1rem;
  --radius-sm: 0.5rem;
}

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

html {
  font-size: clamp(93.75%, 4vw, 100%);
}

body {
  /* box model */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Visuals */
  background-color: var(--primary-color);
  font-family: "Figtree", sans-serif;
}

main {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Preview Card - Component ---- */
.preview-card {
  display: flex;
  flex-direction: column;
  /* "Be at least 280px, ideally 90% of screen, but never more than 375px" */
  width: clamp(17.5rem, 90%, 20rem);
  padding: var(--padding-md);
  gap: var(--padding-md);

  color: var(--card-font);
  font-weight: 500;
  line-height: 1.5;

  background-color: var(--card-bg);
  border: 1px solid var(--title-color);
  border-radius: var(--radius-md);
  box-shadow: 0.5rem 0.5rem 0 var(--title-color);
}

.preview-card__img {
  display: block;
  max-width: 100%;

  border-radius: var(--radius-sm);
}

.preview-card__category {
  width: fit-content;
  padding: var(--padding-sm);

  font-weight: 800;
  color: var(--title-color);

  background-color: var(--primary-color);
  border-radius: var(--radius-sm);
}

.preview-card__title {
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  color: var(--title-color);
  font-weight: 800;

  transition: color 0.2s ease;
}

.preview-card__title:hover {
  color: var(--primary-color);
}

.preview-card__avatar {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}

.preview-card__author {
  display: flex;
  align-items: center;
  gap: var(--padding-md);

  color: var(--title-color);
  font-weight: 800;
}

/* ---- Footer attribution---- */

.attribution {
  padding: var(--padding-md);
  text-align: center;
  color: var(--title-color);
  font-weight: 800;
}

.attribution a {
  text-decoration: underline;
  color: var(--frontend-mentor);
  text-underline-offset: 2px;
}

.attribution a:hover {
  text-decoration: none;
  background-color: var(--card-bg);
  color: var(--title-color);
}

/* Reduced Motion Accessibility for medical conditions (like epilepsy or vertigo  */
@media (prefers-reduced-motion: reduce) {
  *,
  .preview-card__title {
    transition: none;
  }
}