:root {
	--msg-content-height: 510px;
	--msg-spacing: 30px;
	--msg1-height: 50px;
	--msg2-height: 70px;
	--msg3-height: 50px;
	--msg4-height: 70px;
	--msg5-height: 70px;
	--msg6-height: 50px;
}

.msg-send {
	background: #bef18c;
	border-radius: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #36393d;
	position: absolute;
	padding: 10px;
	animation-iteration-count: 1;
	animation-duration: 8s;
	animation-fill-mode: forwards;
	max-width: 320px;
}

.msg-receive {
	background: #e4e8eb;
	border-radius: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #36393d;
	position: absolute;
	padding: 10px;
	animation-iteration-count: 1;
	animation-duration: 8s;
	animation-fill-mode: forwards;
	max-width: 320px;
		}

.msg-container {
	background: #fff;
	box-shadow: 0 10px 25px 0px rgba(0,0,0,0.15);
	box-sizing: border-box;
	padding: 20px;
	margin: 50px auto;
	width: 400px;
}

.msg-content {
	height: var(--msg-content-height);
	position: relative;
}

#msg1 {
	animation-name: msg1;
}

#msg2 {
	animation-name: msg2;
}

#msg3 {
	animation-name: msg3;
}

#msg4 {
	animation-name: msg4;
}

#msg5 {
	animation-name: msg5;
}

#msg6 {
	animation-name: msg6;
}

@keyframes msg1 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg1-height));
		left: 0;
		transform: scale(0);
	}
	5% {
		top: calc(var(--msg-content-height) - var(--msg1-height));
		left: 0;
		transform: scale(1);
	}
	12% {
		top: calc(var(--msg-content-height) - var(--msg1-height));
	}
	17% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
	}
	30% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height));
	}
	35% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
	}
	49% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
	}
	54% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg1-height) - var(--msg-spacing) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	100% {
		top: 0;
		left: 0;
	}
}

@keyframes msg2 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg2-height));
		left: 0;
		transform: scale(0);
		opacity: 0;
	}
	12% {
		top: calc(var(--msg-content-height) - var(--msg2-height));
		left: 0;
		transform: scale(0);
	}
	17% {
		top: calc(var(--msg-content-height) - var(--msg2-height));
		left: 0;
		transform: scale(1);
		opacity: 1;
	}
	30% {
		top: calc(var(--msg-content-height) - var(--msg2-height));
	}
	35% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
	}
	49% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height));
	}
	54% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
		left: 0;
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg2-height) - var(--msg-spacing) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
		left: 0;
	}
}

@keyframes msg3 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg3-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	30% {
		top: calc(var(--msg-content-height) - var(--msg3-height));
		opacity: 0;
		transform: scale(0);
	}
	35% {
		top: calc(var(--msg-content-height) - var(--msg3-height));
		right: 0;
		transform: scale(1);
		opacity: 1;
	}
	49% {
		top: calc(var(--msg-content-height) - var(--msg3-height));
	}
	54% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height));
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
		right: 0;
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg3-height) - var(--msg-spacing) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
		right: 0;
	}
}

@keyframes msg4 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg4-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	49% {
		top: calc(var(--msg-content-height) - var(--msg4-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	54% {
		top: calc(var(--msg-content-height) - var(--msg4-height));
		left: 0;
		transform: scale(1);
		opacity: 1;
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg4-height));
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
		left: 0;
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height));
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg4-height) - var(--msg-spacing) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
		left: 0;
	}
}

@keyframes msg5 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg5-height));
		right: 0;
		opacity: 0;
		transform: scale(0);
	}
	70% {
		top: calc(var(--msg-content-height) - var(--msg5-height));
		right: 0;
		opacity: 0;
		transform: scale(0);
	}
	75% {
		top: calc(var(--msg-content-height) - var(--msg5-height));
		right: 0;
		transform: scale(1);
		opacity: 1;
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg5-height));
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg5-height) - var(--msg-spacing) - var(--msg6-height));
		right: 0;
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes msg6 {
	0% {
		top: calc(var(--msg-content-height) - var(--msg6-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	95% {
		top: calc(var(--msg-content-height) - var(--msg6-height));
		left: 0;
		opacity: 0;
		transform: scale(0);
	}
	100% {
		top: calc(var(--msg-content-height) - var(--msg6-height));
		left: 0;
		opacity: 1;
		transform: scale(1);
	}
}