html {
	box-sizing: border-box;
  }
  *, *:before, *:after {
	box-sizing: inherit;
  }
img {
	max-width:100%;
}


body {
	--gray:#323a45;
	--blue:#00afd1;
	--turq:#1fbba6;
	--orange:#f27935;
	--red:#d64541;
	font-family:arial,helvetica,sans-serif;
	margin:0;
	padding:0;
} 

#trigger_loss {
	z-index:99999;
	top: 5em;
    position: relative;
}
#trigger_won {
	z-index:99999;
	top:5em;
	left:5em;
	position:relative;
}
.trigger {
	display:none;
}

.maytaghomedefendersplash {
	background-image:url(../images/homedefender-splash.jpg);
	background-size:cover;
	z-index:999;
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	background-position:center;
}
.maytaghomedefendersplash:hover {
	cursor:pointer;
}

#lose_animation_container {
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	background:url(../images/water_bg.png);
	background-size:cover;
	background-repeat:no-repeat;
	height:0;
	width:0;
	opacity:0;
	
	transition:opacity 1s ease;
}
body.lost #lose_animation_container {
	animation: animatedBackground 30s linear 1;
	animation-fill-mode: forwards;
	height:100vh;
	width:100vw;
	opacity:1; 
}
body.lost #canvas_wrapper {
	opacity:0;
}



#foam {
	background-image:url(../images/bath.png);
	height: 100vh;
    width: 100vw;
    position: absolute;
    background-size: contain;
    bottom: 0;
    left: 0;
	background-repeat: no-repeat;
	background-position:bottom;
}
body.lost #foam {
	animation:animatedFoam 30s linear 1;
	animation-fill-mode:forwards;
}

@keyframes animatedBackground {
    0% { background-position: 0 0; }
	100% { background-position: 0 100vh; }
}
@keyframes animatedFoam {
    
	0% { bottom: 0; }
    100% { bottom:-40vh; }
}

@media screen and (orientation:portrait) {
	#portrait {
		display:block;
		position:absolute;
		width:100vw;
		height:100vh;
		background:var(--red);
		z-index:999;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	#portrait h1 {
		color:white;
		padding:2em;

	}
}
@media screen and (orientation:landscape) {
    #portrait {
		display:none;
	}
}

#canvas_wrapper {
	border:1px solid red;
	background:rgba(0,0,0,0.1);
}
#canvas {
	/*background:rgba(0,0,0,0.5);*/
	width:100vw;
	height:85vh;
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	left:0;
	right:0;
	top:15vh; 
	transition:opacity 0.5s ease;
}


#game_main {
	position:relative;
	height:100vh;
	width:100%;
}
#ship {
	width:412px;
	height:445px;
	position:absolute;
	bottom:50px;
	left:500px;
}
.wrapped {
	margin:8px;
	position:relative;
	margin-top:0;
	padding-top:8px;
}
.fullscreen {
	background:url(../images/homedefender_bg.jpg);
	background-size:cover;
	background-position:center bottom;
	width:100vw;
	height:100vh;
	overflow:hidden;
	transition:opacity 1s ease;
}
body.splash .fullscreen {
	opacity:0;
}
body .splash {
	transform:scale(0);
	opacity:0;
	transition:all 1s ease;
	width:0vw;
	height:0vh;
}
body.splash .splash {
	transform:scale(1);
	opacity:1;
	width:100vw;
	height:100vh;
}
#game_navbar {
	height:7vh;
	background:var(--red);
	position:absolute;
	width:100%;
	z-index:2;
}
#game_logo {
	display:block;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	width:35vh;
}

.question {
	border-radius:20px; 
	border:1px solid #aaa;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	position:absolute;
	right:0;
	top:13vh;
	width:80vw;
	max-width:35em;
	min-width:540px;
	background:rgba(255,255,255,0.9);
	color:#555;
	overflow:hidden;
	font-size:3vh;
	z-index:9;
	max-height:0vh;
	transform:scale(0);
	transition:all 0.3s ease;
}
body.question_active .question {
	max-height:100vh;
	transform:scale(1);
}
.question_wrap {
	padding:1.5em;
	position:relative;
}
.question h2 {
	background:var(--red);
	color:white;
	margin:0;
	padding:0.5em 1em;
}
.question p {
	padding:0;
	margin:0;
	line-height:1.6em;
}
.question ul {
	margin:0;
	padding:0;
	margin-top:1em;
	list-style:none;
}
.question ul li {
	margin-top:1em;
}
.question .gotit {
	display:block;
	margin-top:1em;
	width:100%;
	border:3px solid black;
	text-transform:uppercase;
	font-size:150%;
	font-weight:bold;
	padding:0.5em;
	background:rgba(0,0,0,0.0);
	transition:background 0.3s ease;
	
}
.question .gotit:hover {
	background:rgba(0,0,0,0.1);
	cursor:pointer;
}

