/* CSS for The Lemon Club written by David Lee Designs */
/* Please don't steal my code, and if you must because you're too lazy to learn on your own, give credit where credit is due. Word! */

/*------BODY PROPERTIES------*/
body {
	margin:0;
	background-color:#111;
	font-size: 16px;
	letter-spacing: .04em;
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	color:#ffffff;
	text-align: center;
}

:hover {
	-o-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
.clear { clear:both; }
.clear:after {
	display:block;
	width:100%;
	content:' ';
	clear:both;
	height:0px;
}
.inside {
	padding:20px 20px 40px 20px;
}
.mainbody {
	background:#222;
	margin: auto;
}
.flex {
	display: flex;
	gap: var(--gap, 1rem);
}
.alignleft {
	float:left;
}
.alignright {
	float:right;
}
a {
	font: 'Roboto','Helvetica Neue', Helvetica, Arial, Sans-serif;
	color:#000;
	text-decoration:none;
	transition:all .33s ease-in-out;
}
a:hover {
	color:#FFFFFF;
}
::-moz-selection {
	color: #000;
	color: rgba(231, 220, 179, 0.85);
	background: rgba(0,0,0,.20);
	}
::selection {
	color: #000;
	color: rgba(231, 220, 179, 0.85);
	background: rgba(0,0,0,.20);
	}
h1, h2, h5 {
	font-family:'Roboto', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	font-weight:400;
	text-transform:uppercase;
}
h3 {
	font-family:'Roboto', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	font-weight:300;
	font-size: 20px;
	padding: 20px 0px 0px 0px;
	margin: 0px;
	text-transform:uppercase;
}
h4 {
	font-family:'Roboto', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	font-size: 28px;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	text-transform:uppercase;
	color:#FFFFFF;
}
img {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	line-height: 0px;
}
td {
	vertical-align: top;
	text-align: center;
}


/*------MAIN HEADER------*/
#header {
	background-color:#111;
	border-bottom: 4px solid #ffe700;
	-o-transition:background-color .5s ease-in-out;
	-moz-transition:background-color .5s ease-in-out;
	-webkit-transition:background-color .5s ease-in-out;
	min-height: 102px;
}
#header:hover {
	background:#444;
}
.inside_header {
	margin: auto;
	padding: 20px;
	max-width: 520px;
}
#logo {
	text-transform:uppercase;
	letter-spacing:.15em;
	line-height:80px;
	text-align:center;
	width:auto;
	margin:0;
	float:left;
	height: 145px;
}
#logo_02 {
	font: 24px 'Roboto', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	color:#ffffff;
	text-transform:uppercase;
	letter-spacing:6px;
	line-height:48px;
	margin: 0px 0px 0px 11px;
	padding: 0px 0px 0px 11px;
	border-left:2px solid #ffe700;
	float: left;
	height: 145px;
	font-weight: 900;
	display: inline;
	text-align: left;
}
#logo_02 a {
	color: #fff;
}
#logo_02 a:hover {
	color: #ccc;
}
@media screen and (max-width:768px) {
	#logo {
		margin:8px 10%;
		padding: 0px;
		float: center;
		text-align: center;
	}
	#logo_02 {		
		font-size: 0px;
		letter-spacing:0px;
		line-height:0px;
		border: 0px;
		margin: 0px;
		padding: 0px;
		height: 0px;
		width: 0px;
		display:none;
	}
	#header h2 {
		font-size: 0px;
		letter-spacing:0px;
		line-height:0px;
		border: none;
		display: none;
		margin: 0px;
		padding: 0px;
	}
}



/*------CONTENT CONTAINER------*/
.content_container {
	background: #333;
	position:relative;
	margin: auto;
	max-width: 1400px;
	min-height: 85vh;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.4);
}
#content {
	border-left:6px solid #333;
	-o-transition:border-left .5s ease-in-out;
	-moz-transition:border-left .5s ease-in-out;
	-webkit-transition:border-left .5s ease-in-out;
}
#content:hover {
	border-left:6px solid #ffe700;
}



/*------NAV BAR PROPERTIES------*/
#navbar {
	background-color:#ffe700;
	-o-transition:background-color .5s ease-in-out;
	-moz-transition:background-color .5s ease-in-out;
	-webkit-transition:background-color .5s ease-in-out;
	min-height: 38px;
	text-align: right;
}
#navbar:hover {
	background-color:#ffe700;
}
.inside_navbar {
	margin: auto;
	padding: 8px 16px 8px 8px;
	max-width: 1400px;
	float: right;
}
.primary_navigation {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: right;
	text-transform: uppercase;
}
.primary_navigation a {
	text-decoration: none;
	margin: 0px;
	padding: 8px 6px;
	font-size:18px;
}
.primary_navigation a:hover {
	text-decoration: none;
	color:#fff;
	transition: .5s;
}
.dropdown {
	float: right;
	overflow: hidden;
	cursor: pointer;
	border: none;
	outline: none;
	color: #b5c2ca;
	font-size: 12px;
	padding: 2px 0px 12px 8px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	text-transform: uppercase;
}
.dropbtn {
	cursor: pointer;
	border: none;
	outline: none;
	color: #333;
	font-size: 16px;
	padding: 0 2px 8px 8px;
	background-color: inherit;
	font-family: inherit;
	margin: -3px 0 0 -5px;
	text-transform: uppercase;
	font-weight: 550;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
	text-decoration: none;
	color:#000;
	transition: .5s ease-in-out;
}
.dropdown-content {
	display: none;
	position: absolute;
	right:0px;
	top: 42px;
	float: left;
	background-color: #ffe700;
	color: #000;
	min-width: 160px;
	box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.8);
	z-index: 1;
	border-radius: 9px; 
}
.dropdown-content a {
	float: none;
	color: #000;
	padding: 10px 10px;
	display: block;
	text-align: left;
	font-size: 14px;
	border-radius: 8px; 
}
.dropdown-content a:hover {
	background-color: #333;
	color: #ffe700;
}
.show {
	display: block;
}
.dropdown_button {
	font-size: 16px;
	text-transform: uppercase;
}



