/* -------------------- */
/* --- VARIABILI CSS ---*/
/* -------------------- */
:root {
  /* Colori */
  --white: hsl(0, 0%, 100%);
  --light-gray: hsl(212, 45%, 89%);
  --grayish-blue: hsl(216, 15%, 48%);
  --dark-blue: hsl(218, 44%, 22%);
  --accent-blue: hsl(228, 45%, 44%);

  /* Font */
  --font-family-default: "Outfit", sans-serif;

  /* Spaziature standard */
  --radius-card: 1.25rem; /* 20px */
  --radius-img: 0.625rem; /* 10px */
  /* --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.1); */
  --padding-card: 1rem;
}

/* -------------------------- */
/* --- RESET E STILI BASE ---*/
/* -------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%; /* base per rem */
}

body {
  font-family: var(--font-family-default);
  background-color: var(--light-gray);
  font-size: 0.9375rem; /* 15px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  line-height: 1.6;
}

/* -------------------- */
/* --- COMPONENTE CARD ---*/
/* -------------------- */
.card {
  background-color: var(--white);
  max-width: 320px;
  padding: var(--padding-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  margin-bottom: 2rem;
}

.card img {
  width: 100%;
  border-radius: var(--radius-img);
  display: block;
}

.card-content {
  padding: 1.5rem 0.5rem;
}

.card-content h1 {
  color: var(--dark-blue);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.card-content p {
  color: var(--grayish-blue);
  line-height: 1.6;
  letter-spacing: 0.2px;
}

/* -------------------- */
/* --- ATTRIBUZIONE ---*/
/* -------------------- */
.attribution {
  font-size: 0.6875rem; /* 11px */
  text-align: center;
  padding: 0 1rem;
  word-break: break-word;
  max-width: 100%;
}

.attribution a {
  color: var(--accent-blue);
  text-decoration: none;
}