/* VARIABLES */
:root{
	/* the default colour of text */
	--text:  hsla(0, 0%, 0%, 1);
	
	/* non-activelinks  */
	--dead: grey;

	/*  the main font colour, */
	--highlight: hsla(222, 90%, 10%, 1);
	
	/* the main background colour,*/
	--bgr:  hsla(228, 10%, 80%, 1); 
	--grad: linear-gradient(to right bottom, hsla(228, 10%, 85%), hsla(228, 10%, 75%) 100%);
	
	/* the second background colour, (side menu) */
	--bgr2:  hsla(228, 10%, 80%, 1); 
	--grad2: linear-gradient(to right bottom, hsla(228, 10%, 85%), hsla(228, 10%, 75%) 100%);

	/* the third background colour (page},*/
	--bgr2:  hsla(228, 10%, 80%, 1); 
	--grad2: linear-gradient(to right bottom, hsla(228, 10%, 85%), hsla(228, 10%, 75%) 100%);

	/* bad color */
	--bad: hsla(0, 100%, 45%, 1);
	
	/* good color */
	--good:  hsla(120, 100%, 45%, 1);
	
	
	/* */
	--pageBackgroundColor: linear-gradient(to right bottom, hsla(228, 10%, 85%), hsla(228, 10%, 75%) 100%);
	--textBackgroundGrad: linear-gradient(to right bottom, hsla(228, 10%, 85%), hsla(228, 10%, 75%) 100%);
	
	--textBackgroundColor: linear-gradient(to right bottom, hsla(228, 10%, 85%), hsla(228, 10%, 75%) 100%);
	--textBackgroundGrad: linear-gradient(to right bottom, hsla(228, 10%, 85%), hsla(228, 10%, 75%) 100%);
	
	/* background of active links, */
	--hoover: hsla(220, 0%, 0%, 1);

	/*
		accessed by:
			var(--highlight); 	
			var(--bgr);
			var(--text); 	
		eg:
			background-color: var(--bgr); 
	*/
}




/*
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caladea&display=swap');

@font-face {
  font-family: rubik;
 

  src: url("./Images/Fonts/rubik.ttf") format("truetype");
}

 */

html{
	margin: 0;
	padding: 0;
	
	/*
	background-color: var(--bgr); 	
	background-image: var(--grad);
	*/
}

body{
	/*
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-family: "Cambria", "Georgia", "Times New Roman", Times, serif;
		font-family: 'Rubik', sans-serif;
font-family: 'Libre Baskerville', serif;

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
*/
	font-family: 'Cambria', serif;
/**/
	

	color: var(--text); 

	margin: 0;
	padding: 0;
}



h1 { /* name in characters window; I don't think its used anywhere else */
	font-size: 190%;
	grid-column: 1 / -1; /* when in grid, takes whole row */
	color: var(--highlight); 	
} 


h2 { /* not used */
	grid-column: 1 / -1; /* when in grid, takes whole row */
	color: var(--highlight); 	
}


h3 { /* used everywhere */
	font-size: 120%;
	color: var(--highlight);
	margin-bottom: 0.5em;
	text-decoration: underline;
}


label{ 
	cursor: pointer; /* always used with checkbox or radio and clickable */
}

code{
	background-color: white;
	color: black;
}



#container{
	/*
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	*/
}
/* CLICKABLE BUTTONS */


/* main button used for options in game, block */ 
button {
	position: relative;
	
	/* remove defalut button style */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	font: inherit;
	outline: inherit;
	

	display: block;
	width: 100%;
	/*TODO - width: fit-content; ???*/
	/*padding: 1ch 1ch 1ch 0ch; *//*(top)(right)(bottom)(left)*/
	padding: 1ch 1ch 1ch 1ch; 
	
	cursor: pointer;
	text-align: left;
	font-weight: bold;
	font-size: 100%;
	
	color: var(--highlight);
	background: none;
	
	border-radius: 1ch
}

button:hover {
	 /* there is no let padding (handled by parent) but on hover is created a virtal one*/
	 /*
	left: -1ch;
	padding-left: 1ch;
	*/
	
	color: var(--bgr);
	background-color: var(--highlight);
}	



