.overlay{
	position: fixed;
	top: 0; left: 0;
	z-index: 4;
	display: block;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
	visibility: hidden;
	transition: 0.4s all ease;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}.overlay.visible{
	opacity: 1;
	visibility: visible;
}

	.message{
		display: block;
		background-color: var(--white);
		border-radius: 0.6rem;
		box-shadow: 0 0 1rem rgba(0,0,0,0.6);
		transform: scale(0);
		opacity: 0;
		transition: 0.4s all ease;
	}.message.visible{
		transform: scale(1);
		opacity: 1;
	}

		.message-header{
			position: relative;
			padding: 2rem 3rem;
			border-bottom: 0.1rem solid var(--gray-1);
			text-align: center;
		}.message-header span{
			position: absolute;
			top: 0.6rem; right: 0.3rem;
			padding: 1.6rem;
			background-color: #E4E7E8;
			border-radius: 50%;
			transition: 0.4s all ease;
			cursor: pointer;
		}.message-header span::before, .message-header span::after{
			content: '';
			position: absolute;
			left: 1.5rem; top: 0.6rem;
			display: inline-block;
			transform: rotate(45deg);
			padding: 1rem 0.1rem;
			background-color: var(--gray);
			border-radius: 30rem;
		}.message-header span::after{
			transform: rotate(-45deg);
		}

		.message-header span:hover{
			background-color: var(--gray-1);
		}.message-header span:hover > .message-header span::before, 
		.message-header span:hover > .message-header span::after{
			background-color: var(--gray);
		}

		.message-header, .message-header-1, .message-body, .message-footer{
			padding: 1rem 6rem;
		}

		.message-header-1{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
		}.message-header-1 span{
			font-size: 1.6rem;
			font-weight: bold;
			letter-spacing: 0.1rem;
		}

		.message-body{
			display: block;
			margin: 0 auto;
			width: 100%;
		}.message-body textarea{
			font-size: 1.6rem;
			font-family: "Arial";
			letter-spacing: 0.1rem;
			line-height: 2.6rem;
			min-width: 30vw;
			min-height: 25vh;
			max-width: 30vw;
			max-height: 25vh;
			border: 0;
			box-shadow: 
				0 -0 0 transparent,
				0.1rem 0 0.3rem rgb(0 0 0 / 3%),
				0 0.4rem 0.3rem rgba(0 0 0 / 5%),
				-0.1rem 0 0.3rem rgb(0 0 0 / 3%);
			border-radius: 1rem;
			padding: 1rem;
		}

		.message-text-error{
			text-align: center;
		}

		.message-footer{
			text-align: center;
		}.message-footer input{
			width: 100%;
		}

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

	.message{
		width: 70%;
	}

	.message-body{
		padding: 1rem 1.6rem;
	}

		.message-body textarea{
			display: block;
			max-width: 90%;
			min-width: 90%;
			margin: 0 auto;
		}
}

@media screen and (max-width: 450px){
	.message{
		width: 100%;
		border-radius: 0;
	}

		.message-body textarea{
			max-width: 100%;
			min-width: 100%;
		}
}