/*

| Colore             | Codice HEX | Utilizzo consigliato                   |
| ------------------ | ---------- | -------------------------------------- |
| **Bordeaux Scuro** | `#2C0E18`  | Sfondo principale (dark mode elegante) |
| **Blu Notte**      | `#0D1B2A`  | Variante alternativa per sfondo        |
| **Grigio Fumo**    | `#2E2E2E`  | Elementi secondari, linee di contorno  |
| **Oro Desaturato** | `#C1A875`  | Accenti line art, decorazioni minimal  |
| **Bianco Sporco**  | `#F2F2F2`  | Testi o elementi a forte contrasto     |
| **Grigio Azzurro** | `#8FA9C9`  | Alternativa più fredda per dettagli    |

*/

:root {
  --primary: #2C0E18;
  --secondary: #0D1B2A;
  --details: #C1A875;
  --details-cold: #8FA9C9;
  --borders: #2E2E2E;
  --light-bg: #f4f4f4;
  --cta-hover: #2E2E2E;
  --font-main: 'Open Sans', sans-serif;
  --font-color-main: #F2F2F2;
  --font-color-secondary:#2E2E2E;
}

body {
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  background: var(--primary);
  color: var(--font-color-main);
}

.hero {
  background: url('../img/hero.png') no-repeat center / cover;
  color: var(--font-color-main);
  padding: 10rem 2rem;
  text-align: center;
}

.bio, .progetti, .contatto {
  padding: 3rem 2rem;
  /*max-width: 960px; rimosso momentaneamente per garantire full width*/
  margin: auto;
}

.progetti {
    background-color: var(--secondary);
}

.progetto {
  margin-bottom: 2rem;
}

.progetto img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.btn {
  display: inline-block;
  background: var(--details);
  color: var(--font-color-secondary);
  border-color:var(--borders);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
}

.btn:hover {
  background: var(--details-cold);
  border-color: var(--details);
}