body {



    font-family: Arial, sans-serif;

    background-image: url('fotohomepage.jpg'); 

    background-size: cover; 

    background-position: center;

    background-repeat: no-repeat;

    min-height: 100vh; 

    color: aliceblue;

    line-height: 1.6;

}



.name {

    text-align: left;

    font-size: 1rem;

    margin: 20px 0;

    padding-left: 33px; 

}





nav {

    margin-left: 10px 0 ; 

    padding: 20px 0;



}



nav ul {

    list-style: none;

    display: flex;

    justify-content: flex-start; 

    padding: 0;

    margin-left: 0px; 

}



nav ul li {

    margin: 0 35px;

}



nav ul li a {

    color: #fff;

    text-decoration: none;

    font-size: 1rem;

}



nav ul li a:hover {

    text-decoration: underline;

}



nav ul li a.active {

    font-weight: 800; 

    text-decoration: none; 

}





h1 {

    font-size: 5rem;

    text-align: left; 

    margin: 0px 0;

    padding-left: 30px; 

    color: aliceblue;

}





h2 {

    font-size: 2.2rem;

    text-align: left;

    color: aliceblue;

    margin-bottom: 20px;

    margin-top: -10px;

    padding-left: 30px;

    

}





.intro {

    position: relative;

    z-index: 2; 

    width: 480px; 

    margin-left: 30px; 

    padding: 0px;

}





.intro p {

    text-align: left;

    padding-left: -150px; 

}



/* Media query per tablet (max-width: 1024px) */

@media (max-width: 1024px) {



    .name{

        padding-left: 15px;

    }



    /* Navbar */

    nav ul li {

        margin: 0 20px; /* Riduce il margine tra gli elementi della navbar */

    }



    nav ul li a {

        font-size: 0.9rem; /* Riduce la dimensione del font */

    }



    /* Titolo principale */

    h1 {

        font-size: 3.5rem; /* Riduce la dimensione del titolo */

        padding-left: 20px; /* Riduce il padding */

    }



    /* Titolo secondario */

    h2 {

        font-size: 1.8rem; /* Riduce la dimensione del sottotitolo */

        padding-left: 20px;

    }



    /* Sezione Intro */

    .intro {

        width: 80%; /* Adatta la larghezza per schermi più piccoli */

        margin-left: 20px; /* Riduce il margine */

    }



    .intro p {

        padding-left: 0; /* Rimuove il padding negativo */

    }

}



/* Media query per dispositivi con larghezza max 768px (tablet e piccoli schermi) */

@media (max-width: 768px) {

    /* Navbar */

    nav ul li {

        margin: 0 15px; /* Riduce ulteriormente il margine */

    }



    nav ul li a {

        font-size: 0.85rem; /* Font più piccolo nella navbar */

    }



    /* Titolo principale */

    h1 {

        font-size: 2.5rem; /* Riduce ulteriormente la dimensione del titolo */

        padding-left: 10px; /* Riduce il padding */

    }



    /* Titolo secondario */

    h2 {

        font-size: 1.5rem; /* Riduce il sottotitolo */

        padding-left: 15px;

    }



    /* Sezione Intro */

    .intro {

        width: 90%; /* Ancora più piccola la larghezza per adattarsi a schermi più piccoli */

        margin-left: 15px; /* Riduce ulteriormente il margine */

    }



    .intro p {

        padding-left: 0; /* Rimuove il padding negativo */

    }

}



/* Media query per dispositivi con larghezza max 480px (smartphone) */

@media (max-width: 480px) {

    /* Navbar */

    nav ul {

        /* La navbar non si imposta più in colonna, resta su una sola riga con scorrimento orizzontale */

        padding: 10px;

    }



    nav ul li {

        margin: 0 10px; /* Riduce ulteriormente il margine */

    }



    nav ul li a {

        font-size: 0.8rem; /* Ancora più piccolo */

    }



    /* Titolo principale */

    h1 {

        font-size: 2rem; /* Riduce la dimensione del titolo */

        padding-left: 10px;

    }



    /* Titolo secondario */

    h2 {

        font-size: 1.2rem; /* Riduce ulteriormente il sottotitolo */

    }



    /* Sezione Intro */

    .intro {

        width: 100%; /* La larghezza diventa 100% per smartphone */

        margin-left: 0; /* Rimuove il margine */

    }



    .intro p {

        padding-left: 0; /* Rimuove il padding negativo */

    }

}