/* main links button */
.buttlink{
	/*(top)(right)(bottom)(left)*/
	padding: 1ch 1ch 1ch 0ch; 
}
.buttlink:hover {
	/* there is no let padding (handled by parent) but on hover is created a virtal one*/
	left: -1ch;
	padding-left: 1ch;
}	





/*big buttons in menu*/
.menu{
	font-size: 130%;
	width: 100%;
	text-align: center;
}
.menu:hover {
	/*
	left: 0;
	padding-left: 0;
	*/
	border-radius: 1ch;
	color: var(--bgr);
	background-color: var(--highlight);
}	




/* inline button */
.buttline{
	display: inline;
	text-align: center;
	padding: 1ch 1ch 1ch 1ch; /*(top)(right)(bottom)(left)*/
	width: auto;
}
.buttline:hover {
	left: 0; /* there is no let padding (handled by parent) but on hover is created a virtal one*/
	/*
	border-radius: 1ch;
	color: var(--bgr);
	background-color: var(--highlight);
	*/
}	






/* clickable things, like ahref, inline buttons */
.click{
	display: inline;
	color: var(--highlight);
	
	cursor:pointer;
	font-weight: bold;
}

.click:hover{
	color: var(--bgr);
	background-color: var(--highlight);
}

.not_click{ /* looks clicable but isn't */
	display: inline;
	color: var(--highlight);
	
	cursor: default;
	font-weight: bold;
}






/* inactive link you cannot click on*/
.dead{	
	color: var(--dead); 	
	cursor: auto;
	text-decoration: line-through;
}

/* TEXT OF THE GAME */

/* all paragraphs of the story have this class */
.speech{
	display: block;
	padding: 1ch 0; /* horizontal padding handled by parent  */
	width: auto;
	max-width: 75ch; /* upper limit of ideal text width, but acceptable due short paragraphs */
}


.neutral{ /* todo - pointless? */
	color: var(--text); 	
}

.spoiler{
	background-color: var(--text); 	
	color: var(--text); 	
}
.spoiler:hover {
	background-color: transparent;
}

.hint{
	color: var(--text); 	
	size: 90%; 
	font-style: italic;
}

.bold{
	color: var(--text); 	
	font-weight: bold;
}


.smol{
	color: var(--text); 	
	size: 80%; 
	font-style: italic;
}




.choice{
	cursor:pointer;
	font-weight: bold;
	display: inline;
	color: var(--text); 	
	border:0;
	padding:0;
	border-radius: 1ch
}
.choice:hover{
	color: var(--bgr);
	background-color: var(--highlight);
}
.choice_active{	
	border: 1px solid var(--highlight);
	/*padding-left: 5px;
	padding-right: 5px;*/
}
.choice_dead{	
	color: var(--dead); 	
	text-decoration: line-through;
}






.bloody{
	
	font-size: 200%;
	color: red;
	padding: 2rem;
	font-weight: bold;
	/*height: 100%;*/
	/*height: 1rem;*/
	/*background-color:cyan;*/
}



/* tooltip */
#div_ultra{
	position: fixed;
	z-index: 7;
	padding: 1ch;
	
	color: black;
	background-color: white;
	display: none;
	
	margin-right: 10px;
	
	border-radius: 0.5ch;
	/*
	-webkit-box-shadow: 9px 9px 20px -10px rgba(0,0,0,0.55); 
	box-shadow: 9px 9px 20px -10px rgba(0,0,0,0.55);
-webkit-box-shadow: 5px 5px 10px 0px #000000; 
box-shadow: 5px 5px 10px 0px #000000;	*/


-webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.9); 
box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.9);

}


.saves_menu{
	display: grid;
	/*justify-content: center;
	grid-template-columns: repeat(3, auto);  
	*/
	grid-template-columns: 28ch 8ch 10ch;
	/*grid-auto-rows: 4ch;*/ /*TODO - MINIMAL; MAXIMAL AUTO*/ /*todo - already handled by link padding??*/
	grid-column-gap: 5ch;
	grid-row-gap: 1ch;
	text-align: left;
}


