@import 'common.scss';

#tutorial {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 50px;
	width: 80%;
	min-width: 300px;
	transform: translate(-50%, -50%);
	color: white;
	font-family: $font-family;
	text-align: center;
	font-size: 20px;
	opacity: 1;
	transition: opacity 0.3s;

	.text {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 0.3s;

		&.visible {
			opacity: 1;
		}

		&.user {
			// color: $blue;
		}

		&.ai {
			// color: $orange;
		}
	}

	&.disappear {
		opacity: 0;
	}
}