/* Added fonts */
@font-face {
    font-family: flavors;
    src: url(Flavors-Regular.ttf);
}
 
/* VARIABLES */
:root{
	/* the default colour of text */
	--text: black;
	
	/* the default colour of Walter's speech, green */
	--walter: hsla(103, 59%, 42%, 1);
	
	/*  the main font colour, sharp pink-red (#d60059) */
	--highlight: hsla(335, 100%, 42%, 1);
	
	/* the main background colour, 90% white with light red tint (#f2eded) */
	--bgr: hsla(0, 16%, 94%, 1);
	
	/* background of active links, looks a bit better than using the main font colour (#FB004C;) */
	--hoover_back: hsla(342, 100%, 49%, 1);
	
	
	/*
		accessed by:
			var(--highlight); 	
			var(--bgr);
			var(--text); 	
		eg:
			background-color: var(--bgr); 
	*/
}


/*?*/
form {
    margin:0px;
	padding:0px;
}

body {
	
		background-color: var(--bgr); 
		 color: var(--text); 
	
}



/* LOADING */
/* covers the screen while the game is loading */

	/* TO DO - smaller responsive version */
	/* covers the screen */
	#div_intro{
		position: fixed;
		
		left: 0%; 
		right: 0%;
		top: 0%;
		bottom: 0%;
		
		z-index: 50; /*overkil. TO DO check z-indexes*/
		
		height:100%;
		width:100%;
		
		display: flex;
		flex-direction: column; 
		justify-content: center;
		align-items: center;
		
		background-color: var(--bgr); 	
	}

	/* The Name of Game */
	#div_intro_top{
		margin:10px;
		padding:10px;
		
		cursor:pointer;
		
		font-weight: bold;
		font-family: flavors;
		/*font-family: "Comic Sans MS", cursive, sans-serif;*/
		/*TO DO - flavours load slowly, comic sans looks awfuk what to do*/
		font-size: 600%;
		text-align: center;
		
		color:var(--highlight);
	}

	/* by Dahakma */
	#div_intro_bot{
		margin:10px;
		padding:10px;
		
		color:var(--text);
		
		font-size:150%;
		font-family: flavors; /*TO DO*/
	}

	/* container with dots showing progress */
	#div_intro_loading{
		position:absolute;
		
		bottom:50px;
		
		display: flex;
		flex-direction: row; 
		justify-content: center;
		align-items: center;
		
		
	}

	/* default dot */
	.div_intro_dot{
		margin-left:20px;
		margin-right:20px;
		width:10px;
		height:10px;
		border-radius: 5px;
		background-color: var(--text);
	}

	/* active dot */
	.div_intro_dot_active{
		background-color: var(--highlight);
	}



/* MAIN */
	#div_bar {
		z-index: 12;
		position: absolute;
		left: 0; 
		right: 0;
		top: 0;
		

		width: 100%;
		height: 50px;
		
		display: none;
		
		background-color: lime; 
	}
	
	/* everything is in main div */
	#div_main {
		/*position: fixed;
		z-index: -1;
		
		height:100%;
		width:100%;
		
		background-color: hsla(0, 16%, 94%, 1); 
		overflow-y: scroll;
		overflow-x: hidden;
		*/
		position: relative;
	/*	background-color: white; */
	}


	/*div on the right for text */		
	#div_right{
		scrollbar-width: auto;
		scrollbar-color: var(--highlight) var(--bgr);  
		
		
		position: fixed;
		z-index: 4;
		
		left: 50%; 
		right: 3%;
		top: 5%;
		bottom: 5%;

		width: 40%;
		padding:40px;
				
		overflow-y:auto;
		overflow-x:hidden;
		
		background-color: var(--bgr);
		color: var(--text);
		
/*background-color: cyan;*/
	/*	background-color: var(--bgr);*/
		/*background-color:  hsla(0, 16%, 94%, 1); */
	}

	/*div including the main text*/
	#div_text{
		z-index: 5;
	}		

	/*div including links*/
	#div_link{
		z-index: 5;
		margin-top: 20px;
	}	

	/*the main div on the left */
	#div_left {
		position: absolute;  
		z-index: 0; 
		
		left: 3%; 
		top: 5%;
		bottom: 0px; 

		margin: 0px;
		width: 44%;
		height: auto;
		
		/*
		background-color: cyan;
		*/
		background-color: var(--bgr); 	
