/* Stile generale per il corpo della pagina*/
body {
		font-family: Sans Serif Collection; /* Imposta un font leggibile */
		margin: 0; /* Rimuove il margine predefinito del body */
		padding: 0; /* Rimuove il padding predefinito del body */
		background-color: #CFC7D2; /* Sfondo grigio francese */
		color: #000000; /* Colore del testo */
		display: flex; /* Utilizza Flexbox per il layout generale */
		flex-direction: column; /* Dispone gli elementi (heater, main, footer) in verticale */
		min-height: 100vh; /* Assicura che il corpo sia almeno alto quanto la finestra */

}
/* Stile del menù di navigazione */
nav {
	background-color: #CFC7D2; /* Sfondo grigio francese */
	padding: 10px 0; /* Spazi interni sopra e sotto */
	text-align: center; /* Centra il menù */
}
	nav ul {
		list-style: none; /* Rimuove i pallini della lista */
		padding: 0;
		margin: 0;
		display: flex; /* Dispone gli elementi in orizzontale */
		justify-content: center; /* Centra gli elementi del menù */
	}
		
		nav ul li{
			margin: 0 15px; /* Spezio tra gli elemti del menù */
		}

			nav ul li a {
				color: #000000; /* Testo nero */
				text-decoration: none; /* Rimuove la sottolineatura del link */
				font-size: 18px; /* Dimensione del testo */
				font-weight: bold; /* Testo in grassetto */
				transition: color 0.3s; /* Effetto di transizione del colore */
			}

				nav ul li a:hover {
					color: #9E9885; /* Cambia colore al passaggio del mouse */ 
				}

/* Intestazione */
header {
	background-color: #BEA8AA; /* Sfondo quarzo rosa */
	color: #000000; /* Colore del testo */
	text-align: center; /* Centra il contenuto */
	padding: 20px 0; /* Spazi interni sopra e sotto */
}

/* Profilo - Contenitore della sezione profilo */
.profilo {
	text-align: center; /* Centra il testo all'interno */
	background: #FFFFFF; /* Colore del testo bianco */
	margin: 20px auto; /* Spazio sopra e sotto e centrato orizzontalmente */
	width: 60%; /* Larghezza del contenitore: 60% della pagina */
	padding: 20px; /* Spazi interni */
	border-radius: 10px; /* Angoli arrotondati */
	box-shadow: 0 4px 8px rgba (0, 0, 0, 0.1); /* Effetto ombra per dare profondita' */
}

/* Immagine del profilo */
.immagine-profilo {
	border-radius: 50%; /* Trasforma l'immagine in un cerchio */
	width: 150px; /* Larghezza dell'immagine */
	height: 150px; /* Altezza dell'immagine */
	object-fit: cover; /* Adatta l'immagine */
	margin-bottom: 10px; /* Spazio sotto l'immagine */
}

/* Competenze - Contenitore della sezione competenze */
.competenze {
	background: #9E9885; /* Sfondo cachi */
	padding: 20px; /* Spazi interni */
	margin: 20px auto; /* Spazio sopra e sotto e centrato orizzontalmente */
	width: 60%; /* Larghezza del contenitore: 60% della pagina */
	border-radius: 10px; /* Angoli arrotondati */
	text-align: center; /* Centra il testo all'interno */
} 

/* Lista delle competenze */
.competenze ul {
	list-style-type: none; /* Rimuove i punti elenco predefiniti */
	padding: 0; /* Rimuove il padding della lista */
}

/* Elementi della lista delle competenze */
.competenze li {
	background:#7C7F65; /* Sfondo verde reseda per ogni competenza */
	color: #FFFFFF; /* Testo bianco */
	margin: 5px 0; /* Spazio tra gli elementi della lista */
	padding: 10px; /* SPazi interni */
	border-radius: 5px; /* Angoli arrotondati */
}

/* Footer - Sezione a fondo pagina */
footer {
	text-align: center; /* Centra il contenuto del footer */
	padding: 10px; /* Spazi interni sopra e sotto */
	background: #BEA8AA; /* Sfondo quarzo rosa */
	color: #000000; /* Colore del testo */
	margin-top: auto; /* Spinge il footer verso il fondo se c'è poco contenuto sopra */
}
footer a.mail {
	color: #000000; /* Colore e-mail */
}

