#portrait_alert {
	z-index: 200;
	background-color: #FFF;
	color: #000;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	align-content: center;
	font-size: 1em;
	display: none;
	padding: 1em;
	box-sizing: border-box;
}

@media (orientation: portrait) {
	#portrait_alert {
		display: block;
	}
}


#VN {
	position: relative;
	display: inline-block;
	width: auto;
	max-width: 100%;
	max-height: 95vh;
	
	--factor: calc(100% / 2048px);
}

#VN img {
	max-width: 100%;
	max-height: 95vh;
}

#VN img:not(.notpositioned) {
	position: absolute;
	top: 0;
	left: 0;
}

.hidden, #VN-backgrounds img:not(.active), #VN-characters img:not(.active) {
	opacity: 0;
}

#VN-characters [data-id*='_ATOP'] {
	z-index: 2;
}


#VN-loading, #VN-start, #VN-end {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0000;
	font-size: 3em;
	font-family: "Boucherie Flared";
}

#VN-loading {
	color: #FFF;
	text-align: center;
	align-content: center;
}

#VN-start, #VN-end {
	color: #CCC;
	border: none;
	cursor: pointer;
}

#VN-start:hover, #VN-end:hover {
	color: #FFF;
}

#VN-loading.display, #VN-start.display, #VN-end.display {
	z-index: 3;
}


#VN-locationbox_location {
	position: absolute;
	top: round(down, calc(570px * var(--factor)), 1px);
	left: round(down, calc(579px * var(--factor)), 1px);
	width: round(up, calc(873px * var(--factor)), 1px);

	font-family: "Boucherie Flared";
	font-size: round(down, calc(48px * var(--factor)), 1px);
	letter-spacing: 1px;
	text-align: center;
	color: #FFF;
}

#VN-locationbox_subtitle {
	position: absolute;
	top: round(down, calc(666px * var(--factor)), 1px);
	left: round(down, calc(579px * var(--factor)), 1px);
	width: round(up, calc(873px * var(--factor)), 1px);

	font-family: "Boucherie Flared";
	font-size: round(down, calc(33px * var(--factor)), 1px);
	letter-spacing: 1px;
	text-align: center;
	color: #B59D73;
}


#VN-textbox_name {
	position: absolute;
	top: round(down, calc(872px * var(--factor)), 1px);
	left: round(down, calc(346px * var(--factor)), 1px);
	width: round(up, calc(422px * var(--factor)), 1px);

	font-family: "Boucherie Flared";
	font-size: round(down, calc(42px * var(--factor)), 1px);
	letter-spacing: 1px;
	text-align: center;
	color: #FFF;
}

#VN-textbox_dialogue {
	position: absolute;
	top: round(down, calc(973px * var(--factor)), 1px);
	left: round(down, calc(436px * var(--factor)), 1px);
	width: round(up, calc(1205px * var(--factor)), 1px);

	font-family: "RooneySans Light";
	font-size: round(down, calc(56px * var(--factor)), 1px);
	letter-spacing: 1px;
	text-align: left;
	color: #000;
}

#VN-textbox_arrownext {
	position: absolute;
	top: round(down, calc(1155px * var(--factor)), 1px);
	left: round(down, calc(1644px * var(--factor)), 1px);
	scale: var(--factor);
	transform-origin: top left;
	animation: arrowbounce 1s linear infinite;
}

@keyframes arrowbounce {
	0% {
		translate: 0px 0px;
	}
	50% {
		translate: 0px 0px;
	}
	75% {
		translate: 0px calc(20px * var(--factor));
	}
	100% {
		translate: 0px 0px;
	}
}



.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.swirly {
	font-family: "Banthers";
}

.smaller {
	font-size: 0.75em;
}

.bigger {
	font-size: 1.25em;
}