@-ms-viewport {
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
}

@keyframes Pulsating {
    0% {
        transform: scale(1) skewY(-1deg) rotate(2deg);
    }

    100% {
        transform: scale(1.1) skewY(1deg) rotate(-2deg);
    }
}

.adlGamepadSelectable {
	transition: 0.2s;
}

.adlGamepadSelectable:active {
	opacity: 0.5;
}

.gamepadHighlighted {
	color: #FFE0B2;
	text-shadow: 
		1px 1px 0px #EF6C00,
		-1px -1px 0px #EF6C00,
		1px -1px 0px #EF6C00,
		-1px 1px 0px #EF6C00,
		2px 2px 0px #EF6C00;
}

html,body {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-ms-content-zooming: none;
    -ms-scroll-limit: 0px;
    -ms-touch-select: none;
	overflow: hidden;
	-ms-touch-action: none;
	touch-action: none;
	cursor: default;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

h1 {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#wrapper {
    grid-template-rows: 1fr auto;
}

#appViewHolder {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
}

#appArea {
    background-size: cover;
    position: relative;
    height: 100%;
    width: 100%;
	grid-row: 1;
}

#canvas {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#distance {
	display: block;
	position: absolute;
	top: 16px;
	left: 8px;
	left: calc(8px + var(--sail));
	top: calc(16px + var(--sait));
	color: #ffffff;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
	font-weight: bold;
	font-family: sans-serif;
}

#combReadout {
	display: block;
	position: absolute;
	top: 16px;
	right: 8px;
	right: calc(8px + var(--sair));
	top: calc(16px + var(--sait));
	color: #ffffff;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
	font-weight: bold;
	font-family: sans-serif;
}

#combIndicator {
	height: 14px;
	margin: 2px;
	position: relative;
	top: 2px;
}

#btnPause {
	position: absolute;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: pointer;
	right: 8px;
	bottom: 8px;
	right: calc(8px + var(--sair));
	bottom: calc(8px + var(--saib));
	height: 52px;
	width: 52px;
}

#powerBar {
	position: absolute;
	left: 8px;
	bottom: 8px;
	left: calc(8px + var(--sail));
	bottom: calc(8px + var(--saib));
	height: 100px;
	width: 16px;
	border-style: solid;
	border-color: #006699;
	border-width: 2px;
	background-color: rgba(0,0,0,.6);
}

#powerMeter {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 16px;
	height: 100px;
	background-color: #3399cc;
}

#titleScreen {
	display: none;
}

.titleShowing #titleScreen {
	display: grid;
	position: absolute;
	top: 24px;
	left: 24px;
	height: calc(100% - 48px);
	width: calc(100% - 48px);
	color: #ffffff;
	text-shadow: 
		1px 1px 0px #000000,
		-1px -1px 0px #000000,
		1px -1px 0px #000000,
		-1px 1px 0px #000000,
		2px 2px 0px #000000;
	grid-template-rows: auto 1fr auto auto;
}

#titleTopBar {
	display: grid;
	grid-template-columns: auto 1fr auto;
}

#btnOptions {
	grid-column: 1;
	cursor: pointer;
}

#btnSignInArea {
	grid-column: 3;
	cursor: pointer;
}

#titleLogoHolder {
	display: grid;
	align-items: center;
	align-content: center;
	position: relative;
}

#titleLogoHolder h1 img {
	display: block;
	margin: 12px auto;
	width: 90%;
    max-width: 500px;
    animation-name: Pulsating;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    animation-direction: alternate;
}

#titleOptions {
	text-align: center;
}

.titleOption {
	display: inline-block;
	margin: 12px;
	font-weight: bold;
	font-size: 22px;
	cursor: pointer;
}

#copyrightFooter {
	margin-top: 48px;
	font-size: 14px;
	text-align: center;
	opacity: 0.8;
}

#adUnit {
	grid-row: 2;
}

@media (max-height: 560px) {
	#titleLogoHolder h1 img {
		margin: 6px auto;
	}

	.titleOption{
		font-size: 18px;
		margin: 8px;
	}

	#copyrightFooter {
		font-size: 13px;
		margin-top: 18px;
	}
}

@media (max-height: 500px) {
	#titleLogoHolder h1 img {
		width: auto;
		max-width: initial;
		height: 200px;
	}
}

@media (max-height: 450px) {

	#titleTopBar {
		font-size: 15px;
	}

	#titleLogoHolder h1 img {
		height: 160px;
	}

	.titleOption {
		font-size: 16px;
	}
}

@media (max-height: 420px) {
	#titleLogoHolder h1 img {
		height: 120px;
	}
}

@media (max-height: 370px) {
	#titleLogoHolder h1 img {
		height: 100px;
	}

	.titleOption{
		font-size: 16px;
		margin: 6px;
	}

	#copyrightFooter {
		font-size: 12px;
		margin-top: 8px;
	}
}