#howtoplay ,  .modal {
	border-radius:20px; 
	border:1px solid #aaa;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
	top:17vh;
	width:80vw;
	max-width:55em;
	min-width:10em;
	background:rgba(255,255,255,0.9);
	color:#555;
	overflow:hidden;
	font-size:3vh;
	z-index:9;
	max-height:0vh;
	transform:scale(0);
	transition:all 0.3s ease;
	z-index:99;
}
#howtoplay .howtoplay_wrap, .modal .wrap {
	padding:1em;
}
#howtoplay.active,  .modal.active {
	height:auto;
	max-height:100vh;
	transform:scale(1);
}
#howtoplay h2, .modal h2 {
	background:var(--red);
	color:white;
	margin:0;
	padding:0.5em 1em;
}

.retromodal {
	z-index:999999;
	position:absolute;
	opacity:0;
	transition:all 0.3s ease;
	transform:scale(0);
	width:100vw;
	height:100vh;
}
.retromodal .wrap {
	padding:1em;
}
.retromodal h2 {
	/*font-family:'VT323',monospace;*/
	font-size:25vh;
	font-size:18vh;
	color:#fff;
	text-shadow:0 0 5px rgba(0,0,0,0.5);
	font-weight:normal;
	font-weight:700;
	text-transform:uppercase;
	text-align:center;
	margin-top:1.2em;
	margin-top:1.7em;
	margin-bottom:0;
	letter-spacing: -0.02em;
	letter-spacing:-0.04em;
}
.retromodal.active {
	transform:scale(1);
	opacity:1;
}
.retromodal button {
	font-family: 'VT323',monospace;
    text-transform: uppercase;
    background: #383;
    color: #8d8;
    border: none;
    padding: 0.6em;
    font-size: 5vh;
    display: block;
	margin: 0 auto;
	border:0.5vh solid white;
	opacity:0.7;
}
.retromodal button:hover {
	cursor:pointer;
	opacity:1;
}


.mobile_instructions {
	display:none;
}
p.mobile_instructions {
	font-size:2vh !important;
}
body.touch .desktop_instructions {
	display:none;
}
body.touch .mobile_instructions {
	display:block;
}
#howtoplay button,  .modal button {
	background: rgba(0,0,0,0.1);
    padding: 0.5em;
    display: block;
    border-radius: 0.5em;
	box-shadow: 0 0 0px rgba(0,0,0,0.2);
	border:none;
	text-align:center;
	text-transform:uppercase;
	display:block;
	margin:0 auto;
	font-size:100%;
}

.modal button:hover, #howtoplay button {
	cursor:pointer;
}


.touch_control {
	position:absolute;
	border:1vh solid white;
	transition:all 0.3s ease;
	opacity:0.07;
	display:none;
}
#status {
	font-family:'VT323',monospace;
	position:absolute;
	top:0; 
	left:2vh;
}
#status p {
	font-size:5vh;
	color:black;
	margin:0;
	padding:1vh;
}
#status #score {
	color:white;
}
#status #supershots {
	color:blue;
}
canvas {
	/* fix clicking issues on launch rocket */
	cursor:pointer;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} 
.touch_control:hover {
	cursor:pointer; /* make click events work on ios */
}
.answers li {
	cursor:pointer; /* make click events work on ios */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body.touch .touch_control {
	display:block;
}
.touch_control.circle {
	border-radius:50%;
}
.touch_control span {
	display:block;
	height:20vh;
	width:20vh;
	background:#000;
	color:white;
	font-size:18vh;
	font-weight:bold;
	text-shadow:0 0.05em 1px rgba(0,0,0,0.5);
	text-align:center;
	transition:all 0.3s ease;
}
.touch_control.circle span {
	border-radius:50%;
}

#touch_left {
	left:2em;
	top:40vh;
}
#touch_right {
	right:2em;
	top:40vh;
}
#touch_fire {
	left:48vw;
	bottom:8vh;
}

