@import url("https://use.typekit.net/gjb2csy.css");

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700;800&display=swap');

:root {
  --typeface: 
  	'ff-tisa-sans-web-pro', sans-serif; 
  	font-size:16px;  
  	font-weight:400; 
  	line-height:1.625em;
  	letter-spacing:-.25px;
	word-spacing:2px;

  --headFont:
    'Dosis', sans-serif; letter-spacing: -.25px;
    /*'objektiv-mk3', sans-serif; letter-spacing: -.25px;*/
	font-weight:500; 
	line-height:1.625em;
	letter-spacing:-.25px;
	word-spacing:1px;
}

body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	/*background-image:url(img/paper.png);*/
	overflow:hidden;
	background: #FFF9F9; 	/*main background*/
}

br { clear:both; }

div, textarea, input, a {
	font-family: var(--typeface);
	color: #31373F;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--headFont);
	font-weight: 400;
	text-align: center;
	color: #4B4645;
}

input { 
	font-family: var(--typeface);
	border:none;
	color:#bbbbbb;
	padding:0px;
	padding-right:8px; padding-left:8px;
}

 ol li, ul li {  
	margin-left: -.5em;
	  padding-left: .5em;
	color: #242424; 
	border-radius:8px;
}

li, li + li {
	list-style: "⁞    " outside none;
	margin-top:.5em;
}

li::marker { color: #B0AAA9; }

p {
	color: #Soft Steel;
	padding:0;
	margin:0;
    text-shadow: rgba(0, 0, 0, .1) 1px 1px 2px, rgba(255, 255, 255, .9) -1px -1px 4px;	

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	/*
	margin-bottom:24px;
	margin-top:24px;
	margin-right:32px; 
	*/
}

p.head:first-letter {
	float: left;
	color: #891819;
	margin-left: -.125em;
	font-weight: 700;
	font-size: 2rem;
	vertical-align: center;
}

.finePrint {
	font-size: .75rem;
	font-family: var(--headFont);
	color: #4B4645;
	z-index: -2;
}

a {
	text-decoration:none;
	font-weight:500;
	cursor:pointer;
	color: #0000EE; 
    text-shadow: rgba(0, 0, 0, .3) 1px 1px 2px, rgba(255, 255, 255, .6) -1px -1px 4px;	
    padding: 1px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .75);
}

a:hover {	
	color:#FF000D; 
	text-shadow: rgba(0, 0, 0, .4) 1px 1px 2px;  
}

img {
	display:block; 
	margin:auto; 
	max-width:62.5%;
	position: relative;
	z-index:-20;
	padding: 1em 0;
	border-radius:8px;
}

.initial:first-letter {	
	Position: relative;
	Padding-top: 0em;
	Float: left;
	Font-size: 2em; 
	Color: #740600;
	text-align:center;
}

#game { 
	position:absolute;
	top:0px; right:0px;
	width:100%;
	height:100%;
	display:block;
	overflow-x: hidden;
	overflow-y: hidden; /* auto */
	margin:0; padding:0;
}

#story_so_far { 
	width:100%; max-width:960px; padding:0; 
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */      
	background:rgba(231,225,224,0.4);
	margin-bottom: 1rem;
 }

#current_scene {
	margin:auto; width:100%; max-width:960px; padding:0; 
	margin-bottom: .75rem; 
	padding-top: 2rem;
	padding-bottom:4rem;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */    
	margin-top:0;  
	background: transparent;

	/* multicolumn is messy and balanced but liquid 
	margin-top:8%;
	margin-left:15%; 
	column-count: 2;
	column-gap: 64px;
	column-fill: auto;
	*/

	OMIT-DEBUG-background:rgba(255,255,255,0.2);

}


#game_source, #settings_gui, #help_gui { 
	display:none;
	position:absolute;
	top:64px; left:50%; right:0px; bottom:0px;
	background:#333333; color:#bbbbbb; 
	overflow-x: hidden;
	overflow-y: scroll;
	white-space:pre-wrap;
	width:50%;
	border:none;
	outline:none;
	margin:0;
	cursor:text;
	 -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