/*background-color: cyan;*/
	}

/*div into which is loaded DAD*/
/*CHANGED BY JS*/
#div_player{
	position: relative;  
	z-index: 2;

/*background-color: red;
margin-left:auto;
		margin-right:auto;
		*/
}

/*
	TO DO:
	- remove dock
	- readjust DAD JS handling 
	- curtain?
*/
	
/*hide the player avater, could display some text or stuff*/



/*div which include more informations to the avatar, and options like zoom*/
/*CHANGED BY JS*/
#div_dock{
	position: absolute;  
	z-index: 20;
		
	left: 0px; 
	/*right: 80%;*/
	/*top: 0%;*/
	bottom:0px;

	
	width: 100px;
 
	cursor:pointer;
	
	display: flex;
	flex-direction: column; 
	 
	/*background-color: hsla(335, 100%, 42%, 0);*/
	/*background-color: grey;*/
}

.div_dock_slot{
	margin: 10px;
	font-weight: bold;
	/*font-family: flavors;*/
	font-size: 100%;
	color:var(--highlight);
}

/*CHANGED BY JS*/
#div_curtain{
	position: absolute;  
	background-color: var(--bgr);
	z-index: 5; /* or 3 */
}


/*div used to include images*/
#div_image{
	position: fixed;
	z-index: 4;
	
	left: 5%; 
	right: 50%;
	top: 10%;
	bottom:5%;
			
	padding:40px;
	
	text-align: center;	
	background-color: var(--bgr);
}	

/*stuff like blinking animations are ran in this div*/
#div_effect{
	position: absolute;  
	z-index: 1;
	opacity:0;
	font-weight: bold;
	white-space: nowrap;
}



/* STAT QUESTIONS */
#div_gstat_container{
	font-family: "Cambria", "Times New Roman", Times, serif;
	/*background-color: red; */
	display: flex;
	flex-direction: row;
	padding: 20 px;
	padding-top: 40px;
	padding-left: 40px;
}

#div_gstat_right{
/*	background-color: yellow; */
	display: flex;
	flex-direction: column;
}

#div_gstat_left{
	/*background-color: white; */
	display: flex;
	flex-direction: column;
}


.div_gstat_column{
	display: flex;
	flex-direction: column;
}


.div_gstat_item{
	/*background-color: white;*/
	display: block;
	padding: 2px;
	height: 1em;
	
	
}


.div_gstat_out{
	/*background-color: white; */
	display: block;
	width: 150px;
	/*background-color: red;*/
	background-color: gray;
	height: 1em;
}

.div_gstat_in{
	/*background-color: white; */
	height: 100%;
	width: 100%;
	background: lime;
	height: 1em;
}


/*RESPONSIBLE STUFF FOR SMALLER SCREENS*/
@media all and (max-width: 700px) {
	/*
		TO DO  - hide the right text div during the transformation
		TO DO - add separated definition for medium small displays; compressed but still row
	*/
	
	#div_main {
		display: flex;
		flex-direction: column;
	}

	#div_right{
		position: relative; /* not fixed! */
		z-index: 4;
		
		left: 0; 
		right: 0;
		top: 0;
		bottom: 0;
		
		margin-left:auto;
		margin-right:auto;
		min-width:400px;
		
/*		
		width: auto;
		overflow-y:auto;
		overflow-x:hidden;	
		width: 40%;
*/
		
		padding:40px;
				
	
			
	 
	}


	#div_left {
		position: relative;  
		z-index: 0; 
		
		left: 0; 
		right: 0;
		top: 0;
		bottom: 0;
		
		width: auto;
		/*
		left: 5%; 
		top: 5%;
		bottom: 0px;

		margin: 0px;
		width: 40%;
		height: auto;
		*/
		/*
		background-color: cyan;
		*/
		 
	}
	
 
	#div_image{
		position: relative;
	}	
 


}








