/* Main Containers */
body,
button {
  font-family: VT323;
}

button {
  font-size: xx-large;
}

.outer-container {
  height: 720px;
  width: 1280px;
  background: #eee;
  border: 5px solid gainsboro;
}

.game-window {
  height: 720px;
  width: 1280px;
  float: left;
  position: relative;
}

/* Game Section --- Right Section */

#actual_game {
  position: absolute;
  height: 720px;
  width: 1280px;
  background-color: white;
  z-index: -1;
  right: 0px;
  top: 0px;

}

#game_right_section {
  height: 600px;
  width: 320px;
  position: absolute;
  left: 960px;
  top: 0px;
  color: black;
  z-index: -1;
}

#scoreword,
#danger,
#level {
  text-align: center;
  font-size: 60px;
}

#score_num,
#danger_num,
#level_num {
  text-align: center;
  font-size: 40px;
  color: darkblue;
}

#player {
  position: absolute;
  width: 62px;
  left: 600px;
  top: 300px;
  z-index: 9;
}

.curAstroid {
  position: absolute;
  height: 42px;
  width: 42px;
  z-index: 9;
  right: 0px;
  top: 0px;
}

.curAstroid img {
  position: relative;
  z-index: 10;
  height: 80px;
  left: -17px;
  top: -15px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Add your styling here */
#Background {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

#block {
  width: 100%;
  height: 100px;
  background-color: darkslateblue;
  border-bottom: 6px solid white;
  border-bottom-style: groove;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 100px;
  z-index: 2;
  text-align: center;
  margin: auto;
  color: white;
}

#title {
  position: relative;
  top: -70%;
  font-size: 100px;
  z-index: 3;
}

#asteroid1 {
  position: absolute;
  left: 0;
  height: 100px;
}

#asteroid2 {
  position: absolute;
  right: 0;
  top: 0;
  height: 100px;
}


#settings {
  height: 690px;
  width: 600px;
  background-color: #483d8b;
  position: absolute;
  top: 2px;
  left: 327px;
  z-index: -1;
  text-align: center;
  color: white;
  margin: auto;
  border: 3px solid grey;
  padding: 10px;
}

.settings {
  font-size: 50px;
}

#SettingsHeader {
  font-size: 60px;
  top: -8%;
}

.HTP {
  height: 700px;
  width: 1260px;
  background-color: gainsboro;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: -1;
  text-align: center;
  color: black;
  margin: auto;
  padding: 10px;
}

#btns {
  text-align: center;
  margin: auto;
}

.diff {
  color: white;
  background-color: #800080;
  border: 3px solid black;
  position: relative;
  left: auto;
  height: 65px;
  width: 150px;
}

#Close {
  position: absolute;
  bottom: 5%;
  left: 38%;

}

.landbtn {
  position: absolute;
  left: 42%;
  font-size: 40px;
  height: 100px;
  width: 200px;
  background-color: #483d8b;
  color: white;
}

#Play {
  top: 40%;
}

#sett {
  top: 60%;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

button:hover {
  border-color: green;
  border-width: 3px;
}

#norm {
  border-color: yellow;
}

.HTPimg {
  position: relative;
  height: 100px;
  width: 100px;
  top: -20%;
}

#HTPasteroid {
  left: 0%;
  top: -15%
}

#HTPshield {
  left: -3%;
}

#HTPportal {
  left: 2%;
}

.HTPpar {
  position: relative;
  top: -10%;
  font-size: 50px;
}

#Collect {
  top: -21%;
}

#Gain {
  top: -25%;
}

#HTPtitle {
  position: relative;
  top: -8%;
  font-size: 75px;
}

#HTPStart {
  position: absolute;
  left: 42%;
  font-size: 40px;
  bottom: 5%;
  background-color: gainsboro;
  border-width: 1px;
  border-color: black;
  color: black;
  width: 200px;
  height: 75px;
}

#Ready {
  height: 700px;
  width: 1260px;
  background-color: white;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: -1;
  text-align: center;
  color: black;
  margin: auto;
  padding: 10px;
}

#ReadyTitle {
  position: relative;
  top: 25%;
  font-size: 75px;
}

#Readyimg {
  position: relative;
  top: 23%;
}

#instructions {
  position: relative;
  top: 25%;
  font-size: 50px;
}

#game_right_section2 {
  height: 600px;
  width: 320px;
  position: absolute;
  left: 960px;
  top: 0px;
  color: black;
  z-index: -1;
}

#score_num2,
#danger_num2,
#level_num2 {
  text-align: center;
  font-size: 40px;
  color: darkblue;
}

#GOscreen {
  height: 300px;
  width: 450px;
  text-align: center;
  font-size: 30px;
  background-color: #483d8b;
  color: white;
  position: absolute;
  top: 263px;
  left: 414;
  z-index: -1;
}

#Reset {
  position: relative;
  left: auto;
  top: auto;
}