@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/#fc260a+0,f7f9f7+50,374af2+100 */
  background: #fc260a; /* Old browsers */
  background: -moz-linear-gradient(45deg,  #fc260a 0%, #f7f9f7 50%, #374af2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg,  #fc260a 0%,#f7f9f7 50%,#374af2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg,  #fc260a 0%,#f7f9f7 50%,#374af2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fc260a’, endColorstr=’#374af2′,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

body.ready-to-play {
  /* Personalized Styles */
  background: url('../img/mountains-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:100px;
  font-family: Brush Script MT,cursive;
  color: #008000;
}

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

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

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: 100px;
  height: 144px;
  background: url('../img/Character.png') center no-repeat;
  background-size: contain;
}

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

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

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

  /* Personalized Styles */
  width: 70px;
  height: 90px;
  background: url(‘../img/Enemy.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: 400px;
  height: 40px;
  border: 2px solid black;
}

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

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

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

  /* Personalized Styles */	
  width: 400px;
  height: 40px;
  border: 2px solid black;
}

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

  /* Personalized Styles */	
  /* Permalink – use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fc260a+0,1ffc02+100 */
  background: #fc260a; /* Old browsers */
  background: -moz-linear-gradient(left,  #fc260a 0%, #1ffc02 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #fc260a 0%,#1ffc02 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #fc260a 0%,#1ffc02 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fc260a’, endColorstr=’#1ffc02′,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: Brush Script MT,cursive;
  color: white;
  font-weight: bold;
  border: 2px solid black;
}

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