/**
 * ==============================================
 * I N D E X
 * ==============================================
 * 1) HTML Elements Initial Style
 * 2) Support Classes
 * 3) In-Game Elements Styling
 * 4) Data Notice Styling
 * 5) Data Components Styling
 * 6) Data UI Styling
 * 7) Data Menu Styling
 * 8) Inputs Styling
 * 9) Positioning and Distributing Classes
 * 10) CSS Fixes
 * 11) Media Queries
 * ==============================================
**/

/**
 * ===========================
 * HTML Elements Initial Style
 * ===========================
**/

html {
	width: auto;
	height: 100vh;
	width: 100vw;
}

h1,
h2 {
	padding: 0.03em;
	font-size: 3rem;
}

h3 {
	padding: 0.03em;
}

body {
	height: 100vh;
	width: 100vw;
	max-height: 100vh;
	max-width: 100vw;
	font-size: 1rem;
	text-align: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: rgba(0, 0, 0, 0.5);
	background-color: #f7f7f7;
}

body.light {
	color: rgba(255, 255, 255, 0.5);
}

li {
	list-style-type: none;
	display: inline-block;
}

button {
	width: 8rem;
	height: 2.5rem;
	background: rgba(0, 0, 0, 0.5);
	color: #f7f7f7;
	padding: 0;
}

button:hover {
	background: rgba(0, 0, 0, 0.5);
}

section > div:not(.row) {
	width: 100vw;
}

input,
select {
	color: inherit;
}

/**
 * ===========================
 * Support Classes
 * ===========================
**/

.background-image {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}

.wait,
.wait * {
	cursor: wait;
}

.block {
	display: block;
}

/**
 * ===========================
 * In-Game Elements Styling
 * ===========================
**/

#game {
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
	width: 100%;
	display: none;
	position: relative;
}

#game img {
	position: absolute;
	max-height: 90%;
}

#game [data-image] {
	top: 0;
	bottom: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

#game [data-character] {
	bottom: 0;
	position: absolute;
	max-width: 100%;
	max-height: 80vh;
}

/**
 * ===========================
 * Data Notice Styling
 * ===========================
**/

.modal  > div {
	border-radius: 4px;
}

.modal > * {
	padding: 1rem;
}

.modal p {
	font-size: 1rem;
}

/**
 * ===========================
 * Data Components Styling
 * ===========================
**/

[data-component] {
	display: none;
}

[data-component="modal"] {
	height: auto;
	max-height: 70%;
	width: 100%;
	margin: 0 auto;
	background: #fff;
	z-index: 15;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
	overflow-y: auto;
	padding: 2vmin;
	color: rgba(66, 66, 66, 0.9);
}

[data-component="video"] {
	height: auto;
	margin: 0 auto;
	z-index: 15;
}

[data-component="modal"] img,
[data-component="modal"] video {
	max-width: 100%;
	position: initial !important;
}

[data-component="modal"].active,
[data-component="video"].active {
	display: block;
}

[data-notice] p {
	font-size: 1.5rem;
}

/**
 * ===========================
 * Data UI Styling
 * ===========================
**/

[data-ui="load-progress"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	margin: 1em auto;
	display: block;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
	background: transparent;
	width: 50vw;
}

[data-ui="load-progress"]::-webkit-progress-bar {
	background: transparent;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
	border-radius: 3px;
}

[data-ui="load-progress"]::-webkit-progress-value {
	background-color: #f16272;
	border-radius: 3px;
}

[data-ui="load-progress"]::-moz-progress-bar {
	background-color: #f16272;
	border-radius: 3px;
}

[data-ui="messages"] div {
	width: auto;
	padding: 1vmin;
}

[data-ui="message-content"] {
	text-align: left;
	max-width: 100%;
}

[data-ui="input"] div {
	width: auto;
	padding: 1vmin;
}

[data-ui="input"] small {
	margin: 0.5rem auto;
}

[data-ui="input-message"] {
	font-size: 1rem;
}

