/*Defining variables in css, the pixel size will be used for resizing the image*/
:root{
  
  --pixel-size: 3;
}



html, body {
     min-height: 100%;
}

body{
  background: url("https://i.pinimg.com/originals/68/a5/21/68a52124240595a410900e4e670aecf6.png") no-repeat;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  image-rendering: pixelated;
  

}



/* we are marking width height in red the first character to then hide with overflow hidden the other character movements of the spreadsheet */
.Character {
  /*with calc we are only resizing the container, we are putiplying the width and the height by 6*/
  width: calc(60px * var(--pixel-size));
  height: calc(70px * var(--pixel-size));
  /*background: red;*/
  overflow: hidden;
  position: relative;
  /*moving character to center with margin*/
  margin: 4em auto;

}

/*Here we are applying the animation below*/
.Character_spritesheet {
  /*We chose first the name of the animation then after how many seconds will be done the animation. Finally we use steps(4) with infinite in orde to indicate the 4 beacuse there are 4 movements and infinite to repeat everytime*/
  animation: moveSpritesheet 1s steps(4) infinite;
  /*In order to increase the character we multiply the 4 frames by 70px height each.
  4 * 70 = 200px*/
  width: calc(280px * var(--pixel-size));
  position: absolute;
}

.Character_shadow{
  position: absolute;
  width: calc(70px * var(--pixel-size));
  height: calc(70px * var(--pixel-size));
}



/*After resizing the image with calc, the image will look blury, so to fix it we use image rendering so the design to multiply evenly*/

.pixelart {
  /*When applying this class, this will remove blur*/
  image-rendering: pixelated;
}


/* ANIMATION: Move image relative to itself, makes moving animation in this case to the place that the character is seeing at the time*/

@Keyframes moveSpritesheet {
  from {
    transform: translate(0px,0,0)
  } to {
    transform: translate3d(-100%,0,0)
  }
}

/*Creating Classes FOR THE CHARACTER FACE DIFFERENT DIRECTIONS, the character spridesheet class must be in position absolute*/



.face-left {
  top: calc(-70px * var(--pixel-size));
}

.face-right{
  top: calc(-140px * var(--pixel-size));
}

.face-up{
  top: calc(-210px * var(--pixel-size));
}



/*For different screen sizes*/


@media(max-width: 400px){
  body{
    background-color: black;
  }
  :root{
  
  --pixel-size: 0.5;
}
  
}

@media(min-width: 400px){
  body{
    background-color: black;
  }
  :root{
  
  --pixel-size: 0.7;
}
  
}
@media(min-width: 600px){
  body{
    background-color: black;
  }
  :root{
  
  --pixel-size: 0.8;
}
  
}

@media(max-width: 688px){
  body{
    background-color: black;
  }
  :root{
  
  --pixel-size: 0.8;
}
  
}


@media(min-width: 700px){
  body{
    background-color: black;
  }
  :root{
  
  --pixel-size: 1;
}
  
}

@media(min-width: 900px){
  body{
    background-color: black;
  }
  :root{
  
  --pixel-size: 1.3;
}
  
}

/*Hi!, so implemented this so we can make the character face any direction using js. I like more JS then CSS lol😅. It makes projects better in my opinion then just pure css*/
const sheet = document.querySelector(".Character_spritesheet");
const speed = 5;

document.addEventListener('keyup', function(e) {
  /*First we remove any class before puting a class so that it goes to its default "facing us" when key is down*/
  sheet.classList.remove("face-left")
  sheet.classList.remove("face-right")
  sheet.classList.remove("face-up")
  if (e.code == "ArrowUp"){
    sheet.classList.add("face-up")
  }
  if (e.code == "ArrowLeft"){
    
    sheet.classList.add("face-left")
  }
  if (e.code == "ArrowRight"){
    
    sheet.classList.add("face-right")
  }
});



/*document.addEventListener('keydown', function(){
  if (sheet.classList.contains("face-left") || sheet.classList.contains("face-right")){
    sheet.classList.remove("face-left")
    sheet.classList.remove("face-right")
    
  }
})*/