html, body {
	overflow: hidden;
	width   : 100%;
	height  : 100%;
	margin  : 0;
	padding : 0;
	font-family: sans-serif;
}

#renderCanvas {
	width   : 100%;
	height  : 100%;
	touch-action: none;
}

#overlay {
	position: absolute;
	top: 0;
	left: 3.0rem;
	width: calc(100% - 6.0rem);
	height: 100%;
	pointer-events: none;
	touch-action: none;
}

#overlay::after {
	position: absolute;
	content: ' ';
	left: -3.0rem;
	width: calc(100% + 6.0rem);
	height: 100%;
	background: #000000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease-in-out;
}

#overlay.menuActive::after{
	opacity: 0.75;
}

/* Gesture Menu */

#gestures {
	position: absolute;
	width: calc(100% + 6.0rem);
	height: 100%;
	left: -3.0rem;
	pointer-events: none;
	touch-action: none;
}

/* Top Bar */

#top-bar {
	position: absolute;
	top: 40px;
	width: 100%;
	height: 50px;
}

#revoke-btn {
	position: absolute;
	margin-left: 15px;
	margin-top: -10px;
	padding: 5px;
	border-radius: 10px;
	pointer-events: auto;
	display: none;
	user-select: none;
	cursor: pointer;
	width: 80px;
	height: 80px;	
	background-image: url('../art/images/no.png');
    background-size: 90px 90px;
}

#revoke-btn.active {
	display: block;
}

#text-box-outer {
	position: absolute;
	display: flex;
	justify-content: center;
	left: 125px;
	width: calc(100% - 250px);
	height: 57px;
	top: -15px;
}

#text-box {
	display: flex;
	max-width: 100%;
	object-fit: contain;
	height: 57px;
	border: 3px solid #000000;
	border-radius: 20px;
	background-image: url('../art/images/tile.png');
    background-size: auto 100%;
    background-repeat: repeat-x;
	user-select: none;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	overflow: hidden;
}

#text-box.active {
	opacity: 1;
}

#flower-message {
	display: flex;
	align-items: center;
	padding: 0px 16px;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0px;
	background: rgba(255,255,255,0.5);
	text-align: center;
	font-size: 20px;
	font-weight: normal;
}

.button.down {
	background-color: rgba(207,212,218, 0.75);
}

.button:hover {
	background-color: rgba(217,222,228, 0.75);
}

#sandwich-btn {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 0;
	margin-left: 15px;
	margin-top: -10px;
	margin-bottom: -10px;
	padding: 5px;
	border-radius: 10px;
	pointer-events: auto;
	user-select: none;
	cursor: pointer;
	background-size: 90px 90px;
}

#sandwich-btn div.sandwich-button{
	width: 80px;
	padding-bottom: 80px;
}

#sandwich-container {
	position: absolute;
	right: 0;
	margin-left: 15px;
	margin-top: 50px;
	padding: 5px;
	padding-top: 25px;
	border-radius: 10px;
	pointer-events: auto;
	width: 80px;
	height: 0px;
	transition: height 0.5s ease-in-out;
	overflow: hidden;
}

#sandwich-container.active {
	height: 300px;
}

#water-btn, #tender-btn,
#settings-btn {
	padding: 5px;
	border-radius: 10px;
	margin-left: -5px;
	margin-top: 17.5px;
	margin-bottom: -10px;
	width: 80px;
	height: 80px;
	user-select: none;
	cursor: pointer;
	background-size: 90px 90px;
}

#water-btn {
	background-image: url('../art/images/water.png');
}

#tender-btn {
	background-image: url('../art/images/tender.png');
}

#settings-btn {
	background-image: url('../art/images/gear.png');
}

#sandwich-btn {
	background-image: url('../art/images/sandwich.png');
}

#ingame-menu-container {
	position: absolute;
	left: calc(50% - 220px);
	top: calc(50% - 342px);
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	background-image: url('../art/images/menu.png');
	width: 440px;
	height: 684px;
	pointer-events: none;
}

