html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

@font-face{
	font-family: ChunkFive;
	src:url(../../fonts/chunkfive.otf),
	url(../../fonts/chunkfive.woff) format('woff')
}

@font-face{
	font-family: BariolRegular;
	src:url(../../fonts/bariol_regular.otf),
	url(../../fonts/bariol_regular.woff) format('woff')
}

@font-face{
	font-family: BariolBold;
	src:url(../../fonts/bariol_bold.otf),
	url(../../fonts/bariol_bold.woff) format('woff')
}

body{
	font-family:BariolRegular;
	margin:0;
}

body:not(.embed){
	background-color:#191919;
}

img.preload_image{display:none;}

#game_container h1,#game_container h2,#game_container h3,#game_container h4{
	font-weight:normal;
}

#game_container button{outline:none;}

strong{
	font-family:BariolBold;
	font-weight:normal;
}

/* this one is just a temporary thing */
body:not(.embed) #content_container{
	margin-top:0px;
	margin-left:200px;
	margin-right:200px;
	padding:20px; /*  ignore its only temp - DO RESPONSIVE TOO */
	background-color:#373737;
}

#game_container{
	position:relative;
	background-color:#f1f1f1;
	width:100%;
	overflow:hidden;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

#game_loading{
	width:100%;
	text-align:center;
	height:100%;
	background-color:#373737;
	padding-top:10%;
	display:none;
}

#game_loading span{
	animation:opacity_pulse 2000ms infinite;
	color:#FFFFFF;
	font-family:ChunkFive;
	font-size:3vw;
}

@keyframes opacity_pulse{
	0%{opacity:1;}
	50%{opacity:0.5;}
	100%{opacity:1;}
}

.game_background{
	position:absolute;
	width:100%;
	height:100%;
	background-size:100% 100%;
}

.game_background#game_background_main{
	background-image:url(../images/bg_main.jpg);
	transition: all 1s ease-in;
}

.game_background#game_background_shadow{
	background-image:url(../images/bg_shadow.png);
}

#game_flag{
	position:absolute;
	width:40%;
	height:100%;
	top:0;
	background-image:url(../images/flag.png);
	background-size:100% 100%;
	opacity:0.9;
	right:0;
	right:-40%;
	/*z-index:19;*/
}

#game_instructions{
	background-color:rgba(0,0,0,0.75);
	position:absolute;
	top:48%;
	width:100%;
	text-align:center;
	color:#FFFFFF;
	padding:5% 0;
	display:none;
	z-index:19;
}

#game_instructions h1,
#game_instructions p{
	padding:0 5%;
	margin:0 0 1% 0;
}

#game_instructions h1{
	font-family:ChunkFive;
	font-size:4vw;
}

#game_instructions p{
	font-size:100%;
	font-size:2vw;
	margin-bottom:2%;
	padding:0 10%;
	margin-top:8%;
}

#game_instructions button{
	font-size:1.8vw;
	background-color:rgba(255,255,255,0.1);
	color:#FFFFFF;
	border:0;
	font-family:ChunkFive;
	border:2px solid #FFFFFF;
	padding:1% 2%;
	border-radius:1000px; /* max px, % is bad */
	cursor:pointer;
	/*transition: all .3s ease-in;*/
}

#game_instructions button:hover{
	background:transparent;
	background-color:rgba(255,255,255,0.9);
	color:#333333;
}

#game_instructions button:not(:hover).glow{
 	animation:glow_on_off 2500ms infinite;
}

@keyframes glow_on_off{
	0%{
		box-shadow:0 0 -10px #FFFFFF;
	}
	50%{
		box-shadow:0 0 30px #FFFFFF;
		background-color:rgba(255,255,255,0.3);
	}
	100%{
		box-shadow:0 0 -10px #FFFFFF;
	}
}

#game_logo{
	position:absolute;
	width:60%;
	height:30%;
	right:20%;
	top:35%;
	background-image:url(../images/logo_animated.png);
	background-size:100% 100%;
	z-index:19;
}

#game_logo.static{
	background-image:url(../images/logo_static.png);
}

#game_harvey{
	position:absolute;
	width:17%;
	height:50%;
	right:1%;
	top:17%;
	background-image:url(../images/harvey.png);
	background-size:100% 100%;
	z-index:20;
}

#game_heart{
	position:absolute;
	width:18%;
	height:30%;
	left:2%;
	top:35%;
	background-image:url(../images/heart.png);
	background-size:100% 100%;
	z-index:20;
}

#game_heart.gameplay{
	width:20%;
	height:14%;
	left:42%;
	top:19%
}

#game_human{
	position:relative;
	width:60%;
	height:145%;
	background-image:url(../images/human.png);
	background-size:100% 100%;
	top:2%; /*set to 2*/
	left:5%;
	display:none;
	z-index:19;
}

