/* General Body Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #e8f5e9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url(../assets/background.png);
    background-size:cover;
   
  }
  
  /* Game Container */
  #game-container {
    position: relative;
    width: 100vh;
    height: 80vh;
    background-color: transparent;
    overflow: hidden;
    display: flex;

  }
  
  /* Player */
  #player {
    position: absolute;
    width: 128px;
    height: 128px;
    bottom: 5px; 
  }
  #gemPlant {
    position: absolute;
    width: 200px;
    height: 200px;
    right: 0;
    bottom: 0px;
    background: url(../assets/gem-plant.png);
    background-size: 110%;
    background-position: center;
  }
  
  /* Slime (Enemy) */
  .slime {
    position: absolute;
    width: 128px;
    height: 128px;
    background: url(../assets/Slimejump.png);
    background-position: -896px 0;

  }
  /*Messages Block*/
  #message-game{
    position: absolute;
    margin: auto ;
    top:0;
    right: 0;
    bottom: 15%;
    left:0;
    width: 75%;
    height: 50%;
    overflow: hidden;

       /* Flexbox Centering */
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: center;  
    
    text-align: center;   
    color: white;
  }
  .counter{
    position: absolute;
    top:0;
    right: 0;
    float:right;
    width: 25%;
    overflow: hidden;
    text-align: center;
    background-color:rgba(255, 255, 255, 0.637);
    font-family: "Jersey 20", serif;
    font-size: x-large;
    border-radius: 25px;
    box-shadow: white 0px 0 10px;
    
  }
  .h1{
    font-family: "Jersey 20", serif;
    font-size: 5rem;
    text-shadow:black 1px 0 10px;
    font-stretch:extra-expanded;
    color:yellowgreen;
    margin: 0;
  }
  .h2{
    font-family: "Jersey 20", serif;
    font-size: 2rem;
    text-shadow:white 1px 0 2px;
    color:rgb(156, 59, 2);
    margin: 0;
  }
  .p{
    font-family: "Jersey 20", serif;
    font-size: 1.5rem;
    color:black;
    background-color:rgba(255, 255, 255, 0.637);
    border-radius: 25px;
    padding: 5px 25px;
    box-shadow: white 0px 0 10px;

    
  }
  /*BTN*/
  .BTN{
    position: absolute;
    margin: auto;
    top:0;
    right: 0;
    bottom: -50%;
    left:0;
    width:25%;
    height: 10%;
    overflow: hidden;
    background-color: white;
    border-radius: 10px;

    font-family: "Jersey 20", serif;
    font-size: 1rem !important;

  }

  /* Font */
  .jersey-20-regular {
    font-family: "Jersey 20", serif;
    font-weight: 400;
    font-style: normal;
  }
  

  /* Animation */
  .player-run{
    background: url(../assets/Characterrun.png);
    animation: playerrunning 1s steps(8) infinite;
  }
  @keyframes playerrunning{
    to { background-position: -1024px;}
  }
  .player-stop{
    background: url(../assets/character-Idle.png);
    animation: playerrunning 1s steps(8) infinite;
  }
  @keyframes playerstop{
    to { background-position: -640px;}
  }
  .change-dead{
    background: url(../assets/characterDead.png);
    animation: changedead 0.5s steps(5) ;
  }
  @keyframes changedead{
    to { background-position: -640px;}
  }
  .player-left{
    transform: scaleX(-1);
  }
  .player-jump{
    background: url(../assets/characterJump.png);
    animation: playerjump 3s steps(8);
  }
  @keyframes playerjump{
    to {background-position: -1024px;}
  }
  .slime-attack{
    background: url(../assets/slimeAttack_1.png);
    animation: slimeattack 0.5s steps(4)infinite;
  }
  @keyframes slimeattack{
    to { background-position: -512px;}
  }
  .player-kill{
    background: url(../assets/characterKill.png);
    animation: slimeattack 0.5s steps(4) infinite;
  }
  @keyframes player-kill{
    to { background-position: -384px;}
  }