/* option you are picking in the game, block */
.saves_link {
	position: relative;
	cursor:pointer;
	font-weight: bold;
	display: inline-block;/*TODO!!!!*/
	/*max-width: 50ch;*/ /*TODO*/
	width: auto; 
	color: var(--highlight);

	/*padding: 0.5rem; */
	padding: 1ch 2ch 1ch 0ch;
	
	/*grid-column: 1 / -1; */ /*TODO*/ /* when in grid, takes whole row */
}
.saves_link:hover {
	padding-left: 2ch;
	left: -2ch;
	border-radius: 1ch;
	color: var(--bgr);
	background-color: var(--highlight);
}



/* iventory */
.two_columns{
	display: grid;
	justify-content: start;
	grid-template-columns: repeat(2, auto);  
	grid-column-gap: 5px;
}













/*
	what is this?!?
*/
#div_potion{
		padding: 50px;
		padding-top:80px;
		z-index: 5;
		width: 100%;/*calc(100% - 500px);*/
		height: 100%; /*calc(100% - 130px);*/ 
/* TODO!!*/
		position: absolute;
	/*	max-width: 600px; */
	/*	padding-top:30px;*/
/*		background-color: red;*/
/*background-color:  green; */
background-color: var(--bgr); 
	}	
	
	
	

/* wardrobe */

#war_div_holder{
	display: flex;
	flex-direction: row;
	background-color: var(--bgr);
	
	
	/*background-color: white;*/
	height: 95vh;
	/*
	max-height: 100%; calc(100% - (5% + 30px) );
	*/
	
	/*for firefox*/
	scrollbar-width: auto;
	scrollbar-color: var(--highlight) var(--bgr2);  
		
}

#war_div_left{
	min-width: min(20%, 250px); /*TODO*/
	padding: 20px;
	
	display: flex;
	flex-direction: column;
	
	background-color: var(--bgr2); 
	
	margin-left: 10px;
	margin-right: 10px;

	/*overflow: none;*/
	overflow: auto;
}

#war_div_right{
	min-width: min(20%, 250px); /*TODO*/
	padding: 20px;
	
	
	display: flex;
	flex-direction: column;
	/*background-color: red;*/
	
	background-color: var(--bgr2); 
	margin-left: 10px;
	margin-right: 10px;

	/*height: 90%;*/
	overflow: auto;
}

#war_div_trade{
	min-width: min(20%, 250px); /*TODO*/
	
	padding: 20px;
	display: flex;
	flex-direction: column;
	/*background-color: cyan;*/
	
	background-color: var(--bgr2); 
	margin-left: 10px;
	margin-right: 10px;
	
	/*
	height: calc(100% - (5% + 30px) );
	max-height: 100%; */
	overflow: auto;
}

#war_div_mid{
	/*padding-top: 20px; 
	padding-bottom: 20px; */
	/*background-color: cyan;*/
	
	 
}

#war_div_confirm{
	/*color: green; */
}

#war_div_cancel{
	/*color: red; */
}

#war_div_men{
	width: 100%;
	padding-bottom: 20px; 
	row-gap: 10px;
  display: grid;
  justify-items: stretch;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: 
    "confirm confirm cancel cancel"
    "strip stripAll randomAllowed random"
    "sort sort sort sort"
	"imp imp imp imp";
	
}

.war_men_item{
	justify-self: stretch;
	 
	 padding: 5px;
	display: block;
	
	cursor:pointer;
	font-weight: bold;
}

#war_for_inp{
	grid-area: imp;
/*	margin-top: 10px; 
	margin-bottom: 10px; */
	margin-left: 5px; 
	width: 80%;
}

#war_for_sort{
	grid-area: sort;
	margin-top: 10px;  /*TODO - handles gap betwen 2nd and 3rd row of the menu*/
/*	margin-top: 10px; 
	margin-bottom: 10px; */
	margin-left: 5px; 
	width: 80%;
}


#war_div_bot{
	bottom: 0; 
