@charset "utf-8";
/* CSS Document */

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
  opacity: var(--before-opacity, 1);

  /* Personalized Styles */
  /* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+6,000000+95&0.65+11,0+100 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 6%, rgba(0,0,0,0.65) 11%, rgba(0,0,0,0.04) 95%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 6%,rgba(0,0,0,0.65) 11%,rgba(0,0,0,0.04) 95%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 6%,rgba(0,0,0,0.65) 11%,rgba(0,0,0,0.04) 95%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a6000000′, endColorstr=’#00000000′,GradientType=0 ); /* IE6-9 */
}

body.ready-to-play {
  /* Personalized Styles */
  background: url('../img/forest-bg-1.jpg') center repeat-x;
  background-size: cover;
}

div.game-logo {
  transition: all 0.5s ease;
}

p {
  display: inline-block;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin: 0;

  /* Personalized Styles */
  font-size:35px;
  font-family: Gill Sans,Gill Sans MT,Calibri,sans-serif;
  color:green;
}

/* Start: Personalized Styles */
p.start-button {
  margin-top: 100px;
  z-index: 1;
}

p.start-button a {
  text-decoration: none;
  border:8px solid black;
  background:green;
  color:black;
}

p.start-button a:hover {
  background: red;
}
/* End: Personalized Styles */

body div.game-body {
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: all 1s ease;
}

body.ready-to-play div.game-body {
  opacity: 1;
}

#platform-container {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: visible;
}

.platform {
  width: 100%; /* Adjust the width of the platforms as needed */
  height: 20px; /* Adjust the height of the platforms as needed */
  background: blue;
  position: absolute;
  bottom: 0;
}

#player {
  position: absolute;
  bottom: 20px; /* Adjust the bottom position to match the platform height */
  left: 0;

  /* Personalized Styles */
  width: 160px;
  height: 150px;
  background: url(‘../img/caveman-cartoon-vector.jpg’) center no-repeat;
  background-size: contain;
}

.projectile {
  position: absolute;
  width: 35px;
  height: 5px;

  /* Personalized Styles */
  border: 1px solid blue;
  border-radius: 10px;
}

div.enemy {
  position: absolute;
  bottom: 20px; /* Adjust the bottom position to match the platform height */
  right: 0;

  /* Personalized Styles */	
  width: 120px;
  height: 95px;
  background: url('../img/147-1471921_green-cartoon-hyla-tree-frog-clip-evil-green.png') center no-repeat;
  background-size: contain;
}

/* Health Bar Styles */
div.health-bar {
  position: relative;
  margin: .5em 0 auto auto;
  overflow: hidden;
  transition: all 1s ease;

  /* Personalized Styles */
  width: 500px;
  height: 40px;
  border: 11px solid blue;
}

div.health {
  position: relative;
  width: 100%;
  height: 100%;

  /* Personalized Styles */	
  /* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f73513+0,299a0b+51 */
  background: rgb(247,53,19); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(247,53,19,1) 0%, rgba(41,154,11,1) 51%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(247,53,19,1) 0%,rgba(41,154,11,1) 51%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(247,53,19,1) 0%,rgba(41,154,11,1) 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f73513′, endColorstr=’#299a0b’,GradientType=1 ); /* IE6-9 */
}

div.energy-bar {
  position: relative;
  margin: .5em 0 auto auto;
  overflow: hidden;
  transition: all 1s ease;

  /* Personalized Styles */
  width: 500px;
  height: 40px;
  border: 11px solid blue;
}

div.energy {
  position: relative;
  width: 100%;
  height: 100%;

  /* Personalized Styles */	
  /* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f73513+0,299a0b+51 */
  background: rgb(247,53,19); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(247,53,19,1) 0%, rgba(41,154,11,1) 51%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(247,53,19,1) 0%,rgba(41,154,11,1) 51%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(247,53,19,1) 0%,rgba(41,154,11,1) 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f73513′, endColorstr=’#299a0b’,GradientType=1 ); /* IE6-9 */
}

div.score-bar {
  position: relative;
  margin: .5em 0 auto auto;
  text-align: left;
  overflow: hidden;
  transition: all 1s ease;

  /* Personalized Styles */	
  width: 500px;
  height: 40px;
  line-height: 40px;
  font-size: 40px;
  font-family: Gill Sans,Gill Sans MT,Calibri,sans-serif;
  color: green;
  font-weight: bold;
}

div.score {
  position:relative;
  width:100%;
  height:100%;
}

.audio-button {
  position: absolute;
  top: 1em;
  left: 1em;
}