#settings_gui, #help_gui
{
	display:none;
}

#game_gui {
	display:none;
	position:fixed;
	top:0px;
	left:50%;
	right:0px;
	background:#888888;
}
#gui_TL {
	position:fixed;
	top:0px;
	left:0px;
	color:#E37222;
	padding:32px;
}
#gui_TR {
	position:fixed;
	top:0px;
	right:50%;
	color:#E37222;
	padding:32px;
	padding-right:41px; /* scroll bars are 17px */
}

#editor_gui {
	display:none;
	position:fixed;
	top:0px;
	left:50%;
	right:0px;
	background:#222222;
}
#editor_gui_TL  {
	position:fixed;
	top:0px;
	left:50%;
	color:#E37222;
	padding:32px;
}

#editor_gui_TR  {
	position:fixed;
	top:0px;
	right:0px;
	width:auto;
	color:#E37222;
	padding:32px;
	padding-right:41px; /* scroll bars are 17px */
}

@keyframes shakes {
	0%, 100% { transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% { transform: translateX(-2px);}
	20%, 40%, 60%, 80% { transform: translateX(2px);}
}

.BOOM { 
	text-shadow: 0 0 20px rgb(254,252,201) , 10px -10px 30px rgb(254,236,133) , -20px -20px 40px rgb(255,174,52) , 20px -40px 50px rgb(236,118,12) , -20px -60px 60px rgb(205,70,6) , 0 -80px 70px rgb(151,55,22) , 10px -90px 80px rgb(69,27,14); 
	animation: shakes 2s infinite;
	color:#FF4422;
	}

.dice1,
.dice2,
.dice3,
.dice4,
.dice5,
.dice6
 { display:inline-block; height:32px; width:32px; padding:0; margin:0; border:0; outline:0; margin-right:4px; background-image:url(img/dice.png); }
.dice2 { background-position:-32px 0px; }
.dice6 { background-position:-48px 0px; }
.dice6 { background-position:-72px 0px; }
.dice6 { background-position:-96px 0px; }
.dice6 { background-position:-120px 0px; }

.menubutton { margin-left:16px; } 

.dialogleft, .dialogright { 
	line-height: 1.625rem;
	display:inline-block; 
	padding: .375em; 
	border-radius:8px;
	margin: .375em 0;
	box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
}
	
.dialogleft { 
	color:#242424; 
	text-align:left; 
	margin-right:2em; 
	background:rgba(244, 245, 240, 0.85); 
}
	
.dialogright { 
	color:white; 
	background: rgba(28, 138, 255, 0.9); 
	text-align:right; 
	float:right; 
	clear:both; 
	overflow:auto; 
	margin-right:0px; 
    text-shadow: rgba(0, 0, 0, .9) 1px 1px 3px, rgba(255, 255, 255, .1) -1px -1px 9px;	
}

.dialogright::after { background:red; height:16px; }


/* include with all links
.dialogleft a, .dialogright a { 
	padding: 1px 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .75);
	color: #0000EE;	
} */
	
.dialogleft a:hover , .dialogright a:hover   { 
	color: #FF000D;
	background:white; 		
}

#current_choices a, .choice { 
	font-family: var(--headFont);
	font-weight:700;
	word-spacing:.25px;
	background:rgba(252, 253, 246,.5);
	border-radius: 8px; 

	display:inline-block; 
	text-align:center; 
	width:50%; 
	padding:.75em 0; 
	text-decoration:none; 
	color: #0000EE; 
    text-shadow: rgba(0, 0, 0, .4) 1px 1px 2px, rgba(255, 255, 255, .9) -1px -1px 4px;	
}

#current_choices a:hover, .choice:hover { 
	color:#31373F; 
	background:#F4F5F0;
	border-radius: 8px; 
	box-shadow: 
	  	0px 1px 1px rgba(192,192,192,0.5), 
		0px 2px 2px rgba(192,192,192,0.5), 
		0px 4px 4px rgba(192,192,192,0.5), 
		0px 6px 6px rgba(192,192,192,0.5);
	transform: translateY(-10px);
    transition: 0.4s;
	text-shadow: rgba(0, 0, 0, .4) 1px 1px 2px;    
}