/*	background-color: lime;*/
}

.war_item{
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	cursor:pointer;
	font-weight: bold;
}



.war_item:hover{
	color: var(--bgr);
	background-color: var(--highlight);
}
 

#tiles_container {
	/*
	width: 450px;
	height: 450px;
	*/
	display: grid;
	grid-template-columns: 150px 150px 150px;
	grid-gap: 0px;
	justify-content: center;

}

.tile{
	width: 150px;
	height: 150px;
}


.triump {
	
	background-color: red;
	
	-webkit-transition: background-color 800ms linear;
	-ms-transition: background-color 800ms linear;
	transition: background-color 800ms linear;
	
}


.active{
	cursor: pointer;
}
/*stolen directly from https://dev.to/ekeijl/creating-dice-using-css-grid-j4 because its absolutely perfect and beautiful */

.container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.face {
	width: 50px;
	height: 50px;
	
	margin: 10px;
	padding: 10px;
	background-color: white; 
	background-image: linear-gradient(to right bottom, #ffffff, #f7f7f7, #f0f0f0, #e8e8e8, #e1e1e1);
		
	border-radius: 10%;
	
	box-shadow: 3px 3px grey; /*TODO*/
	
	display: grid;
	grid-template-areas:
		"a . c"
		"e g f"
		"d . b";
}


.pip {
	width: 12px;
	height: 12px;
	background-color: black; 
	border-radius: 50%;
	background-image: linear-gradient(to right bottom, #000000, #1e1e1e, #373737, #515151, #6d6d6d);
	
	place-self: center;  /*center pip in the grid thing*/
}	

.pip:nth-child(2) {
	grid-area: b;
}
.pip:nth-child(3) {
	grid-area: c;
}
.pip:nth-child(4) {
	grid-area: d;
}
.pip:nth-child(5) {
	grid-area: e;
}
.pip:nth-child(6) {
	grid-area: f;
}

.pip:nth-child(odd):last-child {
	grid-area: g;
}


/*@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');*/

#seven_container {
	display: flex;
	width: 600px;
	flex-direction: column;
	/*grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
	*/
	/*font-family: 'UnifrakturMaguntia', cursive;*/
}


.seven_active{
	border: 2px solid red !important;
}

.seven_dead{
	color: var(--dead) !important;
	/*color: lime !important;*/
	/*cursor: pointer;*/
}


.seven_result{
	font-size: 120%;
	padding-top: 2em !important;
	padding-bottom: 2em !important;
}
.seven_result:hover{
	color: var(--highlight) !important;
	background-color: var(--bgr) !important;
}


.seven_item {
	font-weight: bold;
	font-size: 150%;
	/*padding: 2em;*/
	/*
	padding-top: 40px;
	padding-bot: 40px;
	*/
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	
	text-align: center;
	color: var(--highlight);
	
	border: 2px solid transparent;
	cursor: pointer;
}
.seven_item:hover{
	color: var(--bgr);
	background-color: var(--highlight);
}

.seven_row{
	display: flex;
	flex-direction: row;
	width: 100%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.seven_row > div 
{
  flex: 1; 
}

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

.seven_top{
	font-size: 150%;
}

.seven_mid{
	padding-top: 0.5em;
	font-size: 60%;
}

.seven_bot{
	padding-top: 0.5em;
	font-size: 80%;
}

.seven_roll{
	flex-grow: 2 !important;
}




/* BULLS AND COWS HACKING MINIGAME: */

/*contains everything */
#bull_cointainer{
	font-family: "Courier New", monospace;
	font-weight: bold;
	position: relative;
	height: auto; /* ??? */
	min-height: 400px;
	width: auto;

	/*background-color: navy;*/
	
	display: flex;
	flex-direction: row;
	align-items: strech;
}



/*right div with numpad */
#bull_botik{
	position: relative;
	padding: 20px;
	background-color:  hsla(228, 4%, 80%, 1);
	display: flex; 
}

	#bull_numpad{
	 
	
		height: 270;
		width: 100%;
	/*	
		left:10%;
		right:10%;
		*/
		
		background-color:  hsla(228, 4%, 80%, 1);
		display: grid;
		grid-template-columns: repeat(3, auto);  
		grid-gap: 5px;
	}
	 
	/*number on numpad*/
	.bull_num_button{
		height: 50px;
		line-height: 50px;
		width: 50px;
		padding: 5px;
		margin: 5px;
		text-align: center;
		font-size: 40px;
		/*font-weight: bold;*/
		background-color: white; 
		cursor: pointer;
		
		border-radius: 10px;
		
		box-shadow: 3px 3px grey;
	}
	.bull_num_button:hover{
		background-color: red; 
	}
	.bull_num_unlock{
		width: auto;
		grid-column: 1 / -1;
		font-size: 40px;
		display: none;
		/*font-size: 30px;*/
	}	


