.modal {
	z-index: 99;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(../img/droger.jpeg);
	height: 100vh;
	width: 100vw;
	max-width: 550px;
	background-repeat: no-repeat;
	background-size: cover;
	filter: contrast(1.2);
	background-color: black;
	overscroll-behavior: contain;
	margin-left: auto;
	margin-right: auto;
}

.dialog-container {
	display: flex;
	flex-direction: column;
}

.dialog-container .name-row {
	color:black;
	font-weight: 800;
	font-size: 1.5em;
	width: 55%;
	display: flex;
	justify-content: center;
	padding: 20px;
	margin-left: 3%;
	margin-right: 3%;
	background-image: url(../img/name-bg.png);
	background-size: 100% 100%;
	z-index: 2;
	align-items: center;
}


.dialog-container .conversation-row {
	color: black;
	background-image: url(../img/paper-texture3.jpeg);
	font-weight: 600;
	font-size: 1.2em;
	margin-left: 8%;
	margin-right: 8%;
	margin-top: -20px;
	padding: 25px 15px 15px 20px;
	background-position: bottom;
	border-radius: 5px;
	align-items: center;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
	filter: brightness(0.9) contrast(1.1);
}



.dialog-container .name-row small, .dialog-container p{
	color: black;
	line-height: 2.5;
}

.dialog-container p {
	line-height: 1.8;

}

.modal-close{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20%;
}

.modal-close img{
	height: 120px;
	width: 120px;
	animation: flip-with-rotate 5s infinite;
}

@keyframes flip-with-rotate {
	0% {
		transform: perspective(400px) rotateY(0);
	}

	50% {
		transform: perspective(400px) rotateY(180deg);
	}

	100% {
		transform: perspective(400px) rotateY(360deg);
	}
}

.modal:has(#modal-btn-close:checked) {
	display: none;
}

#modal-btn-close {
	-webkit-appearance: none;
	appearance: none;
}

#auto-hide {
	-webkit-animation: autoHide 5s forwards, darkIn 2s ease-out;
	animation: autoHide 5s forwards, darkIn 2s ease-out;
}

@keyframes autoHide {
	0% {
		opacity: 1;
		z-index: 100;
	}

	70% {
		opacity: 1;
		z-index: 100;
	}

	100% {
		opacity: 0;
		z-index: -100;
	}
}

@-webkit-keyframes autoHide {
	0% {
		-webkit-opacity: 1;
		z-index: 100;
	}

	70% {
		-webkit-opacity: 1;
		z-index: 100;
	}

	100% {
		-webkit-opacity: 0;
		z-index: -100;
	}
}

.fadeInUp {
	-webkit-animation: fadeInUp 1s ease;
}

.fadeInUp2 {
	-webkit-animation: fadeInUp 1.5s ease;
}

.fadeInUp3 {
	-webkit-animation: fadeInUp 2s ease-out;
}


@-webkit-keyframes darkIn {
	0% {
		filter: brightness(0) contrast(0.9);
		-webkit-filter: brightness(0) contrast(0.9);
	}

	100% {
		filter: brightness(1) contrast(1.2);
		-webkit-filter: brightness(1) contrast(1.2);
	}
}



@keyframes fadeInUp {
	from {
		transform: translate3d(0, 40px, 0)
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}