#get_question {
	position:absolute;
	bottom:10vh;
	right:10vh;
	height:10vh;
	width:10vh;
	border:0.5vh solid white;
	border-radius:50%;
	transition:all 0.3s ease;
}
#get_question span {
	display:block;
	width:8.5vh;
	height:8.5vh;
	background:var(--red);
	border-radius:50%;
	position:relative;
	left:0.25vh;
	top:0.25vh;
	color:white;
	font-size:8vh;
	font-weight:bold;
	text-shadow:0 0.05em 1px rgba(0,0,0,0.5);
	text-align:center;
	transition:all 0.3s ease;
}
#get_question:hover {
	cursor:pointer;
	filter:opacity(0.8);
}
#get_question:hover span {
	transform:scale(1.2);
}
body.question_active #get_question {
	transform:scale(0);
}
body.question_active .touch_control {
	transform:scale(0);
}
body.noammo #get_question {
	animation: waggle 1s 1s forwards ease-out;
	animation-iteration-count: infinite;
}
body.noammo.question_active #get_question {
	animation:waggle 4s 1s forwards ease-out;
	animation-iteration-count: infinite;
	opacity:0.5;
}
body.noammo #get_question span {
	background:#f00;
}
@keyframes waggle {
	0% {
	  transform: none;
	}
	50% {
	  transform: rotateZ(-20deg) scale(1.4);
	}
	60% {
	  transform: rotateZ(25deg) scale(1.1);
	}
	67.5% {
	  transform: rotateZ(-25deg) scale(1.4);
	}
	75% {
	  transform: rotateZ(25deg) scale(1.1);
	}
	82.5% {
	  transform: rotateZ(-12deg) scale(1.2);
	}
	85% {
	  transform: rotateZ(0) scale(1.2);
	}
	100% {
	  transform: rotateZ(0) scale(1);
	}
  }
body.question_active canvas {
	opacity:0.5;
}

.possible_answer label {
	transition:color 0.3s ease;
	margin-left:1em;
}
.possible_answer label:hover {
	cursor:pointer;
	color:black;
}
.possible_answer input[type=radio] {
	border:0px;
	width:1.5em;
	height:1.5em;
}

.answers li {
	display:block;
}
span.multiple_answer.answer_option {
    background: rgba(0,0,0,0.1);
    padding: 0.5em;
    margin-bottom: 0.5em;
    display: block;
	border-radius: 0.5em;
	box-shadow:0 0 0px rgba(0,0,0,0.2);
	transition:all 0.2s ease;
}
span.multiple_answer.answer_option:hover {
	box-shadow:0 0.2em 0.2em rgba(0,0,0,0.2);
	transform:translateY(-0.1em);
}

.blink {
	font-family:'VT323',monospace;
	position:absolute;
	left:0;
	right:0;
	margin:0 auto;
	top:36vh;
	font-size:10vh;
	text-align:center;
	animation:1s ease-in 0s 1 zoomfade;
	opacity:0;
	transform:scale(0);
}

.blink.score {
	color:green;
	font-size:5vh;
}
.blink.bonus.poor {
	color:orange;
	font-size:7vh;	
}
.blink.bonus {
	color:blue;
	font-size:15vh;
	animation-duration:1.5s;
}
.blink.warning {
	color:red;
	font-size:20vh;
	animation-duration:1.5s;
}
@keyframes zoomfade {
	0% { 
	  transform: scale(1);
	  opacity:1;
	}
	50% {
		transform:scale(1.5);
		opacity:0.5;
	}
	100% {
	  transform: scale(25) rotateZ(110deg);
	  opacity:0;
	}
}
.answers p {
	font-style: italic;
	border-top: 1px solid #ddd;
	padding-top: 1em;
	margin-top: 2em;
	line-height:1em;
	color:#888;
}

@media screen and (min-width:1000px) {
	.question {
		font-size:2vh;
	}
}

#win_animation_container {
	height:0;
	width:0;
	overflow:hidden;
	position:absolute;
	opacity:0;
	transition:opacity 1s ease;
}
body.wonround #win_animation_container {
	height:100vh;
	width:100vw;
	top:0;
	left:0;
	opacity:1;
	z-index:999;
}

#bubbles {
	width:100vw;
	height:100vh;
}
.navlist {
	float:right;
	height:7vh;
}
.navlist img {
	max-height:7vh;
	padding:1vh;
}
.navbutton {
	background: none;
    border: none;
    color: white;
    font-size: 3vh;
    line-height: 1em;
    text-transform: uppercase;
    border: 1px solid white;
	margin-top: 1vh;
	margin-left:1vh;
    float: right;
    margin-right: 1vh;
	padding: 1vh;
	z-index:999;
	transition:all 0.3s ease;
}
.navbutton:hover {
	background:rgba(255,255,255,0.2);
	cursor:pointer;
}

.form-group {
	margin-bottom:1em;
	text-align:center;
}
.form-group label {
	width:6em;
	display:inline-block;
}
.form-group input {
	border:none;
	background:white;
	border-bottom:2px solid #aaa;
	font-size:3vh;
}

body #logout {
	display:none;
}
body #login {
	display:block;
}
body.loggedin #login {
	display:none;
}
body.loggedin #logout {
	display:block;
}
span#dismiss_login {
    float: right;
}
span#dismiss_login:hover {
	cursor:pointer;
	opacity:0.8;
}