@charset "utf-8";
/* CSS Document */
/* --------------------------------Stile FORM------------------------------------------ */
@font-face {
  font-family: 'allura';
  src: 	url('../FONTS/allura/alluraregular.woff2') format('woff2'),
		url('../FONTS/allura/alluraregular.woff') format('woff'),
	  	url('../FONTS/allura/alluraregular.ttf') format('truetype');
}
@font-face {
  font-family: 'dancing-script';
  src: 	url('../FONTS/dancing-script/dancingscript.woff2') format('woff2'),
	  	url('../FONTS/dancing-script/dancingscript.woff') format('woff'),
	  	url('../FONTS/dancing-script/dancingscript.ttf') format('truetype');
}

.form-container{
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	max-width:  400px;
	width: 100%;
	box-sizing: border-box; /* Aggiunto box-sizing */
} 
#form h1 {
	font-family: 'dancing-script', 'allura', sans-serif;
	color: #6397d0; 
	text-align: center;
	font-size: 22pt;
}
label {
	display: block;
	margin: 10px 0 5px;
	color: #333; 
	font-weight: bold;
}
input[type="text"], input[type="email"], textarea {
	width: 100%;
	padding: 10px; 
	margin-bottom: 10px;
	border: 2px solid #6397d0;
	border-radius: 5px;
	font-family: 'Poppins', sans-serif;
	box-sizing: border-box; /* Aggiunto box-sizing */
}
textarea { 
	resize: vertical;
} 
input[type="submit"] { 
	background-color: #6397d0;
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 5px; 
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
}
input[type="submit"]:hover {
	background-color: #6397d0;
}
/*-------------------------------------------TOP--------------------------------*/
#top_form{
	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_form: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_form: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 */
}