/*------SECTION PROPERTIES------*/
.section {
	background-color:#333;
	position:relative;
	margin: auto;
	max-width: 1400px;
	min-height: 20px;
	padding: 0;
	-o-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
.section_center {
	box-sizing: border-box;
	position:relative;
	max-width: 1400px;
	min-height: 140px;
	-o-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	text-align: center;

}
.section #section_half {
	padding:0;
	float:left;
	min-height: 80px;
	text-align: left;
}
.section #left {
	text-align: left;
	padding:0;
	margin:0 0 120px 0;
	float:left;
	width:65%;
	min-height:200px;
	line-height: 0px;
}
.section #right {
	text-align: left;
	padding:0;
	margin:0 0 120px 0;
	float:right;
	width:35%;
	min-height:400px;
}
.section #leftv2 {
	text-align: left;
	padding:0;
	margin:0 0 120px 0;
	float:left;
	min-width:35%;
	min-height:400px;
}
.section #rightv2 {
	text-align:left;
	padding:0;
	margin:0 0 120px 0;
	float:right;
	width:65%;
	min-height:200px;
	line-height: 0px;
}
@media screen and (max-width:1000px) {
	.section #left {
		text-align:left;
		padding:0px 0;
		float:left;
		width:100%;
		border-right:none;
		margin:0 0 0 0;
		line-height: 0px;
	}
	.section #right {
		padding:0px 0;
		float:left;
		width:100%;
		margin:0 0 0 0;
	}
	.section #leftv2 {
		text-align:left;
		padding:0px 0;
		margin:0 0 0 0;
		float:left;
		width:100%;
		border-right:none;
	}
	.section #rightv2 {
		padding:0px 0;
		margin:0 0 0 0;
		float:left;
		width:100%;
		line-height: 0px;
	}
}
.section_title {
	font-size:24px;
	color:#ffe700;
	border-bottom:1px solid #000;
	padding:0 0	20px 0;
	margin:0 0 0 0;
	font-family:'Roboto', 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8) !important;
}
.section_title a {
	font-size: 24px;
}

.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	padding: 20px;
}

.item {
	background:rgba(0,0,0,0.3);
	border-radius: 12px;
	padding: 20px;
	width: 300px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}



/*------BANNER PROPERTIES------*/
#banner {
	max-width: 100%;
	height: auto;
	margin: 0 0 80px 0;
	padding: 0;
}
#banner img {
	line-height: 0px;
}



/*------ABOUT PROPERTIES------*/
#about {
	line-height: 26px;
}
#about .section_content {
	padding:0px 3% 0 3%; 
}
#about sup {
	font: 28px 'Roboto', 'Times New Roman', Times, Serif;
	color:#fff;
	top: 10px;
	position:relative;
	margin: 0px;
}
#about img {
	float:right;
	margin:16px;
	max-width: 400px;
	height: auto;
	border: solid 1px #444;
}
@media screen and (max-width:768px) {
	#about img {
		display: block;
		margin: 16px 8px 16px 4%;
		max-width: 320px;
		height: auto;
	}
}


/*------STORE PROPERTIES------*/
#store {
	line-height: 26px;
	text-align: left;
}
#store .section_content {
	padding:10px 3% 0 3%;
	min-height: 150px;
	max-width: 400px;
}
#store img {
	max-width: 600px;
	height: auto;
}


/*------FOOTER------*/
#footer {
	font-size:16px;
	text-align:center;
	color:#fff;
	letter-spacing: 4px;
	padding: 16px;
	background:#111;
	line-height: 20px;
}
#footer a {
	font-size:16px;
	color:#ffe700;
	text-decoration:none;
	text-transform:uppercase;	
}
#footer a:hover {
	font-size:16px;
	color:#fff;
	font-weight: 600;

}
#footer h5 {
	margin-top: 12px;
	font-size:14px;
	color:#fff;
	text-transform:uppercase;
}
#footer i {
	margin-top: 20px;
	font-size: 18px;
}

#footer #i2 {
	margin-top: 12px;
	font-size: 12px;
}



/*------PRELOADER------*/
@media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
@media print {
	div#preloader, 
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}

/*------THE LEMON CATCH------*/
h2 {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #ffe700;
  margin: 20px 0 10px;
}

.game-wrapper {
  background: #222;
  max-width: 620px;
  margin: 20px auto;
  padding: 20px;
  border-top: 4px solid #ffe700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.canvas-wrapper {
  position: relative;
  width: 600px;
  margin: 0 auto;
}

canvas {
  display: block;
  background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
  border: 3px solid #ffe700;
  box-shadow:
    0 0 20px rgba(255,231,0,0.2),
    inset 0 0 20px rgba(0,0,0,0.8);
}

.scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );
}

.ui-bar {
  width: 600px;
  margin: 10px auto;
}

#juiceContainer {
  width: 100%;
  height: 14px;
  background: #222;
  border: 2px solid #ffe700;
  margin-bottom: 8px;
}

#juiceFill {
  height: 100%;
  width: 0%;
  background: #ffe700;
}

#scoreText {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
}

button {
  background: #ffe700;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  margin: 10px;
  border-radius: 9px; 
}

#startScreen,
#gameOverScreen,
#upgradeScreen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#gameOverScreen,
#upgradeScreen {
  display: none;
}