:root{
    --size: 200px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
  background-color: white;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* background-image: url(/bg-2.png);  */
    background-size: cover; 
    background-position-y: bottom;
    background-repeat: no-repeat;
    height: 100vh; 
    width: 100vw;
    }

    #info{z-index: 999; 
        position: fixed; 
        top: 0; 
        height: 70px; 
        border: 1px solid black;
       
        opacity: .7; 
        width: 100%;
        background-color: #eee;
        display: flex; 
        flex-direction: row; 
        justify-content: space-between;
    }

        #message1, #message2, #avatar{opacity: 0;}

        #avatar, #map{height: 100%; width: 100px; object-fit: cover; }
        #map {
            position: relative;
            background-image: url(/map.gif);
    width: 300px;
    background-size: 100%;
    background-position-y: bottom;   
        }
       
        #location {
            position: absolute; 
            height: 10px; 
            width: 10px; 
            border-radius: 50px; 
            background-color: red;
            bottom: 20%; 
            right: 50%;
            animation: levelup 1s ease-in-out 100ms infinite forwards;
           
        }


        .visible {opacity: 1!important;}


#trees, #second-layer-trees, #third-layer-trees{position: absolute;
width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
#second-layer-trees{z-index: -998
    ;}
    #third-layer-trees{
        transform: translateY(400px); 
        overflow: visible;
        ;}
        #third-layer-trees img {
            transform: scale(3);
            z-index: 999;
        }

.tree{top: 0;}
.tree img::after
{
    position: absolute;
    display: block;
content: '';
height: 10px;
width: 20px;
background-color: grey;
border-radius: 100%;}

#sky{    position: absolute;
    height: 300px;
    width: 100%;
    top: 0px;
    background-color: #f5deb3;

    /* background-image: url(/moon.jpg); */
    z-index: -999;}

   
  

#game-container {
    overflow: hidden;
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* background-image: url(/bg.png);
    background-blend-mode: color;
   
    background-position-y: bottom;
    background-position-x: 56px;
    animation: bg 6s linear;
    background-position-x: 0%;
    background-repeat: repeat-x;
    animation-iteration-count: infinite; */

}
/* @keyframes bg {
    0% {background-position-x: 0% ;}
    100%{background-position-x: 100% ;}
    
} */
.paused-animation{
    
    animation-duration: 25s!important;
}


#player, .figure, .tree, .item {
bottom: 0px;
    height: var(--size)!important;
    width: var(--size)!important;
    position: absolute;
    bottom: 100px;
    transition: 100ms ease-in-out;
    overflow: visible;
    background-position-y: bottom;
}
.lvlup{
    animation: levelup 300ms ease-in-out 100ms 1 forwards;
}
@keyframes levelup {
    0%, 100% {
        /* Define the initial styles when the animation starts */
        /* You can adjust these properties as needed */
        transform: scale(1);
        opacity: 1;
    }
    50% {
        /* Define the final styles when the animation ends (at 100%) */
        /* You can adjust these properties to create the leveling up effect */
        transform: scale(1.5);
        opacity: 0;
    }
}
.item{
background-image: url(/key.png);
background-size: 50%;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
  
   border-radius: 150px;
   transform: translateY(-100px);
   animation: fly 10s ease-in-out  infinite;
   
}

@media (max-height: 500px) {
    #player, .figure, .tree {
        bottom: 0px!important;
            
        }
}

#player { 
    z-index: 999; 
    
  
    }



#player {
    background-image: url(/character.gif); 
    background-size: contain; 
    background-repeat:no-repeat;}
    .jumping {
        background-image: url(/character-jump.gif)!important ;
        bottom: 300px!important;
    }
    .shooting {
    background-image: url(/character-shoot.gif)!important;
    /* transform: translateX(-50px); */
    animation: shoot 1s linear 1 forwards;

}
.win{
    width: 900px!important;
    /* transform: scale(4) translateX(50px); */
    background-image: url(/dance.gif)!important;
    /* background: white; */
    z-index: 9999!important;
}

@keyframes shoot {
    0%, 100%{transform: translateX(0px);}
    70%{transform: translateX(-50px);}
    
}
.jumping img, .shooting img, .win img {display: none;}




.figure {
    /* border: 1px solid blue; */
    position: absolute;
    
    transition: unset;
    transition: color 100ms ease-in-out;
    position: absolute;
  
    transform: scaleX(-1);
    z-index: 999;
    height: calc(var(--size)*1)!important;
    width: calc(var(--size)*1)!important;
    transition: all 300ms ease-in-out;
    overflow: visible;
   
}
.twolives {
    /* height: calc(var(--size)*.8)!important;
    width: calc(var(--size)*.8)!important; */
   
}
.onelife {
    /* height: calc(var(--size)*.7)!important;
    width: calc(var(--size)*.7)!important; */
   
}
.figure img, #player img {
  
    width: 100%;
    height: 100%;

}
.fly {
    position: absolute;
animation: fly 2s ease-in-out  infinite;
}
.fly img:nth-child(2){display: none;}
@keyframes fly {
    0%, 100% {transform: translateY(-300px) scaleX(-1);}
    50%{transform: translateY(-200px) scaleX(-1);;}
}
@media (max-height: 500px) {
    .jumping {
        bottom: 500px!important;
    }
#info {height: 30px;}
    @keyframes fly {
        0%, 100% {transform: translateY(0px) scaleX(-1);}
        50%{transform: translateY(-120px) scaleX(-1);;}
    } 
}


/* .figure::before {

    content: 'Na warte';
    position: absolute;
    transform: scaleX(-1)!important;
    top: -20px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    
}  */
.hit {
/* background-image: url(/hit.gif); */

 }
 

 
 

.shot {
    z-index: 999;
    width: 50px;
    height: 50px;
    background-image: url(/shot.gif);
    background-size: contain;
    position: absolute;
   
    transform: rotate(274deg);
    background-repeat: no-repeat;
}

.figure{
   /* display: none; */
}
/* Default style for figures (full lives) */
.figure::before {
    content: ''; /* Display '3' for figures with full lives */
    display: block;
    position: absolute;
    width: 90%;
    height: 10px;
    background-image: linear-gradient(rgb(235, 65, 65), rgb(255, 119, 0));
    border-style: outset;
    border: 2px solid #b2aaaa;
    border-radius: 10px;
    transition: 200ms ease-in-out;
}
.figure:nth-child(odd)::before{
    top: -20px;
}

/* Style for figures with 2 lives remaining */
.figure.twolives::before {
    content: ''; /* Display '2' for figures with two lives */
    width: 50%;
}

/* Style for figures with 1 life remaining */
.figure.onelife::before {
    content: ''; /* Display '1' for figures with one life */
    width: 20%;
}

/* Style for figures that have been hit */
.figure.hit::before {
    content: '0'; /* Display '0' for figures that have been hit */
    width: 1%;
}



#win-message, #lose-message {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    flex-direction: column;
    gap: 20px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1); /* Semi-transparent background */
    color: white;
    font-size: 2em;
    z-index: 999; /* Ensures it's on top of other elements */
    display: none; /* Initially hidden */
}
#lose-message{
    /* background-color: red; */
}

#win-text {
    text-align: center;
}