/* Stile generale per il corpo della pagina */
body {
	font-family: Arial, sans-serif; /*Imposta un font leggibile */
	margin: 0; /* Rimuove il margine predefinito del body */
	padding: 0; /* Rimuovere il padding predefinito del body */
	background-color: #f4f4f4; /* Sfondo grigio chiaro */
	color: #333; /* Colore del testo */
	display: flex; /* utilizza Flexbox per il layout generale */
	flex-direction: column; /*Dispone gli elementi (header, main, footer) in verticale */
	min-height: 100vh; /* Assicura che il corpo sia almeno alto quanto la finestra */
}

/* Intestazione */
header { 
	background-color: #007bff; /* Sfondo blu */ 
	color: white; /* Colore del testo bianco */
	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: white; /* Sfondo bianco per contrastare */
	margin: 20px auto; /* Spazio sopra e sotto e centrato orizzontalmente */
	width: 60%; /* Larghezza del contenitore */
	padding: 20px; /* Spazi interni */
	border-radius: 10px; /* Angoli arrotondati */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Effetto ombra per dare profondità */
}

/* 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 al contenitore mantenedo le proporzioni */
	margin-bottom: 10px; /* Spazio sotto l'immagine */
}

/* Competenze - Contenitore della sezione competenze */
.competenze {
	background: #e7f3ff; /* Sfondo azzurro chiaro */
	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 */
}

/* 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: #007bff; /* Sfondo blu per ogni competenza */
	color: white; /* Testo bianco */
	margin: 5px 0; /* Spazio tra gli elementi della lista */
	padding: 10px; /* Spazi interni */
	border-radius: 5px; /* Angoli arrotondati */
	text-align: center; /* Centra il testo all'interno */
}

/* Footer - Sezione a fondo pagina */
footer {
	text-align: center; /* Centra il contenuto del footer */
	padding: 10px; /* Spazi interni sopra e sotto */
	background: #333; /* Sfondo grigio scuro */
	color: white; /* Testo bianco */
	margin-top: auto; /* Spinge il footer verso il fondo se c'è poco contenuto sopra */
}

/* 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 interni sopra/sotto e sinistra/destra */
	background: #0073e6; /* Sfondo blu */
	color: white; /* Testo bianco */
	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 del mouse */
}

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

/* Regole responsive per schermi più piccoli */
@media (max-width; 768px) {
	.profilo, .competenze {
		width; 90%; /* Aumenta la larghezza del contenitore su schermi più piccoli */
}
	
.immagine-profilo {
	width: 120px; /* Riduce la larghezza dell'immagine su schermi più piccoli */
	height: 120px; /* Riduce l'altezza dell'immagine su schermi più piccoli */
}

.download-btn {
	padding: 8px 15px; /* Riduce il padding del pulsante */
	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: #555; /* Colore predefinito delle icone */
	transition: color o.3s;
}

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