@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

.TextMessage {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 36px;
	padding: 0px;
	border-top: 1px solid var(--menu-border-color);
	color: var(--menu-font-color);
}

.textHero {
	position: relative;
	margin: 0 auto;
	right: 60px;
	background-color: #fff;
	padding: 0.6em;
	bottom: 85px;
	width: 40px;
	clip-path: polygon(100% 0, 0 0, 0 100%);
	z-index: 70;
}

.textNpc {
	position: relative;
	margin: 0 auto;
	left: 60px;
	background-color: #fff;
	padding: 0.6em;
	bottom: 85px;
	width: 40px;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	z-index: 70;
}

.TextMessage_p {
	font-family: 'Press Start 2P', bold;
	font-size: 0.5em;
	font-weight: 300;
	margin: 0 auto;
	background: #fff;
	padding: 1em;
	width: 325px;
	border-radius: 5px;
	border-bottom: 0.2vw solid #00000086;
	position: relative;
	text-align: center;
	left: 0px;
	bottom: 80px;
	line-height: 1em;
	z-index: 50;
}
.TextMessage span {
	opacity: 0;
}
.TextMessage span.revealed {
	opacity: 1;
}

.TextMessage_button {
	font-family: 'Press Start 2P', cursive;
	color: #000000;
	background-color: #ffffff;
	font-size: 0.6em;
	font-weight: 300;
	box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);
	transition: 0.1s;
	text-shadow: 0px 2px rgba(0, 0, 0, 0.2);
	appearance: none;
	outline: none;
	margin: 0;
	cursor: pointer;
	position: absolute;
	right: 5px;
	bottom: 3px;
	padding: 3px 3px;
	border-radius: 8px;
	animation: bounce 1s linear infinite;
	z-index: 60;
}
@keyframes bounce {
	20%,
	50%,
	80%,
	to {
		transform: translateY(0px);
	}
	40% {
		transform: translateY(-7px);
	}
	70% {
		transform: translateY(-3px);
	}
	90% {
		transform: translateY(-1px);
	}
}

.TextMessage_button:hover {
	animation: none;
	box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
}

.TextMessage_button:active {
	animation: none;
	box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2);
	text-shadow: 0px 0px rgba(0, 0, 0, 0.2);
}

.is-pressed {
	animation: none;
	box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2);
	text-shadow: 0px 0px rgba(0, 0, 0, 0.2);
}

/* <img src="https://raw.githubusercontent.com/AFShiva/Project-X/main/images/textground/${this.background}.png" class="TextMessage_bg">
<img src="https://raw.githubusercontent.com/AFShiva/Project-X/main/images/textground/${this.forground}.png" class"TextMessage_fg"> */
/* .TextMessage_bg {
	z-index: 1;
	margin: 0;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
}
.TextMessage_fg {
	z-index: 2;
	margin: 0;
	position: absolute;
	right: 0;
	left: 0;
} */