@font-face {
    font-family: 'pixel_operatorregular';
    src: url('fonts/pixeloperator-webfont.woff2') format('woff2'),
         url('fonts/pixeloperator-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pixel_operatorbold';
    src: url('fonts/pixeloperator-bold-webfont.woff2') format('woff2'),
         url('fonts/pixeloperator-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html, body{
    padding: 0;
    margin: 0;
    font-family: 'pixel_operatorregular', sans-serif;
    font-size: 16pt;
}

div{
    box-sizing: border-box;
    line-height: 1.6em;
}

h1.name{
    margin: 0em;
}

h3{
    margin-bottom: 0;
    margin-top: .5em;
}

p{margin-top: .25em;}

.btn{  
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}
.btn:hover{
    /*color: #3498DB;*/
    color: #75b9e7;
    cursor: pointer;
}
	.doneBtn{
		margin-top: 1em;
		text-align: right;
	}

.imgBtn:hover{
	cursor: pointer;
/*	filter: drop-shadow(16px 16px 20px blue);
	filter: brightness(0.5);*/
}

#calendarBtn:hover{
	cursor: pointer;
	filter: drop-shadow(16px 16px 20px blue);
	filter: brightness(0.5);
}

.bold{
    font-weight: bold;
}

.flex{
    display: flex;
}

.spaceBetween{
    display: flex;
    justify-content: space-between;
}

.w50{
	width: 50%;
}

#overlay{
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 10;
	background: rgba(0,0,0,0.0);
	display: none;
}

#mainContain{
    width: 100vw;
}

#cursor{
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 12;
	display: none;
}

#topBar{
    padding: 1em;
    border-bottom: 1px solid black;
}
    #gameTitle{
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1.5em;
    }

#rightPane{
    width: 20%;
    height: 500px;
    padding: 2em;
    padding-top: 0;
    overflow-y: scroll;
}

    .menuPrompt{
        padding-top: 1em;
        font-weight: bold;
    }

#npcInfo .closeup{
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin: 1em 0;
}

.menuOption{
    padding: .4em 0;
}
    .menuOption:before{
        content: "> ";
    }

#interactionFooter{
    display: flex;
    height: 10%;
    background: white;
    padding: 1em;
    justify-content: space-between;
}

#valueInstruction > div{
    margin-bottom: 1em;
}

.cost{
    color: red;
}

.flexColumn{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.alignCenter{
	align-items: center;
}

.spaceBetween{
	justify-content: space-between;
}

#mainContain{
	padding: 1em;
	max-height: 100vh;
	height: 100vh;
}

#gameContain{
	position: relative;
	background: black;
	line-height: 0;
	width: 80%;
	height: 100%;
	/*height: 60vh;*/
}

	#gameContain > canvas{
		z-index: 1;
	}

#notebook{
	position: absolute;
	top: 5%;
	left: 5%;
	height: 90%;
	width: 90%;
	background: white;
	z-index: 9;
	font-size: .9em;
}
	.notebookTop, .notebookBottom{ 
		height: 10%;  
		background: crimson; 
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 1em;
	}
	.notebookMiddle{ height: 80%; overflow-y: scroll; padding: 1em; }
		.notebookMiddle .valueSelector{
			justify-content: left;
		}

	.npcPic{
		max-width: 70%;
		border: 15px solid black;
	}

#dialoguePane, #scenarioInfoPane{
	position: absolute;
	top: 0;
	left: 0;
	padding: 2em;
	background: white;
	width: 800px;
	height: 800px;
}
	
	#npcDialogueInfo>div:first-child{
		width: 80%;
	}
	#npcDialogueInfo>div:last-child{
		width: 20%;
	}

		#npcDialogue{
			border: 3px solid black;
			padding: 1em;
			border-radius: .5em;
			margin-right: 1em;
		}

		#npcDialogueCloseup{
			width: 100%;
		}
		#npcDialogueName{
			width: 100%;
			font-size: 2em;
			font-weight: bold;
			text-align: center;
			line-height: 1em;
		}

	.requirements{
		padding-left: 2em;
	}
	.requirements>ul{margin: 0; padding-left:0; }
	.requirements>ul>li{list-style-position: inside;}

