/* All GUI markup for the Case and game graphics - Version:	v01 */

/* ========================= HTML & BODY ==================================== */
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  background-color: #000000;
  color: #ccc;
  font-family: 'Retro';
  font-size: 1.2vw;
}
* {
	box-sizing: border-box;
}
.scanlines {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
 .scanlines::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 4px, 4px 100%;
  pointer-events: none;
}
@font-face {
  font-family: Digital;
  src: url(./src/fonts/digital.ttf);
}
@font-face {
  font-family: Arka;
  src: url(./src/fonts/arka.ttf);
}
@font-face {
  font-family: Retro;
  src: url(./src/fonts/retro.ttf);
}

/* ========================= MAIN GUI ELEMENTS ============================== */

.screen {
	width: 100%;
	height: 100%;
  text-align: center;
}
.continue {
  background-color: #000444;
  box-shadow: 10px 10px 20px 15px #080808;
  border: 0.2vw solid #0083ff;
  color: #ccc;
  font-family: 'Retro';
  font-size: 0.9vw;
  font-weight: bold;
  border-radius: 1vw;
  height: 5vh;
  width: 10vw;
  margin: 0 auto;
  padding: 0;
	cursor: pointer;
}
.continue:focus {
  outline: 0;
}
.continue:hover {
  border: 0.2vw solid #ccc;
}
.continue:disabled {
  background-color: #333333;
  color: #aaaaaa;
  border: 0.2vw solid #eeeeee;
}

/* ========================= START SCREEN =================================== */

#startScreen {
  padding-top: 30%;
  background-image: url("./src/backgrounds/synthwave_logo.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.start_menu {
  background-color: rgba(0,1,18,0.9);
  border-radius: 1.5vw;
  border: 0.3vw solid #ccc;
  box-shadow: 10px 10px 20px 15px #080808;
  clear: both;
  width: 19vw;
  height: 31vh;
  margin: 0 auto;
  padding: 0.9vw 0;
  text-align: center;
}
.start_menu button {
  background-color: rgba(0,131,255,0.1);
  border-radius: 1vw;
  border: 0.1vw solid #0083ff;
  color: #bbb;
  font-family: 'Retro';
  font-size: 0.9vw;
  font-weight: bold;
  height: 4.5vh;
  width: 15vw;
  margin: 1vh auto;
  padding: 0.3vw;
	cursor: pointer;
}
#menu1 {
  background-color: rgba(0, 153, 51, 0.7);
  border: 0.25vw solid rgba(0, 204, 68, 0.7);
}
.start_menu button:focus {
  outline: 0;
}
.start_menu button:hover {
  background-color: rgba(0,131,255,0.3);
  border: 0.2vw solid #0083ff;
}
#menu1:hover {
  background-color: rgba(0, 204, 68, 0.8);
  border: 0.25vw solid rgba(0, 204, 68, 0.8);
  color: #eee;
}
/* ========================= GAME CORE ====================================== */

#gameInfos {
  position: relative;
  float: left;
  padding-top: 7vh;
  width: 29%;
  height: 100%;
  background-color: #000111;
  text-align: center;
}
#gameInfos span {
  background-color: #000111;
  border: 0.2vw solid #0083ff;
  border-radius: 0.2vw;
  padding: 0.2vw;
}
.info_title {
  margin-bottom: 3vh;
}
.info_value {
  border: 0;
  background-color: #000444;
  width: 10vw;
  height: 2.5vh;
  font-family: 'Retro';
  font-size: 1.0vw;
  color: #bbb;
  text-align: center;
  margin-bottom: 3vh;
  padding: 0.4vw;
}
#gameBackground {
  float: left;
  width:  71%;
  height: 100%;
}
#gameCanvas {
  width:  100%;
  height: 100%;
  image-rendering: pixelated;
}
.back_blue {
  background-image: url("./src/backgrounds/back_blue_1.png");
  background-repeat: repeat;
  opacity: 0.8;
}
.back_green {
  background-image: url("./src/backgrounds/back_green_1.png");
  background-repeat: repeat;
  opacity: 0.8;
}
.back_red {
  background-image: url("./src/backgrounds/back_red_1.png");
  background-repeat: repeat;
  opacity: 0.8;
}
.back_circuit {
  background-image: url("./src/backgrounds/back_circuit_1.png");
  background-repeat: repeat;
  opacity: 0.8;
}
.back_boss {
  background-image: url("./src/backgrounds/back_boss_1.png");
  background-repeat: repeat;
  opacity: 0.8;
}

/* ========================= PAUSE SCREEN =================================== */

#pauseScreen {
  padding-top: 15%;
}
#pauseScreen span {
  background-color: #000111;
  border: 0.2vw solid #0083ff;
  border-radius: 0.5vw;;
  padding: 0.5vw;
}
#pauseScreen div {
  margin: 0 auto;;
  border-radius: 1vw;
  background-color: #000111;
  border: 0.2vw solid #0083ff;
  width: 35vw;
  height: 24vh;
}