[data-ui="input"] input,
textarea {
	padding: 1vmin;
	background: #eee;
	min-width: 50%;
}

[data-ui="input"] button {
	width: 3.5rem;
	height: 2rem;
	font-size: 1rem;
}

[data-ui="player"] {
	max-height: 50vh;
	max-width: 50vw;
	z-index: 2;
}

[data-ui="choices"] {
	display: none;
	z-index: 11;
	max-height: 100vh;
	overflow-y: auto;
	height: auto;
	width: 100vw;
}

[data-ui="choices"] button {
	margin: 1em;
	padding: 0.5em;
	border-radius: 0.5em;
	width: auto;
	height: auto;
	color: rgb(255, 255, 255);
}

[data-ui="face"] {
	display: inline-block;
	float: left;
	max-height: 20% !important;
	position: initial !important;
}

[data-ui="text"] {
	background-color: rgba(0, 0, 0, 0.5);
	min-height: 20%;
	max-height: 25%;
	overflow-y: auto;
	width: 100%;
	z-index: 10;
	text-align: left;
	position: absolute;
	bottom: 0;
	color: rgb(255, 255, 255);
}

[data-ui="text"].nvl {
	height: 100%;
}

[data-ui="text"] p {
	display: block;
	width: 100%;
	padding: 1vmin;
	margin: 0;
}

[data-ui="text"] .fa {
	width: auto;
	display: inline-block;
}

[data-ui="who"] {
	display: block;
	width: 100%;
	padding: 1vmin;
	margin: 0;
}

[data-ui='say'] span {
	padding: 0;
	margin: 0;
}

[data-ui="quick-menu"] {
	top: 0;
	background: transparent;

	z-index: 3;
	position: absolute;
	height: 2.5rem;
	max-height: 2.5rem;
}

[data-ui="quick-menu"].dark {
	color: rgba(0, 0, 0, 0.5);
}

[data-ui="quick-menu"].transparent {
	background: transparent;
}

[data-ui="quick-menu"] span {
	display: inline-block;
	width: auto;
	font-size: 1rem;
	margin: 0.25rem;
}

[data-ui="quick-menu"] > span > [data-string] {
	display: none;
}

[data-ui="quick-menu"] > span > .fa {
	display: inline-block;
	font-size: 1.5rem;
}

[data-ui="quick-menu"] span:hover {
	color: rgba(125, 125, 125, 0.5);
	cursor: pointer;
}

[data-ui="quick-menu"].dark span:hover {
	color: rgb(0, 0, 0);
	cursor: pointer;
}

[data-ui="slots"] figure {
	width: 20vmax;
	height: auto;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 3px;
	vertical-align: middle;
	cursor: pointer;
	position: relative;
}

[data-ui="slots"] figure [data-delete] {
	top: -1rem;
	border-radius: 100%;
	width: 2rem;
	height: 2rem;
	position: absolute;
	right: -1rem;
	margin: 0;
	font-size: 0.5em;
	padding: 0;
}

[data-ui="slots"] img {
	width: 100%;
}

[data-ui="slots"] figcaption {
	padding: 1vmax;
}

[data-ui="slots"] figcaption small {
	display: block;
}

[data-notice="slot-overwrite"] input {
	text-align: center;
}

[data-ui="centered"] {
	margin: 0;
}

[data-ui="particles"] {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}

[data-ui="background"] {
	width: 100%;
	height: 100%;
}

/**
 * ===========================
 * Data Menu Styling
 * ===========================
**/

[data-menu] {
	height: 100vh;
	max-height: 100vh;
	max-width: 100vw;
	overflow-y: auto;
	overflow-x: hidden;
	width: 100vw;
	display: none;
}

[data-menu='settings'] input,
[data-menu='settings'] select {
	margin: 2vmax;
	background: transparent;
}

[data-menu='save'] input {
	background: #fff;
	border: 1px solid #666;
}

