@media screen and (max-width: 480px){

	body {
		align-items: center;
		min-height: 500px;
		width: 100%;
		
	}

	.titulo-principal {
		font-size: 30px;
	}

	form {
		width: 100%;
	}

	.area-principal {
		height: 500px;
		margin-left: 20px;
		height: 400px;
	}

	#texto {
		background: linear-gradient(178deg, #ebf0f2, #b3c9d2);
		font-size: 25px;
		margin: 0 1em;
		width: 100%;
	}

	.aviso {
		font-size: 18px;
	}

	.div-buttons {
		margin: 0 1em;
	}

	.button {
		width: 60%;
		font-size: 20px;
	}

	.display {
		min-width: 90%;
		margin: 1em;
		max-height: 400px;
	}

	#ponto-interrogacao {
		width: 50px;
	}

 	#paragrafo-display{
 		font-size: 20px;
 	}

 	.msg {
 		font-size: 25px;
 	}

 	#texto-criptografado{
 		background: linear-gradient(178deg, #9fbbc6, #86aab8);
 		font-size: 25px;
 		height: 300px;
 	}

 	#button-copia {
 		font-size: 20px;
 	}

 	#mensagem-erro {
 		font-size: 18px;
 	}




}