#HIGHSCORE {
	position:absolute;
	left:50%;
	width:250px;
	overflow:visible;
	margin-left:-175px;
	font-family:Exo;

}
#gameoverscreen, #container {
	margin: 0px !important;
  }

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
	.tweet{
		font-size:1rem;
	
	}
}


#score {
	font-size:4vmin;
	text-align:center;
	width:30%;
}

#highscores {
	text-align:center;
	list-style:none;
}


#overlay {
	display: none;
  }

  .unselectable.centeredSubHeader {
	margin: 0px !important;
	position: initial !important;
	left: 0px !important;
	width: 100 !important;
	max-width: 100% !important;
  }

  #pauseBtn {
	display: none !important;
  }
  #restartBtn {
	display: none !important;
  }
  

.centeredHeader.unselectable {
  display: none;

}
#pauseBtn {
	display:none;
	position:fixed;
	margin-bottom:7px;
	width:72px;
	height:72px;
	margin-right:11px;
	z-index:3000;
	color:#232323;
	cursor:pointer;
	right:0;
	bottom:0;
	z-index:99;
}

#restartBtn {
	display:none;
	position:fixed;
	margin-bottom:7px;
	width:72px;
	height:72px;
	margin-left:11px;
	z-index:3000;
	color:#232323;
	cursor:pointer;
	bottom:0;
	z-index:99;
}
#startBtn {
	position:absolute;
	left:40%;
	top:38%;
	height:25%;
	width:25%;
	z-index:99999999;
	cursor:pointer;
}

#helpScreen {
	height:100%;
	width:100%;
	z-index:3001;
	position:fixed;
	top:0;
	margin:0;
	font-size:15px;
	text-align:center;
	display:none;
	color:#232323;
	background-color:rgba(236,240,241,1);
}

#colorBlindBtn {
	position:absolute;
	width:120px;
	height:20px;
	z-index:9999;
	left:47%;
	top:65%;
	font-size:15px;
	text-align:center;
	color:#232323;
	cursor:pointer;
}

#inst_main_body {
	padding:0px;
	font-size:1.2em;
	left:50%;
	top:50%;
	position: absolute;
	text-align:left;
	max-width:400px;
	/*margin-top:30px;*/
	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
}




#instructions_head {
	text-align:center;
	font-size:1.5em;
	padding-bottom:4px;
}


#highScoreInGameTextHeader {
	color: #bdc3c7;
	width:100%;
}


#highScoreInGameText {
	position: absolute;
	top:10px;
	text-align: center;
	width:200px;
	left:50%;
	margin-left:-100px;
}

#currentHighScore {
	color: #2c3e50;
	width:100%;
	margin-top: -5px;
	font-size:2em;
}
/*  */



#clickToExit {
	cursor:pointer;
}
/* Outer border styling */
#outer-games {
  
}

/* Share button container styling */
#socialShare {
    display: flex;
    justify-content: center; /* Center the share button */
    align-items: center;
    margin-top: 20px; /* Space above */
}

/* Styling the share button SVG */
#socialShare svg {
    cursor: pointer; /* Change cursor to pointer */
    width: 48px; /* Size of the icon */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Space between icons */
}

/* Text for the share button */
#socialShare text {
    font-family: 'Exo', sans-serif; /* Font family */
    font-size: 18px; /* Font size */
    fill: #3498DB; /* Text color */
    cursor: pointer; /* Change cursor to pointer */
}

/* High score text styling */
#highScoreInGameText {
    text-align: center; /* Center align text */
    font-family: 'Exo', sans-serif; /* Font family */
    color: #3498DB; /* Text color */
    margin: 20px 0; /* Margin above and below */
    font-size: 24px; /* Font size */
}

/* Responsive styling */
@media (max-width: 600px) {
    #outer-games {
        padding: 10px; /* Reduce padding on small screens */
    }

    #socialShare {
        flex-direction: column; /* Stack share buttons vertically */
        align-items: center; /* Center align items */
    }

    #socialShare svg {
        margin-right: 0; /* Remove right margin on small screens */
        margin-bottom: 10px; /* Space below each icon */
    }
}

#highScoresTitle {
	display: none;

}
.score {
	display: none;
  }
  #gameoverscreen{
	display: none;
  }

  #currentHighScore{
	display: none;



  }
  #bottomContainer{
	display: none;

  }
#canvas {

	background-color:#ecf0f1;
	width: 100% !important;
	height: auto !important;
	border: 2px solid #3498DB; /* Border color */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding inside the border */
    margin: 20px auto; /* Center the outer games container */
    max-width: 800px; /* Set a max width */
    background-color: #ffffff; /* Background color */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}



#restart{
	display:none;
	cursor:pointer !important;
	margin:0;
	padding:0;
	bottom:15px;
	position:absolute;
	left:calc(50% - 124px);
	transform:translate(-50%, 0%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
	margin-bottom:-3.5px;
}

#socialShare{
	display:none;
	margin:0;
	padding:0;
	bottom:0;
	margin-bottom: 6.5px;
	position:absolute;
	left:calc(50% + 30px);
	transform:translate(-50%, 0%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
    padding-bottom: 2px;
}

.unselectable {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
#afterhr {
	margin:0;
	padding:0;
	margin-bottom:-10px;
	padding-bottom:-10px;
}

#gameoverscreen {
	padding:8px;
}
@font-face {
	font-family:Exo;
	font-weight:light;
	src:url("./fonts/Exo2-ExtraLight.otf") format("opentype");
}

@font-face {
	font-family:Exo;
	src:url("./fonts/Exo2-Regular.otf") format("opentype");
}

@font-face {
	font-family:Exo;
	font-weight:bold;
	src:url("./fonts/Exo2-SemiBold.otf") format("opentype");
}

.GOTitle {
	font-weight:bold;
	font-size:24.2000px;
}

.scoreNum {
	font-weight:normal ! important;
}

#cScore {
	font-size:60.5000px;
	font-weight:light;
	margin-bottom:5px;
	margin-top:-10px;
}

#highScoresTitle {
	margin-bottom:2px;
}

.score {
	font-weight:light;
	line-height:18px;
}




#bottomContainer {
	position:absolute;
	width:100%;
	bottom:0px;
}

#androidBadge {
	position:absolute;
	height:41px;
	margin-top:5px;
	left:calc(50% - 66px);
	transform:translate(calc(-50% - 4px), -1px);
	-webkit-transform:translate(calc(-50% - 4px), -1px);
	-moz-transform:translate(calc(-50% - 4px), -1px);
	-ms-transform:translate(calc(-50% - 4px), -1px);
}

#iOSBadge {
	margin-top:5px;
	position:absolute;
	left:calc(50% + 65px);
	transform:translate(calc(-50% - 4px), 0%);
	-webkit-transform:translate(calc(-50% - 4px), 0%);
	-moz-transform:translate(calc(-50% - 4px), 0%);
	-ms-transform:translate(calc(-50% - 4px), 0%);
}

#authors {
	position:absolute;
	width:200px;
	bottom:0px;
	left:50%;
	transform:translate(-50%, 0%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	-ms-transform:translate(-50%, 0%);
}