:root {
/* colors */  
--green: hsl(75, 94%, 57%) ;
--white: hsl(0, 0%, 100%);
--grey-700: hsl(0, 0%, 20%) ;
--grey-800: hsl(0, 0%, 12%) ;
--grey-900: hsl(0, 0%, 8%) ;
/* Font settings */
--font-family-base: 'Inter', sans-serif;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-family-regular);
  background-color: var(--grey-900);
  color: var(--white);
  height: 100vh;
  /* centrare l'intera card */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: var(--grey-800);
  margin-bottom: 24px;
  padding: 24px;
  text-align: center;
  max-width: 375px;
  min-width: 320px; /* larghezza minima, quando vado a restringere lo schermo si desktop */
  border-radius: 8px;
}

.avatar img {
  border-radius: 50%;
  width: 80px;
  height: auto;
}

.title {
  font-weight: var(--font-weight-regular);
  font-size: 12px;
}

.title .location {
  color: var(--green);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
}

.location {
  margin-bottom: 30px;
}

p {
  font-size: 12px;
}

.links {
  display: flex;
  flex-direction: column;
  font-weight: var(--font-weight-regular);
}

.links a {
  display: inline-block; /* ogni link è un "blocco" ma resta sulla stessa riga */
  color: var(--white);
  margin: 6px;
  padding: 12px;
  max-width: 280px;
  border-radius: 8px;
  cursor: pointer;
  background-color: var(--grey-700);
  text-decoration: none; /* rimuove la sottolineatura */
  font-size: 14px;
  font-weight: var(--font-weight-bold);
}

.attribution { 
  font-size: 11px; 
  text-align: center; 
  margin-top: 14px;
  width: 100%;
}

.attribution a { 
  color: hsl(228, 45%, 44%); 
}