#game_human.zoomed{
	width:80%;
	height:193%;
	top:2%;
	left:-5%;
}

#game_human.bottom_half{
	top:-50%;
}

#game_blood_cell{
	position:absolute;
	width:15%;
	height:10%;
	background-image:url(../images/red_blood_cell.png);
	background-size:100% 100%;
	/*top:23%;
	left:45%; set now in javascript */
	opacity:1;
	display:none;
	z-index:20;
}

#game_blood_cell.pulse{
	animation:opacity_pulse 1500ms infinite;
}

.game_speech_bubble{
	position:absolute;
	top:35%;
	left:62%;
	width:25%;
	height:25%;
	background-image:url(../images/speech-bubble.png);
	background-size:100% 100%;
	background-repeat:no-repeat;
	z-index:21;
	text-align:center;
	font-size:1.5vw;
	display:table;
	font-family:BariolBold;
	cursor:pointer;
	opacity:0;
}

.game_speech_bubble span{
	display:table-cell;
	vertical-align:middle;
	padding:15% 8% 8% 8%;
	opacity:0;
}

.game_speech_bubble.long_message span{
	padding-left:15%;
	padding-right:15%;
}

.game_speech_bubble span div{
	font-family:BariolRegular;
	text-transform:uppercase;
	background-color:#b4b4b4;
	color:#FFFFFF;
	font-size:0.8vw;
	margin-top:-50px;
	margin-left:3%;
	padding:2% 4%;
	display:inline-block;
	border-radius:5000px;
}

#game_fullscreen{
	position:absolute;
	margin:1% 2%;
	width:5%;
	height:7%;
	background-image:url(../images/icon_fullscreen_enable.png);
	background-size:100% 100%;
	background-repeat:no-repeat;
	opacity:0.8;
	z-index:18;
	cursor:pointer;
}

#game_fullscreen.fullscreen_disable{
	background-image:url(../images/icon_fullscreen_disable.png);
}

#game_fullscreen:hover{
	opacity:1;
}

#question_container{
	position:absolute;
	bottom:0%;
	height:25%;
	width:80%;
	z-index:20;
	background-color:rgba(0,0,0,0.75);
	border-radius:0 20px 0 0;
	text-align:center;
	font-size:1.8vw;
	font-family:ChunkFive;
	display:none;
}

#question_container #question{
	border-radius:0 15px 0 0;
	background-color:rgba(255,255,255,0.9);
	font-family:ChunkFive;
	height:45%;
	width:100%;
	z-index:11;
}


#question_container #question_title{
	z-index:9;
	position:absolute;
	width:95%;
	height:13%; /* single line padding */
	padding:3% 2.5%; /* single line padding */
}

#question_container #question_title.dual_line{
	/*height:13%; /* dual line padding */
	padding:1% 2.5%; /* dual line padding */
}

#question_container #question_background{
	position:absolute;
	width:0%;
	height:45%;
	background-color:rgba(11,130,217,.75);
	border-radius:0 15px 0 0;
	top:0;
	right:0;
}

#question_container .answer{
	/*margin:1%;*/
	height:35%;
	display:inline-block;
	width:49.6%;
	margin-left:0%;
	color:#FFFFFF;
	margin-top:0.75%;
	padding-top:2.5%;
	background-color:rgba(255,255,255,0.2);
	transition: all .2s ease-in;
	font-size:2.2vw;
}

#question_container:not(.answered) .answer:hover{
	background-color:rgba(255,255,255,0.9);
	color:#000000;
}

#question_container:not(.answered){
	cursor:pointer;
}

#question_container.answered .answer.correct{
	background-color:#1acd02;
	color:#FFFFFF;
}

#question_container .answer.green:not(.amber){
	animation:opacity_pulse 2000ms infinite;
}

.opacity_pulse{
	animation:opacity_pulse 2000ms infinite;
}

#question_container .answer#answer_false{
	margin-left:.8%;
}

#question_container #advice{
	display:none;
}

#game_confetti{
	position:absolute;
	opacity:0.5;
	width:100%;
	height:100%;
	background-image:url(../images/confetti.gif);
	background-size:100% 100%;
	display:none;
	z-index:19;
	top:0;
	left:0;
}

#game_blood_splash{
	position:absolute;
	opacity:1;
	width:110%;
	height:200%;
	background-image:url(../images/blood_splash.png);
	background-size:100% 100%;
	/*display:none;*/
	z-index:18;
	top:-200%;
	left:-5%;
}

#credits{
	text-align:center;
	padding:10px;
}

#credits,
#credits a{
	color:#666666;
}

@media (max-width: 1300px){
	
	body:not(.embed) #content_container{
		margin-top:0px;
		margin-left:0px;
		margin-right:0px;
		padding:20px;
	}
	
}