#ingame-menu-container.active {
	opacity: 1;
	pointer-events: auto;
}

.menu-ctnr {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	pointer-events: none;
}

.curr-menu {
	opacity: 1;
	pointer-events: auto;
}

.menu-ctnr h1, .menu-ctnr p {
	position: absolute;
	width: 85%;
	left: 7.5%;
	user-select: none;
	cursor: default;
	color: #faf69c;
}

.menu-ctnr h1 {
	top: 30px;
	text-align: center;
	font-size: 50px;
}

.menu-ctnr p {
	text-align: center;
	font-size: 16px;
}

.menu-btn {
	position: absolute;
	left: calc(50% - 150px);
	background-image: url('../art/images/btn_up.png');
    background-size: 300px 100px;
	width: 300px;
	height: 100px;
	cursor: pointer;
}

.menu-btn h3 {
	text-align: center;
	user-select: none;
	margin-top: 30px;
	font-size: 32px;
}

.menu-btn:active {
	background-image: url('../art/images/btn_down.png');
}

.menu-btn:active h3 {
	margin-top: 32px;
	margin-left: -5px;
}

#menu-about-btn {
	top: 160px;
}

#menu-settings-btn {
	top: 260px;
}

#menu-credits-btn {
	top: 360px;
}

#about-txt {
	top: 115px;
}

#about-tutorial-btn {
	top: 420px;
}

#about-back-btn {
	top: 550px;
 }

#settings-restart-btn {
	top: 360px;
}

.credits-title {
	font-size: 24px;
}

#credits-txt {
	top: 115px;
}

#play-tutorial-btn {
	top: 400px;
}

#menu-back-btn,
#settings-back-btn, #credits-back-btn,
#skip-tutorial-btn {
	top: 500px;
}

#tutorial-prompt {
	top: 130px;
}

/* Watering Can */
#watering-can {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 155px;
	height: 155px;
    animation-duration: 1500ms;
    animation-timing-function: linear;
	background-image: url('../art/images/water.png');
    background-size: 155px 155px;
	user-select: none;
	cursor: none;
	display: none;
}

#watering-can.flip {
	transform: scale(-1, 1);
}

#watering-can.water {
	animation-name: water;
	display: block;
}

#watering-can.water.flip {
	animation-name: water-flip;
}

@keyframes water { 
	0% { 
		transform: rotate(0deg); 
	} 50% { 
		transform: rotate(45deg); 
	} 100% {
		transform: rotate(0deg); 
	}
}

@keyframes water-flip {
	0% { 
		transform: rotate(0deg) scale(-1, 1); 
	} 50% { 
		transform: rotate(-45deg) scale(-1, 1); 
	} 100% {
		transform: rotate(0deg) scale(-1, 1); 
	}
}

/* Trust Container */

#trust-container {
	position: absolute;
	bottom: 20px;
	width: 100%;
	height: 65px;
}

#trust-container h1 {
	font-size: 30px;
	margin: 0;
	font-weight: normal;
}

#trust-bar {
	width: calc(100% - 10px);
	height: 14px;
	border: 3px solid #CCD4E1;
	border-radius: 8px;
	background-color: #555555;
	padding: 0px;
	overflow: hidden;
}

#trust-bar-inner {
	width: 50%;
	height: 14px;
	border-radius: 4px;
	
	-webkit-transition: width 0.5s ease-in-out;
	-moz-transition: width 0.5s ease-in-out;
	-o-transition: width 0.5s ease-in-out;
	transition: width 0.5s ease-in-out;
	
	background-image: url('../art/images/tile.png');
    background-size: auto 100%;
    background-repeat: repeat-x;
	overflow: hidden;
}

#trust-bar-inner-color {
	position: relative;
	content: ' ';
	height: 14px;
	border-radius: 4px;
	width: 100%;
	background: rgba(200,200,0, 0.5);
	transition: background 0.5s ease-in-out;
}