/*
 * Pure CSS linear visual novel tool.
 *
 * Copyright 2015 Kevin Lange
 *
 * <!- Insert BSD license here -->
 *
 */

@font-face {
	font-family: 'VTC Letterer pro';
	font-style: normal;
	font-weight: 400;
	src: url(assets/ui/fonts/VTC_letterer_pro.ttf);
}

body {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
	font-family: 'VTC Letterer pro';
}

/*
 * The viewport holds all the frames.
 * It should fill screen.
 */
div.viewport {
	padding: 0px;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	overflow: hidden;
}

/*
 * The stage contains all of the elements that should
 * apppear on screen together. Usually, a frame
 * will have two stages - a previous viewpoint to
 * transition from, and the actual contents of the
 * current frame. Timed transitions might use three
 * stages - previous content, the content to automatically
 * transition away from, and the content for the "next"
 * frame after the transition.
 */
div.stage {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/*
 * Character positioning.
 */

img.pirogoeth {
	height: 100%;
}

.center-character {
	text-align: center;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.right-character {
	text-align: right;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

.left-character {
	text-align: left;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

/*
 * Scene overlays.
 */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.screen-color-10 { background-color: rgba(0,0,0,0.1); }
.screen-color-20 { background-color: rgba(0,0,0,0.2); }
.screen-color-30 { background-color: rgba(0,0,0,0.3); }
.screen-color-40 { background-color: rgba(0,0,0,0.4); }
.screen-color-50 { background-color: rgba(0,0,0,0.5); }
.screen-color-60 { background-color: rgba(0,0,0,0.6); }
.screen-color-70 { background-color: rgba(0,0,0,0.7); }
.screen-color-80 { background-color: rgba(0,0,0,0.8); }
.screen-color-90 { background-color: rgba(0,0,0,0.9); }

/*
 * Animations
 */
.slide-from-right {
	animation: slide-from-right 1s 1;
	-webkit-animation: slide-from-right 1s 1;
}
.fade-in {
	animation: fade-in 0.5s 1;
	-webkit-animation: fade-in 0.5s 1;
}
.fade-in-slow {
	animation: fade-in 5s 1;
	-webkit-animation: fade-in 5s 1;
}
.shake {
	animation: shake-it 0.1s 3 linear alternate;
	-webkit-animation: shake-it 0.1s 3 linear alternate;
}

/*
 * Traditional VN dialogue boxes.
 */
.sayscreen-border {
	/*
	 * This should be customized to the theme of
	 * the VN, and also probably to the individual
	 * character that the dialogue is for.
	 *
	 * This default is black, semi-transparent, with
	 * orange borders. This is what dialogue in the
	 * Megatokyo Visual Novel is supposed to look like.
	 */
	background-color: rgba(0,0,0,0.75);
	border-radius: 2vh;
	border: solid;
	border-color: #ffc137;
	border-width: 0.5vh;
}
div.sayscreen-holder {
	position: absolute;
	bottom: 1%;
	left: 11.5%;
	width: 75%;
	height: 25%;
	padding: 0%;
}
div.sayscreen-character {
	/* This is whre the character name appears. */
	padding-left: 0.7vh;
	padding-top: 0.3vh;
	color: #ff8400;
	font-size: 5vh;
}
div.sayscreen {
	height: 70%;
}
div.sayscreen-title {
	height: 20%;
	width: 25vh;
	margin-bottom: 0.4vh;
}
div.sayscreen-text {
	/* This is where the text shows up */
	padding: 2vh;
	color: #FFFFFF;
	font-size: 5vh;
}

/*
 * Wordbubbles.
 * These are primarily for speech for the protagonist.
 */
div.wordbubble {
	color: #000;
	font-size: 5vh;
	width: 30%;
	text-align: center;
	bottom: 1%;
	left: 35%;
	position: absolute;

	background-color: #fff;
	border: 1vh solid #000;
	border-radius: 100%;
}
div.wordbubble-character {
	color: #000;
	font-size: 5vh;
	width: 30%;
	text-align: center;
	position: absolute;
	top: 30vh;
	left: 10vh;

	background-color: #fff;
	border: 1vh solid #000;
	border-radius: 100%;
}
div.wordbubble-text {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
div.wordbubble-content {
	padding: 6vh;
}

/*
 * Wordboxes are the same as bubbles,
 * but formatted as boxes instead.
 */
div.wordbox {
	color: #000;
	font-size: 5vh;
	width: 30%;
	border: 1vh solid #000;
	background-color: #fff;
	text-align: center;
	bottom: 1%;
	left: 35%;
	position: absolute;
	border-radius: 1vh;
}
.wordbox-content {
	padding: 2vh;
}

/*
 * Animation keyframe definitions.
 */
@keyframes slide-from-right {
	0% { left: 60%; opacity: 0.0; }
	100% { left: 40%; opacity: 1.0; }
}
@-webkit-keyframes slide-from-right {
	0% { left: 60%; opacity: 0.0; }
	100% { left: 40%; opacity: 1.0; }
}

@keyframes fade-in {
	0% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@-webkit-keyframes fade-in {
	0% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

@keyframes shake-it {
	0% { top: -10vh; }
	100% { top: 10vh; }
}
@-webkit-keyframes shake-it {
	0% { top: -5vh; }
	100% { top: 5vh; }
}

/*
 * Centered white text.
 * This can be used for title screens,
 * or for internal dialogue of the protagonist
 * to describe the scene. Use with a black or
 * otherwise dark background.
 */
.centered-white-text {
	position: absolute;
	font-size: 5vh;
	color: #fff;
	left: 0px;
	right: 0px;
	bottom: 2vh;
	text-align: center;
	padding: 10vh;
	padding-left: 30vh;
	padding-right: 30vh;
	line-height: 5vh;
}
.centered-white-text > a {
	color: #fff;
}
.centered-white-text.vertical-one-line {
	bottom: 47.55vh;
	padding: 0;
}
.centered-white-text.vertical-two-line {
	bottom: 45vh;
	padding: 0;
}
.centered-white-text.vertical-three-line {
	bottom: 42.5vh;
	padding: 0;
}
.centered-white-text.vertical-four-line {
	bottom: 40.0vh;
	padding: 0;
}
.centered-white-text.vertical-five-line {
	bottom: 37.5vh;
	padding: 0;
}

/*
 * These are the critical controls
 * for the VN and control how transition
 * elements are formatted and frames get
 * displayed. Don't mess with them unless you
 * know what you are doing.
 */
.frame > form {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.frame > form > button {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.0;
}
.frame > a.framelink {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.0;
}

audio {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #fff;
}

#preload {
	position: absolute;
	left: 0;
	top: 0;
	width: 1;
	height 1;
	opacity: 0.0;
}

.frame {
	display: none;
}

:target {
	display: block;
}