html,
body {
	font-family: 'Archivo Black', 'Segoe UI', sans-serif;
	font-size: 100%;
    line-height: 1.75rem;
	color: #2C3340;
	background-color: #FFBD00;
	width: 100%;
    height: 100%;
    margin: 0 auto;
}

h1 {
    font-size: 1em;
    line-height: 1em;
    text-transform: uppercase;
    color: white;
}

h2 {
    font-size: 1.7em;
    
}

p, ul, ol {
	font-size: 1.1em;
}

#header_outer {
	width: 100%;
	text-align: center;
    display: none;
	
}

#header_inner {
	display: inline-block;
  	margin: 0 auto;
	background-color: #FF5400;
	border: 3px solid #FF0054;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
	border-top: 0;
	border-radius: 0 0 11px 11px;
	padding: 0 16px;
	width: 94%;	
	font-size: 1em;
    line-height: 1em;
    color: white;
}

#p5_loading {
    display: none;
    color: #FFBD00;
}

.header_holder_left {
	width: 33%;
	float: left;
	text-align: left;
	margin-top: 1.67em;
}
.header_holder_center {
	width: 33%;
	float: left;
	text-align: center;
	margin-top: 1em;
}

.header_holder_right {
	width: 33%;
	float: right;
	text-align: right;
	margin-top: 1.67em;
}

#main_game_holder {
	width: 100%;
    height: 100%;
	/* background-image: url("../img/launch_page_web_backgrd.svg"); */
    background-position: center 10%;
    background-size: auto;
    background-repeat: no-repeat;
}

#game_holder_canvas {
	width: 94%;
	min-width: 480px;
	margin: 0 auto;
}

#loading-text {
    font-size: 1.7em;
    color: #FF0054;
    border: 3px solid #FF0054;
	border-radius: 11px;
    background-color: white;
    padding: 1.5% 5%;
}

button {
	margin: 0;
  	padding: 0;
	width: 100%;
	height: 50px;
	background-color: #FF5400;
	border: 3px solid #FF0054;
	border-radius: 11px;
  	color: white;
  	cursor: pointer;
	font-size: 1.5em;
	font-family: 'Archivo Black', 'Segoe UI', sans-serif;
}

canvas {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.clearfix {
    clear: both;
}


/******* Popups *********/

#popup_holder_outer {
	width: 300px;
	height: 380px;
	position: fixed;
  	display: none;
  	top: 50%;
  	left: 50%;
	margin-top: -190px; 
	margin-left: -150px; 
  	z-index: 2;
	/* display: flex;
  	justify-content: center;
  	align-items: center; */
}

#popup_holder_inner {
	margin: 0 auto;
	padding: 26px 16px;
	text-align: center;
	background-color: rgba(255,255,255,1);
	border: 3px solid #FF0054;
	border-radius: 11px;
}

#popup_close_button {
	position: absolute;
	top: -25px;
	right: -25px;
}

#popup_close_button button {
	width: 60px;
	height: 60px;
	background: transparent;
	background-size: cover;
	border: none;

}

#popup_game_title {
	margin: 2%;
  	line-height: 2em;
}

#popup_game_body {
	margin: 6% 0;
  	line-height: 2em;
}

#popup_game_image, #popup_cta_button {
	margin: 8% 0;
}


#popup_holder_feedback_outer {
	position: fixed;
  	display: none;
	width: 260px;
	height: 60px;
  	bottom: 5%;
  	left: 50%; 
	margin-left: -132px; 
  	z-index: 2;
	text-align: center;
}

#popup_holder_feedback_outer a:link, #popup_holder_feedback_inner a:visited {
	width: 100%;
	height: 50px;
	background-color: #390099;
	border: 3px solid white;
	border-radius: 11px;
	color: white;
	display: block;
	text-decoration: none;
}

#popup_holder_feedback_outer a:hover, #popup_holder_feedback_inner a:active {
	width: 100%;
	height: 50px;
	background-color: #FF5400;
	color:white;
	display: block;
	text-decoration: none;
}

#popup_holder_feedback_inner {
	width: 100%;
	font-size: 1.4em;
}

#popup_holder_feedback_inner img {
	width: 24px;
	height: 24px;
	background: transparent;
	background-size: cover;
	border: none;
	margin: 0 0 0 5%;
}

#popup_holder_feedback_linkholder {
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#popup_feedback_label {
	margin: 0.5em 0;
}

#popup_like_image {
	position: absolute;
	top: -32px;
	right: -38px;
}

#popup_like_image img {
	width: 48px;
	height: 48px;
	background: transparent;
	background-size: cover;
	border: none;
}






/**********************************************************************/
/**************            MEDIA QUERIES                   ************/
/**********************************************************************/


@media only screen and (max-device-width : 480px), (max-width:480px) {
	h1 {
		font-size: 1.2em;
	}

	#header_inner {
		width: 84%;
		height: 64px;
		border-radius: 0 0 15px 15px;
	}

	.header_holder_left {
		width: 27%;
		margin-top: 2.5em;
		padding-left: 16px;
	}

	.header_holder_left img {
		width: 24px;
		height: auto;
	}

	.header_holder_center {
		width: 40%;
		margin-top: 1.5em;
	}

	.header_holder_right {
		width: 27%;
    	margin-top: 2.1em;
    	font-size: 1.2em;
	}

	#main_game_holder {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		/* background-image: url("../img/launch_page_mobile_backgrd.svg"); */
		background-position: center 2%;
	}
    
    #game_splash_image {
        position: fixed;
        width: 80%;
        height: 80%;
        top: 50%;
        left: 50%;
        margin-top: -40%;
        margin-left: -40%; 
          z-index: 2;
    }

	#playbutton {
		z-index: 50;
	}

/************* Pop Ups **************/

	#popup_holder_outer {
		width: 90%;
		height: 50%;
		top: 50%;
		left: 50%;
		margin-top: -70%;
		margin-left: -45%;
	}

	#popup_holder_inner {
		border: 5px solid #FF0054;
		border-radius: 15px;
		padding: 0;
	}

	#popup_close_button {
		position: absolute;
		top: -24px;
		right: -20px;
	}

	#popup_close_button button {
		width: 48px;
		height: 48px;

	}

	#popup_game_title {
		margin: 10% 0 15% 0;
	}

	#popup_game_body {
		margin: 12% 0;
		font-size: 1.4em;
		line-height: 1.4em;
	}

	#popup_game_image img {
		width: 55%;
		height: auto;
	}
	
	#popup_cta_button {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 10%;
	}

	#popup_holder_feedback_outer {
		/* display: none; */
		width: 78%;
    	height: 60px;
    	bottom: 2%;
    	left: 50%;
    	margin-left: -48%;
    	z-index: 2;
	}

	#popup_holder_feedback_inner {
		padding: 0 10%;
		font-size: 1.5em;
	}

	#popup_holder_feedback_inner img {
		width: 32px;
		height: 32px;
		margin-left: 1em;
	}

	#popup_like_image {
		position: absolute;
		top: -32px;
		right: -67px;
	}
	
	/* #popup_like_image img {
		width: 48px;
		height: 48px;
		background: transparent;
		background-size: cover;
		border: none;
	} */

}

@media (min-width: 480px) and (max-width: 1050px) {
	
	
	#header_inner {
		width: 84%
	}

}


@media screen and (max-width:400px) {
    @-ms-viewport{
        width:320px;
    }
}