#choice_container {
	position:absolute;
	bottom:0px;
	width:100%;
	padding:0; margin:0;
}

#hudleft { position:absolute; top:0px; left:0px; width:20%; padding:0; margin:0; }
#hudright { position:absolute; top:0px; right:0px; width:20%; padding:0; margin:0; }

#map_page { 
	display:block;
	position:absolute;
	top:24px;
	left:13%;
	right:50%;
	bottom:48px;
	padding:0px;
}
.hud { position:absolute; display:block; height:auto; margin:0; padding:0; }

#stats_bg { top:0px; left:0px; width:100%; height:50%; 
	background-image:url(img/stats.png); background-size:100% 100%; background-repeat:no-repeat; }
#stats_div { top:0; left:0; width:100%; height:100%; }
#TURNS { position:absolute; top:68%; left:5%; }
#STR { position:absolute; top:63%; left:69%; width:10%; text-align:center; }
#AGI { position:absolute; top:76%; left:69%; width:10%; text-align:center; }
#WIS { position:absolute; top:88%; left:69%; width:10%; text-align:center; }

#inventory_bg { 
	top:50%; left:0px; width:100%; height:50%; 
	background-image:url(img/items.png); background-size:100% 100%; background-repeat:no-repeat; }
#inventory_div { top:25%; padding-left:15%; padding-right:15%; }

#map_div { display:none; background-image:url(img/map.jpg); height:33%; }
#quests_div { display:block; }


#swingmeter 	{ 
display:none;
user-select: none;
position:absolute; bottom:8%; left:11%; 
width:75%; height:48px;
border:0; margin:0; padding:0;
}
#swingtext	 	{ 
position:absolute; top:0px; left:0px; padding:0px; margin:0;
width:100%; height:24px; background:rgba(255,255,255,0.25);
}
#swingtoolow	{ 
position:absolute; bottom:0px; left:0px;  padding:0; margin:0;
width:50%; height:24px; background:brown;
}
#swinggoodlow	{ 
position:absolute; bottom:0px; left:50%;  padding:0; margin:0;
width:20%; height:24px; background:orange;
}
#swingsweetlow	{
position:absolute; bottom:0px; left:70%;  padding:0; margin:0;
width:4%; height:24px; background:green;
}
#swingsweetest  {
position:absolute; bottom:0px; left:74%;  padding:0; margin:0;
width:2%; height:24px; background:#00EE00;
}
#swingsweethigh	{ 
position:absolute; bottom:0px; left:76%; padding:0; margin:0;
width:4%; height:24px; background:green;
}
#swinggoodhigh	{ 
position:absolute; bottom:0px; left:80%; padding:0; margin:0;
width:20%; height:24px; background:orange;
}
#swingpower 	{ 
position:absolute; bottom:0px; left:0px; padding:0; margin:0;
width:1px; height:24px; background:white; border-right:1px solid black; 
opacity:0.4;
}

#face_left, #face_right {
	position:absolute;
	display:block;
	margin:0; padding:0;
	outline:none;
	bottom:10px;
	z-index:-1;
	width:45%;
	min-width:20%; 
	max-width:50%; 
}
#face_left { left:0; }
#face_right { right:0; }

#face_right img, #face_left img { width:100%; margin:0; padding:0; border:0; outline:0; }

.dialog_image { position:fixed; bottom:0px; max-width:15%; }

/* leave room for a menu at the bottom */
.leave_room_for_menu { max-height:80%; overflow:auto; }

@media screen and (max-width: 480px) {
	:root {
  --typeface: 
  	'ff-tisa-sans-web-pro', sans-serif; 
  	font-size:16.25px; 
  	letter-spacing: -.125px;
  	word-spacing: 0;
  	font-weight:500;
  	word-spacing:1px; 
	}
  .dialogleft, .dialogright { 
	line-height: 1.25rem;
	display:inline-block; 
	padding: .5em; 
	border-radius:8px;
	margin-bottom: .75em;
	}
	#face_left, #face_right {
	bottom:0;
	}
}