@charset "utf-8";
/* CSS Document */
/*-----------------------------------PULSANTI TOP----------------------------------*/
#top_uno{
	background-color: #ff992b; /* Colore di sfondo del pulsante */
    border: 1px solid #ff992b; /* Bordo */
    border-radius: 5px; /* Bordo arrotondato */
    padding: 5px 10px; /* Spaziatura interna */
    color: white; /* Colore del testo */
    font-size: 16px; /* Dimensione del testo */
    cursor: pointer; /* Cambia il cursore in una mano al passaggio */
    transition: all 0.3s ease; /* Animazione per un effetto fluido */
}
/* Effetto al passaggio del mouse */
#top_uno:hover {
    background-color: #e68a1a; /* Cambia colore del pulsante */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombra più evidente */
    transform: translateY(-2px); /* Leggera elevazione del pulsante */
}

/* Effetto quando il pulsante viene premuto */

#top_uno:active {
    background-color: #cc7a17; /* Colore più scuro quando schiacciato */
    transform: translateY(2px); /* Il pulsante si abbassa */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Riduce l'ombra */
}
/*--------------------------------------*/
#top_due{
	background-color: #fbd531;
	border: 1px solid #fbd531;
	border-radius: 5px;
	padding: 5px 10px; /* Spaziatura interna */
    color: white; /* Colore del testo */
    font-size: 16px; /* Dimensione del testo */
    cursor: pointer; /* Cambia il cursore in una mano al passaggio */
    transition: all 0.3s ease; /* Animazione per un effetto fluido */
}
#top_due:hover {
    background-color: #FBDC58; /* Cambia colore del pulsante */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombra più evidente */
    transform: translateY(-2px); /* Leggera elevazione del pulsante */
}

/* Effetto quando il pulsante viene premuto */

#top_due:active {
    background-color: #E9BE04; /* Colore più scuro quando schiacciato */
    transform: translateY(2px); /* Il pulsante si abbassa */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Riduce l'ombra */
}
/*--------------------------------------*/
#top_tre{
	background-color: #6397d0;
	border: 1px solid #6397d0;
	border-radius: 5px;
	padding: 5px;
	padding: 5px 10px; /* Spaziatura interna */
    color: white; /* Colore del testo */
    font-size: 16px; /* Dimensione del testo */
    cursor: pointer; /* Cambia il cursore in una mano al passaggio */
    transition: all 0.3s ease; /* Animazione per un effetto fluido */
}
#top_tre:hover {
    background-color: #8FB4DD; /* Cambia colore del pulsante */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombra più evidente */
    transform: translateY(-2px); /* Leggera elevazione del pulsante */
}

/* Effetto quando il pulsante viene premuto */

#top_tre:active {
    background-color: #3E7EC4; /* Colore più scuro quando schiacciato */
    transform: translateY(2px); /* Il pulsante si abbassa */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Riduce l'ombra */
}