/* Pulsante di download del curriculum */
.download-btn {
	display: inline-block; /* Trasforma il pulsante in un elemento in linea con comportamento a blocco */
	padding: 10px 20px; /* Spazi inteni sopra/sotto e sinistra/destra */
	background: #9E9885; /* Sfondo cachi */
	color: #000000; /* Colore del testo */
	border-radius: 5px; /* Angoli arrotondati */
	text-decoration: none; /* Rimuove la sottolineatura del link */
	margin-top: 15px; /* Spazio sopra il pulsante */
	transition: background 0.3s ease; /* Effetto transizione per il passaggio delmouse */
}

/* Effetto al passagio del mouse sul pulsante */
.download-btn:hover {
	background: #BEA8AA; /* Cambia il colore di sfondo quando il mouse passa sopra */
}

/* Regole responsive per schermi piu' piccoli */
@media (max-width: 768px) {
		.profilo, .competenze {
			width: 90%; /* Aumenta la larghezza del contenitore su schermi piu' piccoli */
		}

		.immagine-profilo {
			width: 120px; /* Riduce la larghezza dell'immagine su schermi piu' piccoli */
			height: 120px; /* Riduce l'altezza dell'immagine su schermi piu' piccoli */
		}

		.download-btn {
			padding: 8px 15px; /* Riduce il padding del pilsante */
			font-size: 0.9em; /* Riduce la dimensione del testo del pulsante */
		}
}

.social-icons {
	margin-top: 10px;
	display: flex;
	justify-content: center;
	gap: 15px;
}

.social-link {
	text-decoration: none;
	font-size: 24px;
	color: #000000; /* colore delle icone */
	transition: color 0.3s;
}

.social-link:hover {
	color: #9E9885; /* Cambia colore quando passi sopra l'icona */ 
}


/* Contatti - Contenitore della sezione contatti */
.container {
	width: 60%; /* Larghezza del contenitore: 60% della pagina */	
	margin: 40px auto; /* Spazio sopra e sotto e centrato orizzontalmente */
	background: #FFFFFF; /* Colore del testo bianco */
	padding: 30px; /* Spazi interni */
	border-radius: 10px; /* Angoli arrotondati */
	box-shadow: 0 4px 8px rgba (0, 0, 0, 0.1); /* Effetto ombra per dare profondita' */
	text-align: center; /* Centra il testo all'interno */
}

	.container p {
		color: #000000; /* Testo nero */
		font-size: 16px; /* Dimensione del testo */
		margin-bottom: 20px; /* Spazio sotto il paragrafo */
	}

/* Stile form di contatto */
form {
	display: flex;
	flex-direction: column; /* Dispone gli elementi in verticale */
	align-items: center; /* Centra gli elementi orizzontalmente */
	width: 100%; /* LArghezza del form */
}

	form label {
		font-weight: bold; /* Rende il testo del label in grassetto */
		margin-top: 10px; /* Spazio sopra il label */
		display: block; /* Forza il label a stare sopra il campo */
		text-align: left;
		width: 80%
	}

	/* Stile dei campi di imput e textarea */
	form input,
	form textarea {
		width: 80%; /* Larghezza del campo */
		padding: 10px; /* Spaziatura interna */
		margin: 5px 0 15px; /* Spazio tra i campi */
		border: 1px solid #000000; /* Bordo sottile nero */
		border-radius: 5px; /* Angoli arrotondati */
		font-size: 16px; /* Testo più leggibile */
	}

	/* Stile del bottone */
	form button {
		background: #9E9885; /* Sfondo cachi */
		color: #000000; /* Colore del testo */
		border: none;
		padding: 12px 20px;
		cursor: pointer;
		border-radius: 5px;
		font-size: 16px;
		font-weight: bold;
		transition: background 0.3s;
		width: 80%
	}

		form button:hover {
			background: #BEA8AA; /* Cambia il colore di sfondo quando il mouse passa sopra */
		}

	/* Responsive design (per schermi piccoli) */
@media (max-width: 768px) {
	.container {
		width: 90%; /* Aumenta la larghezza su schermi piccoli */
		padding: 20px;
	}

	form input,
	form textarea,
	form button {
		width: 100%; /* Massima larghezza sui dispositivi mobili */
	}
}