*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: arial, sans-serif;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid black;
  z-index: 1;
  width: 600px;
  height: 360px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0
}
li {
  padding: 10px 0;
}

a {
  text-decoration: none;
  color: inherit;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.wrapper {
  width: 600px;
  height: 360px;
  position: absolute;
  top: 20%;
  left: 25%;
}

#menu {
  position: absolute;
  width: 600px;
  height: 360px;
  border: 1px solid black;
  z-index: 2;
  text-align: center;
  background-color: grey;
}
#menu.main {
  background-image: url('imgs/menu-bg.png');
}
#menu.credits {
  background-image: url('imgs/credits-bg.png');
}

#progress {
  height: 12%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
#percent {
  color: white;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#progress-bar {
  width: 200px;
}

.sound {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 25px;
  cursor: pointer;
  z-index: 3;
}
.sound-on {
  background-image: url('imgs/soundOn.png');
  background-repeat: no-repeat;
}
.sound-off {
  background-image: url('imgs/soundOff.png');
  background-repeat: no-repeat;
}

#main {
  display: none;
  height: 60%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
#main h1 {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#info{
  background-image: url('https://scitechdaily.com/images/Dinosaur-Extinction-Asteroid-777x518.jpg');
  display: none;
  text-align: center;
  padding-top: 92px;
  z-index: 1;
  width: 600px;
  height: 360px;
  position: absolute;
  color: black;
}
#info2{
  background-image: url('https://i.guim.co.uk/img/media/691dd2d5905f13174ee5894a9d48a5565f2df34d/0_119_5582_3350/master/5582.jpg?width=620&quality=45&auto=format&fit=max&dpr=2&s=489eb0fdba59254dd67b1ae8a587aef5');
  display: none;
  text-align: center;
  padding-top: 92px;
  z-index: 1;
  width: 600px;
  height: 360px;
  position: absolute;
  color: white;
  background-position: center;
}
#info3{
  background-image: url('https://www.jetsetmag.com/wp-content/uploads/2019/03/dinosaur-bones.jpg');
  display: none;
  text-align: center;
  padding-top: 92px;
  z-index: 1;
  width: 600px;
  height: 360px;
  position: absolute;
  color: white;
  background-position: center;
}
#info4{
  background-image: url('https://cdn.amoanimals.com/e52fd6682b8ec3fe4173c9b7ac903d975669241584538299.png?width=600&height=400');
  display: none;
  text-align: center;
  padding-top: 92px;
  z-index: 1;
  width: 600px;
  height: 360px;
  position: absolute;
  color: white;
  background-position: center;
}
#info5{
  background-image: url('http://images.uncyc.org/en/9/97/Dinovolution.jpg');
  display: none;
  text-align: center;
  padding-top: 92px;
  z-index: 1;
  width: 600px;
  height: 360px;
  position: absolute;
  color: black;
  background-position: center;
}

.button {
  display: block;

  width: 150px;
  margin: 0 auto;
  height: 30px;
  line-height: 30px;
  border: 1px solid #AA2666;
  color: white;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  background-color: #FF4500;
  background-image: -webkit-linear-gradient(bottom, #FF4500 0%, #ffe600 100%);
  background-image:         linear-gradient(to bottom, #FF4500 0%, #ffe600 100%);
  border-radius: 5px;
}

.button:hover {
  background-color: #B30D5D;
  background-image: -webkit-linear-gradient(bottom, #ffe600 0%, #FF4500 100%);
  background-image:         linear-gradient(to bottom, #ffe600 0%, #FF4500 100%);
}

#credits {
  display: none;
  line-height: 30px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
#credits li {
  padding: 1px 0;
  padding-left: 20px;

}

.HTP, .HTP2, .developer {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.HTP {
  color: #fa8526;
}
.HTP2 {
  color: #e6e71f;
}
.developer {
  color: #13eb8a;
}

.back, .back:hover {
  margin-top: 10px;
}

#game-over,#game-over2, #game-over3, #game-over4, #game-over5{
  display: none;
  text-align: center;
  padding-top: 92px;
  z-index: 1;
  width: 600px;
  height: 360px;
  position: absolute;
  color: white;
  padding-top: 320px;
 
}
