@font-face {
	font-family: main;
	src: url( ./assets/LapsusPro-Bold.otf );
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

* {
	margin: 0;
	padding: 0;
	font-family: main; letter-spacing: 0.05em; font-size: 110%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

label, input {
	color: grey;
}

.dialogue-box {
	background-color: white;
	border-radius: 10px;
	border-color: black;
	border-width: 5px;
	border-style: solid;
	cursor: default;
}

#title-background {
	position: fixed;
	height: 100vh;
	width: 100vw;
	object-fit: cover;
	pointer-events: none;
	background-color: #e3f9ff;
}

#homepage-loading-icon {
	position: fixed;
	top: 50%;
	left: 50%;
	height: 70px;
	width: 70px;
	transform: translate(-50%, -50%);
}

#black-screen {
	position: fixed;
	height: 100vh;
	width: 100vw;
	background-color: black;
	pointer-events: none;
	opacity: 0;
}

#loading-icon {
	position: fixed;
	width: 128px;
	top: 0px;
	right: 0px;
}

.show-black-screen {
	animation: show_black_screen 0.22s linear forwards;
}

.hide-black-screen {
	animation: hide_black_screen 1s ease-in-out forwards;
}

@keyframes show_black_screen {
	0%   { opacity: 0 ;}
	100% { opacity: 1 ;}
}

@keyframes hide_black_screen {
	0%   { opacity: 1 ;}
	100% { opacity: 0 ;}
}


#start-menu {
	position: fixed;
	display: none;
	flex-direction: column;
	justify-content: space-evenly;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: calc( 100vw - 50px );
	height: calc( 100vh - 50px );
}

#title-image-container {
	font-size: 70px;
	color: white;
	text-shadow:
		-2px -2px 0 black,
		 2px -2px 0 black,
		-2px  2px 0 black,
		 2px  2px 0 black;

	text-align: center;
	margin-top: auto;
}

#title-sub {
	font-size: 60%; 
	margin-bottom: 50px;
}

#title {
	max-height: 50px; 
}

#menu-element {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

#menu-element > div {
	display: flex;
	flex-direction: column;
}

.input {
	width: 250px;
	border: 1px solid #111;
	border-radius: 4px;
	margin-bottom: 30px;
	white-space: nowrap;
}

.input input, .input button {
	border: none;
}

.input button {
	height: 24px;
	background-color: transparent;
	background-image: url(assets/redo-alt-solid.svg);
	background-size: auto 75%;
	background-repeat: no-repeat;
	background-position: 35% 60%;
	outline: none !important;
	padding: 10px 20px 10px 20px;
	cursor: pointer;
}

.input input {
	height: 28px;
	width: 200px;
	font-size: 20px;
	border-right: 1px solid #111;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	margin: 0 1px; padding: 2px 0 0 5px;
}

#credits {
	text-align: center;
	margin-top: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

/* show the credits as long as we can, but if we cant - just dont: */

@media screen and ( max-height: 400px ) {
	#credits { display: none; }
}

#credits > div:first-child {
	!max-width: 250px;
}

.section-title {
	font-size: 1.1em;
}

#start-button {
	display: inline-block;
	font-size: 1.8em;
	border-style: solid;
	border-width: 1px;
	border-color: #111111;
	border-radius: 4px;
	padding: 15px;
	color: #d7dee3;
	background-color: #f2f6f9;
	cursor: pointer;
}

#start-background {
	background-color: #d7dee3;
	height: 10px;
}

#start-loaded {
	background-color: green;
	height: 10px;
	width: 0;
}

#joystick-container {
	height: 100vh;
	width: 100vw;
	display: none;
	-webkit-user-select : none;
	-moz-user-select	: none;
}

#base {
	width: 75px;
	height: 75px;
}

#stick {
	width: 75px;
	height: 75px;
}

#cross {
	position: fixed;
	width: 75px;
	height: 75px;
	left: 52.5px;
	opacity: 0.0 ;
}

.blink-cross {
	animation: blink_cross 1s infinite ;
}

@keyframes blink_cross {
	0%   { opacity: 1.0 ;}
	50%  { opacity: 0.0 ;}
	100% { opacity: 1.0 ;}
}

#action-button {
	position: fixed;
	height: 75px;
	widows: 75px;
	bottom: 52.5px;
	right: 35px;
	opacity: 0.5;
	display: none;
}

.push-button {
	animation: push_button 0.07s ease-in-out 1 forwards ;
}

.release-button {
	animation: release_button 0.07s ease-in-out 1 forwards ;
}

@keyframes push_button {
	0% {
		width:  75px;
		height: 75px;
		bottom: 52.5px;
		right:  35px;
	}
	100% {
		width:  80px;
		height: 80px;
		bottom: 50px;
		right:  32.5px;
	}
}

@keyframes release_button {
	0% {
		width:  80px;
		height: 80px;
		bottom: 50px;
		right:  32.5px;
	}
	100% {
		width:  75px;
		height: 75px;
		bottom: 52.5px;
		right:  35px;
	}
}

#world {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: pink;
}

#gui {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	display: none;
	padding: 10px;
	text-align: right;
	background-color: rgba(0,0,0,0.5);
}

#gui button {
	background: transparent;
	border: 1px dotted #aaa;
	border-radius: 0;
	color: #bfd;
	position: relative;
	overflow: hidden;
	padding: 4px 5px 1px;
	outline: none;
	cursor: pointer;
}

#gui button:hover {
	border-color: white;
	color: white;
}