/* highlighted stuff looking like links but without hoover and fancy stuff etc.*/
/*inline element*/
.span_high {
	font-weight: bold;
	display: inline;
	color: var(--highlight);
	/**/
}
/*
	UNUSED
		div if you need to highlight multiple stuff	
.div_high {
	font-weight: bold;
	color:hsla(335, 100%, 42%, 1);

}
*/


/* titles looking like links but without hover bullshit and fancy stuff etc. */
/*block element*/
.span_title {
	font-weight: bold;
	display: block;
	color: var(--highlight);
	padding:10px; 
	width:auto;
	/**/
}

/*links */
.span_link {
	cursor:pointer;
	border-radius: 20px;
	font-weight: bold;
	display: inline-block;
	width: auto;
	color: var(--highlight);
	padding:10px; 
	width:auto;
	/**/
}
.span_link:hover {
	background-color: var(--hoover_back);
	/*
	
	var(--highlight);
	background-color: #FB004C;   hsla(335, 100%, 42%, 1); */
	color:var(--bgr);
}


/* some cool stuff for main links */
/* I don't remember what this do but probably something with alignment */
.span_cool {
	clear:both;
	float: left;
}

/* inactive link */
.span_dead {
	cursor:default;
	display: block;
	padding:10px; 
	color:grey;	/* TO DO - hard definition - potentionaly problematic */
	font-weight: bold;
	clear:both;
}
.span_dead:hover {
	background-color: var(--bgr);
	color:grey;
}

/* inline link, no wrap, no padding around */
.span_nowrap {
	display: inline;
	padding:0px; 
}

/* speech */ 
.span_speech{
	font-family: "Cambria", "Times New Roman", Times, serif;
	display: block;
	padding:5px; 
}

/*???????????????? colour of elements is defined in ??? so if you change the colour you have to change it there too*/
.span_player_1{color:hsla(245, 100%, 30%, 1); }
.span_player_2{color:hsla(200, 100%, 40%, 1); }
.span_player_3{color:hsla(335, 100%, 42%, 1); }
.span_player_4{color:hsla(360, 100%, 60%, 1); }
.span_player_5{color:hsla(309, 100%, 56%, 1); }

.span_walter{
	color: var(--walter); 
}

/* bold text */
/* saved for some announcements or stuff */
.span_bold{
	display: block;
	
	color:lime; 	
	color:var(--text); 	
	font-weight: bold; 
}	

/*small text, notices, notes, etc*/
.span_small{
	font-size: 80%;
}

/*plus and minus signs in settings*/
.span_big{
	/*color:red;*/
	font-weight: bold; 
	font-size: 130%;
	/*color:hsla(335, 100%, 42%, 1);*/
}


/* normal text */
.span_text{
		display: block;
		color: var(--text);
}

/*simple link, nothing fancy, used in testlab */
.span_click {
		cursor:pointer;
		display: block;
		font-weight: bold;
		color:var(--text);
		padding:0px;
		margin:0px;
		
}
.span_click:hover {
	background-color: red; /* may potentially break things */
}	
.span_click_nowrap {
		cursor:pointer;
		font-weight: bold;
		color:var(--text);
		padding:0px;
		margin:0px;
}
	
	
	
	
/*?*/
/*
	TO DO - dock!
*/
.span_dock{
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 70%;
}	
	

	
/*
.
			
.span_player_female{
				color:#d60059;
				display: block;
				padding:5px; 
				font-size: 150%;
			}
.span_player_female:hover {background-color: #FB004C;
					color:hsla(0, 16%, 94%, 1);
				}
				/*bold announcements - like transformations, score etc.*/
				
			

			
