* {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
}

:root {
	--recall_verde: #00322a;
	--recall_letras: #c8a981;
}

a{
	text-decoration: none;
	color: black;
}

h1 {
	color: var(--recall_letras);
}


body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;

	height: 90vh;
	background-color: #00322a7e;
}

.divOculto{
	display: none;
}



	.container {
		width: 600px;
		box-sizing: border-box;
		padding: 20px;
		background-color: var(--recall_verde);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		text-align: center;

		margin: 20px auto;

		animation: zoomIn 500ms ease-out; /* Adiciona a animação aos inputs */
	}




		.container_logo{
			background-color: var(--recall_verde);
			margin-bottom: 20px;
		}

			.logo {
				max-width: 250px;
				height: auto;
				margin: 2px 0;
				opacity: 0; 						/* Inicialmente, a logo está invisível */
				transition: opacity 2s ease-in-out; /* Adicionamos uma transição para suavizar a entrada */
			}
				.logo.show {
					opacity: 1; 						/* Quando a classe show é adicionada, a logo fica visível */
				}



			#contactForm{
				padding: 15px;
				margin: 10px auto;
				margin-top: 20px;
				width: 550px;
			  
				border: 1px solid #c8a98167;
				border-radius: 10px;
			}



		  
		  
			  	label {
					display: block;
					margin: 1px 0;
					text-align: center;
					color: var(--recall_letras);
					animation: zoomIn 500ms ease-out; /* Adiciona a animação aos inputs */
			  	}
		  
			  	input {
					width: 100%;
					background-color: var(--recall_verde);;

					border: 1px solid var(--recall_letras);
					border-radius: 8px;

					padding: 8px;
					margin-bottom: 5px;
					box-sizing: border-box;

					color: var(--recall_letras);
					font-size: 1.2em;
					text-align: center;
					
				  	animation: zoomIn 500ms ease-out; /* Adiciona a animação aos inputs */
			  	}
		  
	
	


/*------------------ANIMACOES------------------------------*/

 @keyframes zoomIn {
	0% {
	  transform: scale(0);
	  opacity: 0;
	}
	100% {
	  transform: scale(1);
	  opacity: 1;
	}
  }



/*----CARACTERISTICAS CUANDO PANTALLA CELULAR--------------------------------------*/
@media all and (max-width: 500px) {

	.container {
		width: 94%;
		padding: 5px;
	}

	#contactForm{
		width: 100%;
	}

	.campoTexto{
		font-size: 1.6em;
	}

}