#json-load input {
	position: absolute;
	top: 0;
	left: -100px;
	width: 300px;
	height: 300px;
	opacity: 0;
	cursor: pointer;
}

#gui .dialog {
	position: fixed;
	top: 10%; left: 50%; margin-left: -130px;
	padding: 20px 30px;
	background-color: rgba(0,0,0,0.4); border: 1px dotted white;
	text-align: center;
	display: none;
}

#gui .dialog div {
	text-align: left; margin-bottom: 10px;
}

#gui .dialog button {
	width: 50px; margin-top: 10px;
}

#gui .dialog div, #gui .dialog button {
	color: #bfd; line-height: 1.6;
}

#gui .dialog select, #gui .dialog input {
	box-sizing: border-box;
	display: block;
	padding: 5px;
	width: 200px;
	color: #333;
}

#message-box {
	position: fixed;
	left: 50%;
	top: 25%;
	transform: translate(-50%);
	background-color: white;
	padding: 20px;
	font-size: calc( 100% + 1.5vh );
	text-align: center;
	display: none;
}

#stamina-bar {
	position: fixed;
	left: 20px;
	top: 20px;
	height: 20px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	display: none;
}

.blink-stamina {
	animation: blink_stamina 0.15s infinite ;
}

@keyframes blink_stamina {
	  0% { opacity: 1.0 ;}
	 50% { opacity: 0.3 ;}
	100% { opacity: 1.0 ;}
}

.stamina-section {
	height: 100%;
	width: calc( ( ( 100vw - 40px ) / 9 ) - 4px );
	margin-right: -2px;
	background-color: rgba(153, 228, 78, 0.294);
	border-radius: 4px;
	border-color: white;
	border-width: 2px;
	border-style: solid;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.show-stamina {
	animation: show_stamina 0.8s linear 1 forwards ;
}

@keyframes show_stamina {
	  0% { opacity: 1 ;}
	 10% { opacity: 0 ;}
	 20% { opacity: 1 ;}
	 30% { opacity: 0 ;}
	 40% { opacity: 1 ;}
	 50% { opacity: 0 ;}
	 60% { opacity: 1 ;}
	 70% { opacity: 0 ;}
	 80% { opacity: 1 ;}
	 90% { opacity: 0 ;}
	100% { opacity: 1 ;}
}

.stamina-gauge {
	width: 100%;
	height: 100%;
	background-image: url( 'assets/stamina-backgorund.png' );
}

#overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba( 0, 0, 0, 0.5 );
	display: none;
}

#talk-container {
	position: fixed;
	padding: 20px 0px 20px 0px;
	bottom: -40vh;
	left: 10px;
	width: calc( 100vw - 10px - 20px );
	height: 40vh;
	max-height: calc( 25vh - 40px );
}

@media screen and ( max-height: 750px ) {

	#talk-container {
		padding: 1vh;
		height: 30vh;
		max-height: calc( 25vh - 10px );
	}
}

#talk-subcontainer {
	position: relative;
	width: 70vw;
	max-height: 100%;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	overflow-y: auto;
}

#text-container {
	!font-size: calc( 140% + 1vh );
	font-size: 3.5vh;
	text-align: center;
}

#answers-container {
	padding-top: 1vh;
	display: none;
	justify-content: space-evenly;
}

.answer {
	display: inline-block;
	margin: 0px 10px 0px 10px;
	text-align: center;
	font-size: 5vh;
}

.selected-answer {
	text-decoration: underline;
	animation: blink_selected_answer 0.7s infinite ;
}

@keyframes blink_selected_answer {
	0%   { color: black;   }
	50%  { color: #888888; }
	100% { color: black;   }  
}

.show-talk {
	animation: show_talk 0.25s ease-out 1 forwards;
}

.hide-talk {
	animation: hide_talk 0.15s ease-in 1 forwards;
}

@keyframes show_talk {
	0%   { bottom: -40vh; }
	100% { bottom:  10px; }
}

@keyframes hide_talk {
	0%   { bottom:   0px; }
	100% { bottom: -40vh; }
}

#talker-name-container {
	position: fixed;
	!padding: 10px 20px 10px 20px;
	padding: 1vh 2vh 1vh 2vh;
	!bottom: -80px;
	bottom: -30vh;
	right: 5vw;
	!font-size: calc( 140% + 2vh );
	font-size: 5vh;
}

.show-talker-name {
	animation: show_talker_name 0.6s ease-out 1 forwards;
}

.hide-talker-name {
	animation: hide_talker_name 0.25s ease-in 1 forwards;
}

@keyframes show_talker_name {
	0%   { bottom: -100px; }
	100% { bottom:  25vh; }
}

@keyframes hide_talker_name {
	0%   { bottom:  30vh; }
	100% { bottom: -100px; }
}

#char-container {
	position: fixed;
	height: 100%;
	width: 300px;
	max-width: 50vh;
	bottom: 0px;
	right: -305px;
	display: flex;
	flex-direction: column-reverse;
}

#char-img-cont {
	position: absolute;
	width: 100%;
	max-width: 75vw;
	bottom: 0px;
	right: 0px;
}

.char-img {
	width: 100%;
}

.show-char {
	animation: show_char 0.3s ease-out 1 forwards;
}

.hide-char {
	animation: hide_char 0.3s ease-in 1 forwards;
}

@keyframes show_char {
	0%   { right: -250px; }
	100% { right:    0px; }
}

@keyframes hide_char {
	0%   { right:    0px; }
	100% { right: -305px; }
}