/*left div with displayed numbers and results */
#bull_topik{
	position: relative;
	padding:20px;
	background-color:  hsla(228, 4%, 80%, 1);
	display: flex; 
}

.bull_row_even{
	background-color:  hsla(0, 0%, 70%, 1);
	display: flex;
	flex-direction: row 
}

.bull_row_odd{
	background-color: hsla(0, 0%, 90%, 1); 
	display: flex;
	flex-direction: row
	 
}

/*displayed inputed number */
.bull_inbox{
	height: 40px;
	width: 40px;
	
	text-align:center;
	font-size: 30px;
	line-height: 40px;
	
	margin:5px;
	padding:5px;
	/*font-weight: bold;*/
	/*background-color: white; */
	cursor:pointer;
}

/*displayed outputted colors*/
.bull_outputed{
	display: flex;
	flex-direction: column;
}
.bull_outbox{
	height:25%;
}

.bull_green{
	background-color: lime; 
}

.bull_yellow{
	background-color: yellow; 
}

.bull_red{
	background-color: red; 
}












/*@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');*/

#rain_container{
	display: grid;
	grid-template-areas:
		". h2 h2 h2."
		"h1 ta ce de h3"
		". h0 h0 h0 .";
}

.rain_clickable{
	cursor: pointer;
	box-shadow: 0px 0px 10px 3px lime;
}

 
#rain_hand_0{
	grid-area: h0;
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	width: 500px;
}

#rain_hand_1{
	height: 150px;  /*TODO*/
	width: 100px; /*TODO*/
	position: relative;
	grid-area: h1;
	display: flex;
	flex-direction: column;
}

#rain_hand_2{
	min-height: 100px;  /*TODO*/
	width: 500px; /*TODO*/	
	position: relative;
	grid-area: h2;
	display: flex;
	justify-content: center;
	flex-direction: row;
		/*flex-wrap: wrap;*/
}

#rain_hand_3{
	height: 150px;  /*TODO*/
	width: 100px; /*TODO*/
	grid-area: h3;
	display: flex;
	position: relative;
	flex-direction: column;
}


#rain_ce{
	display: flex;
	justify-content: center;
	align-items: center;
	grid-area: ce;
	
	font-size: 140%;
}

#rain_de{
	display: flex;
	justify-content: center;
	align-items: center;
	grid-area: de;
}

#rain_ta{
	display: flex;
	justify-content: center;
	align-items: center;
	grid-area: ta;
}

.rain_card{
	border: 1px solid black;
	border-radius: 5%;
	width: 56px;
	height: 86px;
	background: white;
	margin: 5px;
	padding: 10px;
	font-size: 120%;
	/*box-shadow: 1px 1px grey;*/
	
	display: flex;
	justify-content: center;
	align-items: center;
}


#rain_changer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-area: ce;
}

.rain_change_suit{
	background: white;
	cursor: pointer;
	padding: 10px;
	margin: 10px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 150%;
}


.rain_row{
	display: flex;
	flex-direction: row;
	background: red;
}


.rain_red{
	color: red;
}





#seven_container {
	display: flex;
	width: 600px;
	/*flex-direction: column;*/
	/*grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
	 */
	/*font-family: 'UnifrakturMaguntia', cursive;*/
}