/* ========================= OPTIONS SCREEN ================================= */

#optionScreen {
  padding-top: 10%;
  background-image: url("./src/backgrounds/synthwave.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.options {
  margin: 0 auto;
  padding: 2vw;
  border-radius: 1vw;
  background-color: #000111;
  border: 0.2vw solid #0083ff;
  width: 75vw;
  height: 55vh;
  text-align: left;
  line-height: 2;
}
.pass_container {
  margin-top: 5vh;
}
.pass_container td {
  padding-right: 1vw;
}
.pass_input {
  background-color: #0043af;
  border: 0.2vw solid #0083ff;
  color: #ccc;
  font-family: 'Retro';
  font-size: 1.1vw;
  width: 10vw;
  height: 4vh;
  padding: 0.3vw;
}
.pass_input:focus {
  outline: 0;
}
.valid {
  color: green;
  border: 0.2vw solid green;
  background-color: #90ee90;
}
.valid:before {
  content: "Correct";
}
.invalid {
  color: #800000;
  border: 0.2vw solid #800000;
  background-color: #ee9090;
}
.invalid:before {
  content: "Incorrect";
}

/* ========================= HOW TO PLAY ==================================== */

#controlsScreen {
  font: 1.0vw 'Courier Prime';
  text-align: left;
  background-image: url("./src/backgrounds/synthwave.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.controls_group {
  width: 80vw;
  height: 80vh;
  margin: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -45%);
}
.controls {
  position: relative;
  padding: 1.5vw;
  border-radius: 1vw;
  background-color: #000111;
  border: 0.2vw solid #0083ff;
}
.controls_title {
  color: #0979B9;
  font: 0.9vw 'Retro';
  margin: 0 0 3vh 0;
}

/* ========================= SCORES ========================================= */

#highscoresScreen {
  padding-top: 4%;
  background-image: url("./src/backgrounds/synthwave.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.score_title {
  margin: 0 auto 3% auto;
  font-size: 1.5vw;
  line-height: 2.5;
  color: #0083ff;
  width: 60%;
  height: 15%;
  text-align: center;
  background-color: rgba(0,1,18,0.9);
  border-radius: 1vw;
}
.score_container {
  width: 65%;
  margin: 0 auto;
  background-color: rgba(0,1,18,0.8);
}
.score_table {
  width: 100%;
  text-align: center;
  border-spacing: 0.5vw;
  border-collapse: separate;
  font-size: 1.0vw;
}
.score_table th {
  background-color: rgba(0,131,255,0.3);
  padding: 0.4vw;
}
.score_cell {
  background-color: rgba(0,131,255,0.1);
  padding: 0.4vw;
}
.score_cell_high {
  background-color: rgba(0,131,255,0.4);
  padding: 0.4vw;
  color: #eee;
}
.score_gold {
  height: 95%; width: 95%;
  background-color: #DAA520;
  border-top: 0.2vw solid #ffe560;
  border-left: 0.2vw solid #ffe560;
  border-bottom: 0.2vw solid #6a3500;
  border-right: 0.2vw solid #6a3500;
  color: #000444;
  margin: 0 auto;
}
.score_silver {
  height: 95%; width: 95%;
  background-color: #bcbcbc;
  border-top: 0.2vw solid #fcfcfc;
  border-left: 0.2vw solid #fcfcfc;
  border-bottom: 0.2vw solid #4c4c4c;
  border-right: 0.2vw solid #4c4c4c;
  color: #000444;
  margin: 0 auto;
}
.score_bronze {
  height: 95%; width: 95%;
  background-color: #b45701;
  border-top: 0.2vw solid #f49741;
  border-left: 0.2vw solid #f49741;
  border-bottom: 0.2vw solid #640000;
  border-right: 0.2vw solid #640000;
  color: #000444;
  margin: 0 auto;
}
#nameScreen {
  padding-top: 10%;
}
.new_score {
	font-size: 4.0vw;
	color: #0083ff;
  margin-bottom: 10vh;
}
.your_score {
  margin-bottom: 10vh;
}
#gameoverScreen {
  padding-top: 10%;
}
.logo_gameover {
  margin: 0 auto 20vh auto;
	font-size: 6.0vw;
	color: #0083ff;
}

/* ========================= DEBUGINFO ====================================== */

.debug_input {
  border: 0;
  background-color: #002200;
  width: 1vw;
  color: #00AA00;
  text-align: right;
  font-size: 0.7vw;
  margin: 0 0 0 0.2vw;
}
.debug_table {
  font: 0.9vw 'Courier Prime';
  background-color: #000111;
  text-align: left;
}