[data-menu="main"] {
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

[data-menu] button {
	margin: 2vmin;
}

[data-menu] button[data-action="back"] {
	position: absolute;
	border-radius: 100%;
	width: auto;
	height: auto;
	padding: 0.5em;
	margin: 1rem;
	z-index: 2;
}

[data-menu="load"] h3,
[data-menu="save"] h3 {
	margin: 2rem auto;
}

/**
 * ====================================
 * Inputs Styling
 * ====================================
**/

input[type=range].light:focus::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, 0.5);
}

input[type=range].light::-webkit-slider-runnable-track {
	background: rgba(255, 255, 255, 0.5);
}

input[type=range].light:focus::-ms-fill-upper {
	background: rgba(255, 255, 255, 0.5);
}

input[type=range].light:focus::-ms-fill-lower {
	background: rgba(255, 255, 255, 0.5);
}

input[type=range].light::-moz-range-track {
	background: rgba(255, 255, 255, 0.5);
}

input[type=range].light::-ms-fill-lower {
	background: rgba(255, 255, 255, 0.5);
}

input[type=range].light::-ms-fill-upper {
	background: rgba(255, 255, 255, 0.5);
}

input[type=range] {
	width: 60%;
	height: 2vmin;
}

/**
 * ====================================
 * Positioning and Distributing Classes
 * ====================================
**/

#game [data-image].bottom {
	top: auto;
}

/**
 * ====================================
 * Media Queries
 * ====================================
**/

/** Default Style. Don't change. (320px) **/
@media screen and  (max-width: 20em) {}

/** Extra Small Devices, Phones (480px) **/
@media screen and (min-width : 30em) {}

/** Medium Screens, Tablets (601px) **/
@media screen and (min-width: 37.56255em) {

	[data-ui="input"] button {
		width: 5rem;
		height: 3rem;
	}

	[data-ui="input-message"] {
		font-size: 1.5rem;
	}

	[data-ui="text"] {
		bottom: 2.5rem;
	}

	[data-component="modal"] {
		width: 80%;
	}

	.modal > * {
		width: 70%;
	}

	[data-ui="quick-menu"] span {
		margin: 0.25rem;
	}

	[data-ui="quick-menu"] {
		bottom: 0;
		top: auto;
		background-color: rgba(0, 0, 0, 0.5);
		color: rgba(255, 255, 255, 0.5);
	}

	[data-ui="quick-menu"] span:hover {
		color: rgba(255, 255, 255, 0.8);
	}

	[data-ui="quick-menu"].transparent {
		color: rgba(0, 0, 0, 0.5);
	}

	[data-ui="quick-menu"] > span > [data-string] {
		display: inline-block;
	}

	[data-ui="quick-menu"] > span > .fa {
		display: none;
	}

	[data-ui="load-progress"] {
		width: 80%;
	}
}

/** Medium Devices, Desktops (768px)**/
@media screen and (min-width: 48em) {
	body {
		font-size: 1.5rem;
	}

	button {
		width: 10rem;
		height: 3.5rem;
		padding: 1rem;
	}

	.modal > * {
		width: 60%;
	}

	[data-component="modal"] {
		width: 70%;
	}
}

/** Medium Devices, Desktops (992px)**/
@media screen and (min-width: 62em) {
	h1,
	h2 {
		font-size: 5rem;
	}

	.modal > * {
		width: 50%;
	}

	[data-component="modal"] {
		width: 60%;
	}
}

/** HD Screen, Large Devices, Wide Screens (1200px) **/
@media screen and (min-width: 75em) {
	.modal > * {
		width: 40%;
	}

	[data-component="modal"] {
		width: 50%;
	}
}

/** Full HD Screen, Large Devices, Wide Screens (1920px) **/
@media screen and (min-width: 120em) {
	.modal > * {
		width: 30%;
	}
}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {}

/** 5k Screens, Large Devices, Wide Screens (5120px) **/
@media screen and (min-width: 320em) {}