body {
	
	
	
	
	
	
font-family: "Roboto", sans-serif;
    background-color: white;
    color: #333;
   text-align: center; 
margin: 20px;
	
    font-size: 1rem; /* Aggiungi questa riga per impostare la dimensione base del font */
}


html {
    font-size: 100%; /* Imposta la dimensione base del font */
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}




header {
    background-color: #007bff;
    padding: 10px;
}

footer {

    background-color: #007bff;

padding: 10px;

}

nav a {
    color: white;
    text-decoration: none;
}

nav.abc {
    color: white;
    text-decoration: none;
}


span.abcd {color: #007bff}
/*
main {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}*/

main {
    max-width: 90%;  /* Imposta il 90% della larghezza dello schermo */
    margin: 5% auto; /* Aggiungi uno spazio di margine del 5% rispetto alla larghezza */
   padding: 2rem;   /* Usa rem per il padding (che si adatterà alla dimensione del testo) */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/* SCHERMI PICCOLI - Smartphone (fino a 600px) */
@media (max-width: 600px) {
    main {
         max-width: 90%;  /* Imposta il 90% della larghezza dello schermo */
    margin: 5% auto; /* Aggiungi uno spazio di margine del 5% rispetto alla larghezza */
   padding: 2rem;   /* Usa rem per il padding (che si adatterà alla dimensione del testo) */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    }
}

/* SCHERMI MEDI - Tablet (601px - 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    main {
          max-width: 70%;  /* Imposta il 70% della larghezza dello schermo */
    margin: 5% auto; /* Aggiungi uno spazio di margine del 5% rispetto alla larghezza */
   padding: 2rem;   /* Usa rem per il padding (che si adatterà alla dimensione del testo) */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    }
}

/* SCHERMI GRANDI - Laptop/Desktop (1025px - 1600px) */
@media (min-width: 1025px) and (max-width: 1600px) {
    main {
         max-width: 50%;  /* Imposta il 50% della larghezza dello schermo */
    margin: 5% auto; /* Aggiungi uno spazio di margine del 5% rispetto alla larghezza */
   padding: 2rem;   /* Usa rem per il padding (che si adatterà alla dimensione del testo) */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
}

/* SCHERMI EXTRA GRANDI - Monitor Ultra-Wide (oltre 1601px) */
@media (min-width: 1601px) {
    main {
         max-width: 40%;  /* Imposta il 38% della larghezza dello schermo */
    margin: 5% auto; /* Aggiungi uno spazio di margine del 5% rispetto alla larghezza */
   padding: 2rem;   /* Usa rem per il padding (che si adatterà alla dimensione del testo) */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    }
}




input/*, button*/ {
    width: 100%;
    margin: 10px 0;
    padding: 8px;
	text-align: center;
	
}


.button-wrapper {
    text-align: center; /* Centra il contenuto dentro il div */
    margin-top: 10px; /* Aggiunge spazio sopra */
}

button {
    padding: 0.8rem 5rem; /* Aggiunge spazio ai lati */
    display: inline-block; /* Mantiene la larghezza basata sul contenuto */
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}







textarea {
   /* width: calc(100% - 20px);*/ /* Riduce la larghezza per evitare lo sforamento */

	width: 100%;

	/*display: inline-block; */
	
    max-width: 100%; /* Evita che si espanda oltre il contenitore */
    box-sizing: border-box; /* Include padding e bordo nella larghezza totale */
    padding: 8px; /* Aggiunge spazio interno */
    margin: 10px auto; /* Centra il textarea */
    display: block; /* Evita spazi indesiderati */
}





/*
label {
    display: block; *//* Garantisce che i label occupino una riga intera */
   /* font-size: 1.1rem;*/ /* Imposta una dimensione del font uniforme per tutti i label */
   /* margin-bottom: 8px;*/ /* Aggiunge spazio tra il label e gli altri elementi *//*
}*/









/*
textarea {
   
    margin-bottom: 10px; /* Spazio sotto il textarea */
   
   /* box-sizing: border-box; *//* Include il padding nella larghezza *//*
}
*/






/*
input, textarea, button {
    width: 100%;  /* Fa sì che gli input e i bottoni si adattino alla larghezza del contenitore *//*
    margin: 10px 0;
    padding: 1rem; */ /* Usa rem per il padding *//*
}*/

/*
h2 {color: #007bff}
h3 {color: #007bff}*/

h2, h3 {
    color: #007bff;
    font-size: 2rem; /* Usa rem per la dimensione del testo */
}


button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#notRobot {
    margin-top: 10px;
}
/*
footer {
	color:white; 
	font-family: "Source Sans Pro", sans-serif;
	font-size:10px; 
	text-decoration: none;
}*/

footer {
    background-color: #007bff;
    padding: 10px;
    color: white;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.8rem;  /* Usa rem per il font-size (modifica la dimensione per i dispositivi più piccoli) */
    text-decoration: none;
    text-align: center;  /* Centra il testo nel footer */
}



.smalltext {
    font-size: 1.1rem; /* Imposta la dimensione del testo usando rem per la dimensione reattiva */
}

.aligne {
	text-align: center;
   }




/* Wrapper per centrare il pulsante */
.file-upload-wrapper {
    text-align: center; /* Centra il contenuto */
    margin: 20px 0; /* Aggiunge spazio sopra e sotto */
}

/* Nasconde il vero input file */
input[type="file"] {
    display: none;
}

/* Stile del pulsante personalizzato */
.custom-file-upload {
    display: inline-block; /* Impedisce l'espansione a tutta larghezza */
    padding: 0.9rem 1.5rem;
    background-color: #007bff;
    color: white;
    font-size: 1rem;
    border-radius: 0px;
    cursor: pointer;
    text-align: center;
    border: none;
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Effetto hover */
.custom-file-upload:hover {
    background-color: #0056b3;
}

/* Effetto click */
.custom-file-upload:active {
    transform: scale(0.95);
}

/* Stile per dispositivi mobili */
@media (max-width: 768px) {
    .custom-file-upload {
        font-size: 1rem;
        padding: 10px 20px;
    }
}

/* Smartphone (fino a 600px) */
@media (max-width: 600px) {
    .responsive-img {
        max-width: 35%;  /* Ridotta per adattarsi meglio agli schermi piccoli */
    }
}

/* Tablet (601px - 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    .responsive-img {
        max-width: 30%;
    }
}

/* Laptop/Desktop (1025px - 1600px) */
@media (min-width: 1025px) and (max-width: 1600px) {
    .responsive-img {
        max-width: 20%;
    }
}

/* Schermi molto grandi (oltre 1601px) */
@media (min-width: 1601px) {
    .responsive-img {
        max-width: 20%;
    }
}