@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/#ff3019+32,cf0404+78 */
  background: #ff3019; /* Old browsers */
  background: -moz-linear-gradient(top,  #ff3019 32%, #cf0404 78%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #ff3019 32%,#cf0404 78%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #ff3019 32%,#cf0404 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ff3019′, endColorstr=’#cf0404′,GradientType=0 ); /* IE6-9 */
}

body.ready-to-play {
  /* Personalized Styles */
  background: url('../img/doom-background-5.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: 50px;
  font-family: Copperplate,Copperplate Gothic Light,fantasy;
  color: Blue;
}

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

p.start-button a {
  text-decoration: none;
  border: 4px solid blue;
  background: red;
  color: blue;
}

p.start-button a:hover {
  background: black;
  color: yellow;
}
/* 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: 150px;
  height: 150px;
  background: url('../img/Doomguy.png') center no-repeat;
  background-size: contain;
}

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

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

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

  /* Personalized Styles */
  width: 100px;
  height: 100px;
  background: url('../img/shotgunner.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: 450px;
  height: 40px;
  border: 5px 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/#332304+0,704602+41,d31f04+60 */
  background: #332304; /* Old browsers */
  background: -moz-linear-gradient(left,  #332304 0%, #704602 41%, #d31f04 60%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #332304 0%,#704602 41%,#d31f04 60%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #332304 0%,#704602 41%,#d31f04 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#332304′, endColorstr=’#d31f04′,GradientType=1 ); /* IE6-9 */
}

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

  /* Personalized Styles */	
  width: 450px;
  height: 40px;
  border: 5px 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/#332304+0,704602+41,d31f04+60 */
  background: #332304; /* Old browsers */
  background: -moz-linear-gradient(left,  #332304 0%, #704602 41%, #d31f04 60%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #332304 0%,#704602 41%,#d31f04 60%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #332304 0%,#704602 41%,#d31f04 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#332304′, endColorstr=’#d31f04′,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: 450px;
  height: 40px;
  line-height: 40px;
  font-size: 40px;
  font-family: Copperplate,Copperplate Gothic Light,fantasy;
  color: red;
  font-weight: bold;
  border: 5px solid black;
}

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