#tutorialPane{
	position: absolute;
	top: 10%;
	left: 5%;
	width: 90%;
	height: 80%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	/*background: rgba(0,0,0,0.95);
	color: white;*/
	background: black;
	color: #2ecc71;
	padding: 2em;
	display: none;
	z-index: 11;
}
	#tutorial{
		height: 90%;
	}
	#tutorialNextBtn{
		height: 10%;
		text-align: right;
	}

#winPane, #losePane{
	position: absolute;
	top: 5%;
	left: 5%;
	height: 90%;
	width: 90%;
	display: none;
	background: white;
	padding: 2em;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.instruction{
	margin: 1% 1% 1% 0;
    border: 8px solid #2980b9;
    border-radius: .75em;
    padding: 1em;
    width: 800px;
}

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

.greyed{ color: grey; }
.btn.greyed:hover{ color: grey; cursor: default; }

.typed-cursor { display: none; }

.hide{display: none}

.halfHeight{
	height: 50%;
}

.emph{
    -webkit-animation: color-change 1s infinite;
    -moz-animation: color-change 1s infinite;
    -o-animation: color-change 1s infinite;
    -ms-animation: color-change 1s infinite;
    animation: color-change 1s infinite;
    font-weight: bold;
}
	.good .emph, .bad .emph{
		-webkit-animation: color-change2 1s infinite;
	    -moz-animation: color-change2 1s infinite;
	    -o-animation: color-change2 1s infinite;
	    -ms-animation: color-change2 1s infinite;
	    animation: color-change2 1s infinite;
	    font-weight: bold;
	}

@-webkit-keyframes color-change {
    0% { color: dodgerblue; }
    50% { color: orange; }
    100% {color: dodgerblue;}
}
@-moz-keyframes color-change {
    0% { color: dodgerblue; }
    50% { color: orange; }
    100% {color: dodgerblue;}
}
@-ms-keyframes color-change {
    0% { color: dodgerblue; }
    50% { color: orange; }
    100% {color: dodgerblue;}
}
@-o-keyframes color-change {
    0% { color: dodgerblue; }
    50% { color: orange; }
    100% {color: dodgerblue;}
}
@keyframes color-change {
    0% { color: dodgerblue; }
    50% { color: orange; }
    100% {color: dodgerblue;}
}

@-webkit-keyframes color-change2 {
    0% { color: white; }
    50% { color: orange; }
    100% {color: white;}
}
@-moz-keyframes color-change2 {
    0% { color: white; }
    50% { color: orange; }
    100% {color: white;}
}
@-ms-keyframes color-change2 {
    0% { color: white; }
    50% { color: orange; }
    100% {color: white;}
}
@-o-keyframes color-change2 {
    0% { color: white; }
    50% { color: orange; }
    100% {color: white;}
}

@keyframes color-change2 {
    0% { color: white; }
    50% { color: orange; }
    100% {color: white;}
}

#iconBar{
	position: absolute;
	top: 5%;
	width: 90%;
	left: 5%;
	height: 10%;
}

	#pcMoney{
		line-height: 1em; 
		font-size: 1.5em;
		background: #27ae60;
		color: white;
		padding: .3em .5em;
		position: absolute;
		bottom: 5%;
		left: 5%;
		border: 5px solid #2ecc71;
	}

	#contactUs{
		line-height: 1em; 
		font-size: 1em;
		color: white;
		padding: .3em .5em;
		position: absolute;
		bottom: 5%;
		right: 5%;
	}

#modal{
	position: absolute;
	z-index: 10;
	top: 10%;
	left: 10%;
	width: 80%;
	max-height: 80%;
	background: white;
	padding: 2em;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
	#modal.bad{
		background: #e74c3c;
		color: white;
	}

	#modal.good{
		background: #27ae60;
		color: white;
	}

	#modal.terminal{
		background: black;
		color: #2ecc71;
	}

.tribar{
	width: 100%;
	height: 20px;
	background: darkgray;
}
	.tribar > div{
		height: 20px;
		background: green;
	}

.energy{
	background: white;
	border-radius: 10%;
	border: .5vh solid lightgray;
	height: 5vh;
	width: 5vh;
	box-sizing: border-box;
	padding: .65vh;
	margin: 1%;
}

.npcName{
	margin-bottom: 0;
}

.highAlignOption{
	color: orange;
}

.navBarRight{
	width: 5vh;
	margin-left: 2vh;
	display: flex;
}
.navBarRight:hover{
	cursor: pointer;
	filter: drop-shadow(16px 16px 20px blue);
	filter: brightness(0.5);
}