/* ANIMATION of mars/venus sign*/
	/*
		TO DO - dunno, consider changing to canvas animation 
	*/
	
	@keyframes venus {
		0% {
				opacity:1.0;
				font-size: 100%;
		}
		100%  {
				opacity:0.1;
				font-size: 900%;
		}
	}

	.ani_venus {
	  animation: venus 1s ease-out;
	}

	/*animation of mental transformation token*/	
	@keyframes dock {
		0% {
				opacity:1.0;
				font-size: 100%;
		}
		100%  {
				opacity:0.1;
				font-size: 250%;
		}
	}

	.ani_dock {
	  animation: dock 1s ease-out;
	}


	@keyframes dock2 {
		0% {
				opacity:1.0;
				width: 3px;
		}
		100%  {
				opacity:0.1;
				width: 150px;
				/*height: 300px;*/
		}
	}

	.ani_dock2 {
	  animation: dock2 1s ease-out;
	}

	

/*	BIG FLASHY TEXT, TITLES */
	.ohmyeyes {
	  font-family: flavors;/*  font-family: "Comic Sans MS", cursive, sans-serif;*/
	}	
		
	.h_ohmyeyes{
		cursor:pointer;
		font-weight: bold;
		font-family: flavors;
		/*font-family: "Comic Sans MS", cursive, sans-serif;*/
		color:var(--highlight);
		font-size: 600%;
	}	
	

	
/* SCROLLBAR */
/* 
	works only in chrome ! 
	firefox solution - set in div_right
*/


  
	::-webkit-scrollbar-button{ display: none; height: 13px; border-radius: 0px; background-color: var(--highlight); 	 } 
	::-webkit-scrollbar-button:hover{ background-color: var(--highlight); }
	::-webkit-scrollbar-thumb{ background-color: var(--highlight); } 
	::-webkit-scrollbar-thumb:hover{ background-color: var(--highlight);  } 
	::-webkit-scrollbar-track{ background-color: var(--bgr); 	 } 
	::-webkit-scrollbar-track:hover{ background-color: var(--bgr);  } 
	::-webkit-scrollbar{ width: 13px; }



/*range slider*/	
/*thanks to http://danielstern.ca/range.css/#/ */

/*the main nice one*/	
	input[type=range] {
	  -webkit-appearance: none;
	  width: 50%;
	  margin: 13.05px 0;
	}
	input[type=range]:focus {
	  outline: none;
	}
	input[type=range]::-webkit-slider-runnable-track {
	  width: 50%;
	  height: 9.9px;
	  cursor: pointer;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  background: #d60059;
	  border-radius: 23.8px;
	  border: 0.2px solid #010101;
	}
	input[type=range]::-webkit-slider-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  border: 0.6px solid #000000;
	  height: 36px;
	  width: 14px;
	  border-radius: 5px;
	  background: #ffffff;
	  cursor: pointer;
	  -webkit-appearance: none;
	  margin-top: -13.25px;
	}
	input[type=range]:focus::-webkit-slider-runnable-track {
	  background: #NaNNaNNaN;
	}
	input[type=range]::-moz-range-track {
	  width: 100%;
	  height: 9.9px;
	  cursor: pointer;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  background: #d60059;
	  border-radius: 23.8px;
	  border: 0.2px solid #010101;
	}
	input[type=range]::-moz-range-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  border: 0.6px solid #000000;
	  height: 36px;
	  width: 14px;
	  border-radius: 5px;
	  background: #ffffff;
	  cursor: pointer;
	}
	input[type=range]::-ms-track {
	  width: 100%;
	  height: 9.9px;
	  cursor: pointer;
	  background: transparent;
	  border-color: transparent;
	  color: transparent;
	}
	input[type=range]::-ms-fill-lower {
	  background: #NaNNaNNaN;
	  border: 0.2px solid #010101;
	  border-radius: 47.6px;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	}
	input[type=range]::-ms-fill-upper {
	  background: #d60059;
	  border: 0.2px solid #010101;
	  border-radius: 47.6px;
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	}
	input[type=range]::-ms-thumb {
	  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	  border: 0.6px solid #000000;
	  height: 36px;
	  width: 14px;
	  border-radius: 5px;
	  background: #ffffff;
	  cursor: pointer;
	  height: 9.9px;
	}
	input[type=range]:focus::-ms-fill-lower {
	  background: #d60059;
	}
	input[type=range]:focus::-ms-fill-upper {
	  background: #NaNNaNNaN;
	}


