/* --- STILE DEL MENU (Per renderlo leggibile sopra la foto) --- */
.menu {
    background-color: rgba(0, 0, 0, 0.7); /* Sfondo nero semi-trasparente */
    padding: 15px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.nav ul {
    list-style-type: none; /* Toglie i pallini */
    margin: 0;
    padding: 0;
    text-align: center; /* Centra i link */
}

.nav li {
    display: inline; /* Mette i link in orizzontale */
    margin: 0 20px;
}

.nav a {
    text-decoration: none; /* Toglie la sottolineatura */
    color: white; /* Scritta bianca */
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    transition: color 0.3s;
}

.nav a:hover {
    color: #ffcc00; /* Diventa giallo quando passi il mouse */
}

/* 1. Il contenitore generale */
.home-container {
    display: flex;             /* Attiva il layout flessibile */
    flex-direction: column;    /* Mette gli elementi uno sotto l'altro (colonna) */
    align-items: center;       /* Centra tutto orizzontalmente */
    justify-content: center;   /* Centra tutto verticalmente (se c'è altezza fissa) */
    min-height: 80vh;          /* Occupa almeno l'80% dell'altezza schermo */
    gap: 30px;                 /* Spazio automatico tra Titolo, Foto e Bottone */
    text-align: center;        /* Assicura che il testo sia centrato */
}

/* 2. Stile del Titolo */
.intro h1 {
    font-size: 2.5rem;         /* Grandezza testo */
    color: white;              
    text-transform: uppercase; /* Tutto maiuscolo */
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 2px;       /* Spazia un po' le lettere */
}
body{
background-color:black;	
}

/* 3. Stile dell'Immagine */
.img-box img {
    max-width: 80%;            /* Larghezza massima (modifica se vuoi più piccola) */
    width: 800px;              /* Larghezza ideale (se lo schermo lo permette) */
    height: auto;              /* Mantiene le proporzioni */
    border-radius: 15px;       /* Angoli arrotondati */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Ombra sotto la foto */
}

/* 4. Stile del Bottone (che in realtà è un link <a>) */
.btn-home {
    display: inline-block;
    padding: 15px 40px;        /* Spazio interno (Grasso) */
    background-color: #007bff; /* Colore Blu (o metti quello che vuoi) */
    color: white;              /* Testo bianco */
    text-decoration: none;     /* Toglie la sottolineatura */
    font-size: 1.2rem;         /* Testo grande */
    font-weight: bold;
    border-radius: 50px;       /* Bottone a pillola (molto arrotondato) */
    transition: transform 0.2s, background-color 0.2s; /* Animazione fluida */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* Effetto quando passi sopra col mouse */
.btn-home:hover {
    background-color: #0056b3; /* Blu più scuro */
    transform: scale(1.05);    /* Si ingrandisce leggermente */
}