#noteArea
{
	max-height: 20vh;
	width: min-content;
	display: block;
	margin: 3vh auto 0 auto;
}

#note
{
	padding: 2vh;
	white-space: nowrap;
	background-color: rgba(10, 22, 48, 0.5);
	backdrop-filter: blur(10px);
}

.note_tile12
{
	border: 0.7vh double var(--color-light);
}

.continueButton
{
	width: 5vh;
	height: 5vh;
	line-height: 4.5vh;
	margin: 2vh auto 0 auto;

	font-size: 4vh;
	text-align: center;
	vertical-align: middle;
	color: var(--color-light);
	opacity: 0;

	background-color: rgba(10, 22, 48, 0.75);
	backdrop-filter: blur(10px);
	border: 2px solid var(--color-light);
	border-radius: 50%;

	cursor: pointer;
	pointer-events: auto;
	animation: animFadeIn 2s 1s ease-out forwards;
}

.continueButton:hover
{
	color: var(--color-highlight);
	border-color: var(--color-highlight);
}

.noteText
{
	color: white;
	font-family: "Times New Roman", serif;
	/*font-style: italic;*/
	font-size: min(3vh, 6vw);
	line-height: min(4vh, 8vw);
}

.noteText_ru
{
	font-size: min(3vh, 4.5vw);
}

.animatedWord
{
	display: inline-block;
	opacity: 0;
	animation: animFadeIn 0.5s ease-out forwards;
}

.animatedLine
{
	margin: 0;
	opacity: 0;
	animation: animNoteLine 1.5s ease-out forwards;
}

.animNoteIn, .animNoteOut
{
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.animNoteIn
{
	opacity: 0;
	animation-name: animFadeIn;
	animation-duration: 1s;
	/* animation-delay: 1.75s;  */
}
.animNoteOut
{
	opacity: 1;
	animation-name: animFadeOut; /* Simply reverting "in" animation does't work */
	animation-duration: 0.5s;
}

@keyframes animNoteLine
{
	0%
	{
		opacity: 0;
		text-shadow: none;
	}
	30%
	{
		opacity: 1;
		text-shadow: 0 0 3vh white;
	}
    100%
	{
		opacity: 1;
		text-shadow: none;
	}
}