/*the ulitary other one*/	
	input[type=range].cool_slider {
	  -webkit-appearance: none;
	  width: 80%;
	  margin: 0.5px 0;
	}
	input[type=range].cool_slider:focus {
	  outline: none;
	}
	input[type=range].cool_slider::-webkit-slider-runnable-track {
	  width: 80%;
	  height: 15px;
	  cursor: pointer;
	  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	  background: rgba(0, 0, 0, 0.41);
	  border-radius: 0px;
	  border: 0px solid #010101;
	}
	input[type=range].cool_slider::-webkit-slider-thumb {
	  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
	  border: 2.3px solid #000000;
	  height: 16px;
	  width: 16px;
	  border-radius: 0px;
	  background: var(--highlight); 	/*rgba(214, 0, 89, 0.93);*/
	  cursor: pointer;
	  -webkit-appearance: none;
	  margin-top: -0.5px;
	}
	input[type=range].cool_slider:focus::-webkit-slider-runnable-track {
	  background: rgba(122, 122, 122, 0.41);
	}
	input[type=range].cool_slider::-moz-range-track {
	  width: 80%;
	  height: 15px;
	  cursor: pointer;
	  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	  background: rgba(0, 0, 0, 0.41);
	  border-radius: 0px;
	  border: 0px solid #010101;
	}
	input[type=range].cool_slider::-moz-range-thumb {
	  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
	  border: 2.3px solid #000000;
	  height: 16px;
	  width: 16px;
	  border-radius: 0px;
	  background: rgba(214, 0, 89, 0.93);
	  cursor: pointer;
	}
	input[type=range].cool_slider::-ms-track {
	  width: 80%;
	  height: 15px;
	  cursor: pointer;
	  background: transparent;
	  border-color: transparent;
	  color: transparent;
	}
	input[type=range].cool_slider::-ms-fill-lower {
	  background: rgba(0, 0, 0, 0.41);
	  border: 0px solid #010101;
	  border-radius: 0px;
	  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	}
	input[type=range].cool_slider::-ms-fill-upper {
	  background: rgba(0, 0, 0, 0.41);
	  border: 0px solid #010101;
	  border-radius: 0px;
	  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	}
	input[type=range].cool_slider::-ms-thumb {
	  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
	  border: 2.3px solid #000000;
	  height: 16px;
	  width: 16px;
	  border-radius: 0px;
	  background: rgba(214, 0, 89, 0.93);
	  cursor: pointer;
	  height: 15px;
	}
	input[type=range].cool_slider:focus::-ms-fill-lower {
	  background: rgba(0, 0, 0, 0.41);
	}
	input[type=range].cool_slider:focus::-ms-fill-upper {
	  background: rgba(122, 122, 122, 0.41);
	}

	
	
	
	

 
/* COUNTDOWN */ 
 
#cnt_container{
 	position: relative;
	display: flex;
	flex-direction: column;
	font-size:120%;
}


#cnt_top{
	font-size:180%;
	padding:40px;
	font-family: flavors;
	/* font-weight: bold;*/ 
	display: flex;
	flex-direction: column;
	
	color:hsla(335, 100%, 42%, 1);
}

#cnt_mid{
	font-family: "Cambria", "Times New Roman", Times, serif;
	padding:20px;
	display: flex;
	flex-direction: column;
}
 
#cnt_bot{
	padding-left:40px;
	padding-right:40px;
	display: flex;
	flex-direction: row
}
 
 
 #cnt_bar{
	display: flex;
	flex-direction: row
}


.cnt_result{
	display: block;
	white-space: nowrap;
	font-family: flavors;
	font-size:180%;
	
	color:hsla(335, 100%, 42%, 1);
}

.cnt_row{
	padding:20px;
}

.cnt_bar_button{
	border-radius: 20px;
	cursor:pointer;
	font-weight: bold;
	padding:10px;

	color:hsla(335, 100%, 42%, 1);
}

.cnt_bar_button:hover{

	background-color: #FB004C;  /* hsla(335, 100%, 42%, 1); */
	color:hsla(0, 16%, 94%, 1);
}