@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    --gameHeight: 200px;
    --gameWidth: 600px
}

body{
    text-align: center;
}

#gameCanvas {
    width: var(--gameWidth);
    height: var(--gameHeight);
    margin: auto;
    border: 1px solid black;
    overflow: hidden;
    position: relative;
}

#farBackGround {
    background-image: url(Images/country-platform-back.png);
}

#nearBackGround {
    background-image: url(Images/country-platform-forest.png);
    background-repeat: repeat-x;
    background-position-y: 100px;
    animation: bgKey 25s linear infinite;
}

@keyframes bgKey {
    0%{
        background-position-x: 0px;
    }
    100%{
        background-position-x: -640px;
    }
}

#scoreDisplay {
    font-family: 'VT323', monospace;
    font-size: 32pt;
}


.player {
    width: 34px;
    height: 46px;
    position: absolute;
    top: calc(var(--gameHeight) - 45px);
    left: 80px;
    background-image: url(Images/Run.gif);
    image-rendering: pixelated;
}

.jumping{
    animation: jump 0.5s linear;
}
@keyframes jump{
    0%{top: calc(var(--gameHeight) - 45px);}
    5%{top: calc(var(--gameHeight) - 75px);}
    20%{top: calc(var(--gameHeight) - 100px);}
    30%{top: calc(var(--gameHeight) - 135px);}
    50%{top: calc(var(--gameHeight) - 150px);}
    70%{top: calc(var(--gameHeight) - 135px);}
    80%{top: calc(var(--gameHeight) - 100px);}
    95%{top: calc(var(--gameHeight) - 75px);}
    100%{top: calc(var(--gameHeight) - 45px);}
}

.pear {
    width: 14px;
    height: 28px;
    position: absolute;
    left: -30px;
    background-image: url("Images/Pear.png");
    image-rendering: pixelated;
    
}

.gavel {
    width: 46px;
    height: 29px;
    position: absolute;
    left: -31px;
    background-image: url("Images/Gavel.png");
    image-rendering: pixelated;
}


.movingElement {
    animation: moveAcrossScreen 1s linear;

}

@keyframes moveAcrossScreen {
    0% {
      left: var(--gameWidth);
    }
  
    100% {
      left: -30px;
    }
  }