.rescue-game-stage1 {
    position: relative;
    /* border: 2px solid red; */
    width: 100%;
    height: 100%;
    max-height: 100vh;
    display: flex;
    justify-content: center;
}

.room-container {
    position: relative;
    height: 100%;
    width: 100%;
    /* border: 2px solid red; */
    /* animation: tremble 0.09s linear infinite; */
}

@keyframes tremble {
    50% {
        margin-top: 3.5%;
    }
}

.room-container .background-climat {
    position: absolute;
    width: 100%;
    height: 125%;
    /* border: 2px solid yellowgreen; */
    bottom: 0;
}

.room-container .background-climat img {
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
}

.container-for-all-items {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0%;
    border: 2px solid blue;
    transition: 0.25s linear;
    /* transform: translateX(135%); */
    /*animation: tr 6s linear;*/
}
@keyframes tr {
    30% {
        transform: translateX(0%);
    }
    40%{
        top: 15%;
        transform: translateX(132%);
    }
    95% {
        top: 15%;
        transform: translateX(132%);
    }
}

img[alt="houseRefuge"] {
    position: absolute;
    top: -10%;
    left: -150%;
    width: 100%;
    height: 100%;
    z-index: 10;
    filter: contrast(1.3) saturate(0.9) !important;
}
#message-refuge {
    position: absolute;
    z-index: 10;
    left: -118%;
    top: 25%;
    text-align: center;
    color: white;
    font-size: 2vw;
    font-weight: bold;
    text-shadow: 0.2vmin 0.2vmin black;
    background: black;
    transform: scale(1.1, 1.5);
    /*animation: showM 6s linear;*/
    opacity: 0;
}
@keyframes showM {
    45% {opacity: 0;}
    50%{opacity: 1;}
    95%{opacity: 1;}
}

.container-for-all-items img {
    filter: contrast(1.15);
}

.div-for-herbes {
    position: absolute;
    /* border: 2px solid red; */
    width: 100%;
    height: 4%;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.div-for-herbes img {
    /* border: 2px solid; */
    min-width: 33%;
    height: 600%;
    margin-left: -3%;
    filter: contrast(1.7);
    /* animation: bougeHerbes 2s linear infinite; */
}
@keyframes bougeHerbes {
    100% {transform: translateX(-190%);}
}
img[src="../images/rescue_war_images/nature/herbes2.png"] {
    margin-left: -2%;
}

#message {
    position: absolute;
    font-size: 1.5vw;
    padding: 2% 3%;
    font-weight: bold;
    color: white;
    text-shadow: 0.155vw 0.155vw black;
    top: 28%;
    border-radius: 0.3vw;
    background: linear-gradient(to top, rgb(1, 30, 126), rgb(139, 188, 245), rgb(1, 30, 126));
    animation: displayMess 0.25s;
    z-index: 15;
}
@keyframes displayMess {
    0% {transform: translateX(300%);}
}

.back-for-terre {
    /* border: 2px solid orangered; */
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    perspective: 10%;
}

.back-for-terre img {
    min-width: 100%;
    height: 105%;
    filter: contrast(1.5) brightness(0.85);
    transform: rotateX(7deg);
    transform-origin: 0 0;
    margin-bottom: -2%;
    /* animation: bougeTerre 6.4s linear infinite; */
}
@keyframes bougeTerre {
    100% {transform: translateX(-200%);}
}

.div-for-enn {
    position: absolute;
    /* border: 3px solid blue; */
    display: flex;
    align-items: flex-end;
    z-index: 9;
    width: 17%;
    height: 38%;
    right: -70%;
    bottom: 3%;
}
.div-for-enn1 {
    bottom: 20%;
    border-color: transparent;
    /* border-bottom-color: red; */
    z-index: 8;
}
.div-for-enn2 {
    bottom: 37%;
    border-color: transparent;
    /* border-bottom-color: green; */
    z-index: 7;
}
.div-for-enn3 {
    bottom: 54%;
    border-color: transparent;
    /* border-bottom-color: white; */
    z-index: 6;
}
.div-for-enn4 {
    bottom: 70%;
    border-color: transparent;
    /* border-bottom-color: orange; */
    z-index: 5;
}
.div-for-enn5 {
    bottom: 87%;
    border-color: transparent;
    /* border-bottom-color: yellow; */
    z-index: 4;
}

.div-for-image {
    position: absolute;
    /* border: 2px solid yellow; */
    width: 162%;
    height: 107%;
    display: flex;
    align-items: flex-end;
    right: 0;
    animation: deplaceEnn 3.5s linear;
}
.div-for-image::before {
    position: absolute;
    content: "";
    bottom: -2%;
    width: 100%;
    height: 10%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.637);
}
@keyframes deplaceEnn {
    100% {right: 1000%;}
}
.enn-image {
    position: absolute;
    /* border: 2px solid yellow; */
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.div-for-image img[alt="enn1_cour"] {
    position: absolute;
    width: 500%;
    height: 100%;
    animation: enn1Anim 0.55s steps(5) infinite;
}
@keyframes enn1Anim {
    100% {
        transform: translateX(-100%);
    }
}
img[alt="balle_enn"] {
    animation: none;
    position: absolute;
    height: 4%; width: 9%;  
    left: -20%;
    top: 17%;
    filter: contrast(1.2);
    animation: deplaceballeenn .6s linear infinite;
}
@keyframes deplaceballeenn {
    100% {
        left: -500%;
    }
}
img[alt="feuEnn"] {
    animation: none;
    position: absolute;
    transform: rotateY(180deg);
    height: 25%; width: 24%;  
    filter: contrast(5);
    left: -17%;
    top: 6.7%;
    animation: showFeuEnn 0.6s linear infinite;
    opacity: 0;
}
@keyframes showFeuEnn {
    0%{opacity: 1;}
    10%{opacity: 1;}
    11%{opacity: 0;}
}


img[alt="balle_actor"] {
    position: absolute;
    transform: rotateY(180deg);
    height: 1.6%; width: 2.6%; 
    z-index: 8;
    filter: contrast(2);
    animation: balActor 0.4s linear infinite;
}
@keyframes balActor {
    100% {left: 200%;}
}


.div-for-actor::before {
    position: absolute;
    content: "";
    bottom: -2%;
    width: 110%;
    height: 10%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.637);
}

.div-for-actor {
    position: absolute;
    /* border: 2px solid red; */
    height: 38%; /* 40% */
    width: 17%; /* 17% */
    bottom: 3%;
    left: 2%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 9;
    filter: contrast(1.2);
    /* transform: rotateY(180deg); */
    /* animation: sautActor 6s linear; */
}
@keyframes sautActor {
    40% { bottom: 29%;}
    50% { bottom: 29%;}
}
.div-for-actor .perso-stand {
    /* border: 2px solid white; */
    width: 100%;
    height: 105%;
    overflow: hidden;
}
.div-for-actor .perso-stand img {
    min-width: 600%;
    height: 100%;
    animation: persoStand 0.7s steps(6) infinite;
}
@keyframes persoStand {
    100%{ transform: translateX(-100%); }
}
.div-for-actor .perso-cour {
    /* border: 2px solid white; */
    position: absolute;
    width: 180%;
    height: 100%;
    overflow: hidden;
}
.div-for-actor .perso-cour img {
    width: 500%;
    height: 95%;
    animation: persoCour 0.5s steps(5) infinite;
}
@keyframes persoCour {
    100%{ transform: translateX(-100%); }
}
.div-for-actor .perso-cour-tir {
    /* border: 2px solid white; */
    position: absolute;
    width: 180%;
    height: 100%;
    overflow: hidden;
}
.div-for-actor .perso-cour-tir img {
    width: 500%;
    height: 100%;
    animation: persoCourtir 0.5s steps(5) infinite;
}
@keyframes persoCourtir {
    100%{ transform: translateX(-100%); }
}
.div-for-actor img[alt="perso_tir"] {
    position: absolute;
    width: 127%;
    height: 100%;
}
.div-for-actor img[alt="perso_tir_couche"] {
    position: absolute;
    width: 265%;
    height: 42%;
    bottom: -8%;
}
.div-for-actor img[alt="feu_balle"] {
    position: absolute;
    width: 35%;
    height: 25%;
    top: 7%; right: -65%;
    /* transform: rotate(90deg); */
}

.div-for-actor .div-for-bouclier {
    position: absolute;
    /* border: 2px solid cyan; */
    height: 145%;
    width: 240%;
    border-radius: 50%;
    bottom: -18%;
    box-shadow: inset 2vw 2vw 4vw white, inset -2vw -2vw 4vw white;
    animation: bouclierAnim 0.5s linear infinite;
}
@keyframes bouclierAnim {
    50% {
        opacity: 0.5;
    }
}


.div-for-robot1 {
    /* border: 4px solid blue; */
    position: absolute;
    left: -250%;
    height: 150%;
    width: 350%;
    bottom: -5%;
    animation: bougeRobot 0.4s linear infinite, displayRobot 0.5s linear;
}
.div-for-robot1::before {
    content: "";
    position: absolute;
    bottom: -10%;
    right: 0;
    /* border: 2px solid red; */
    width: 90%;
    height: 20%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.664);
}
@keyframes bougeRobot {
    50% {
        bottom: -3%;
    }
}
@keyframes displayRobot {
    0% {
        bottom: 250%;
        left: 100%;
    }
    50% { bottom: 50%; left: 100%;}
}
.robot1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.div-for-robot1 img {
    width: 400%;
    height: 100%;
    animation: robot1Anim 0.4s steps(4) infinite;
    filter: contrast(1.2);
}
@keyframes robot1Anim {
    100% {transform: translateX(-100%);}
}
.div-for-robot1 img[alt="lazer_bot"] {
    position: absolute;
    left: 99%;
    top: 31%;
    width: 150%;
    height: 25%;
    animation: none;
    z-index: 9;
    filter: drop-shadow(0.4vw 0.4vw 0.1vw white) drop-shadow(-0.4vw -0.2vw 0.4vw white);
}

.div-to-show-damage {
    position: absolute;
    /* border: 2px solid red; */
    z-index: 15;
    left: 0; top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: flex; 
    justify-content: center;
    align-items: center;
    box-shadow: inset 1vw 1vw 1.5vw red, inset -1vw -1vw 1.5vw red;
    animation: op 0.15s linear;
}
@keyframes op {
    0% {opacity: 1;}
}

.div-for-bigbomber {
    /* border: 2px solid yellow; */
    position: absolute;
    top: 30%;
    right: -70%;
    width: 65%;
    height: 35%;
    z-index: 7;
    animation: divBigBomber 0.2s linear infinite, DeplacedivBigBomber 60s linear infinite;
}
@keyframes divBigBomber {
    50% {top: 29.5%;}
}
@keyframes DeplacedivBigBomber {
    100% {right: 200%;}
}
.div-for-bigbomber::before {
    position: absolute;
    content: "";
    bottom: -20%;
    left: 0;
    /* border: 2px solid red; */
    width: 100%;
    height: 28%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.658);
}
.bigbomber {
    /* border: 2px solid green; */
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.bigbomber img {
    width: 400%;
    height: 100%;
    animation: bigbomber 0.4s steps(4) infinite;
    filter: contrast(1.5);
}
@keyframes bigbomber {
    100% {transform: translateX(-100%);}
}

img[alt="fatal1"] {
    position: absolute;
    z-index: 9;
    bottom: 0;
    left: -70%;
    width: 65%;
    height: 100%;
    filter: contrast(2) drop-shadow(0.6vw 0.6vw 0.5vw rgb(121, 22, 202)) drop-shadow(-0.6vw -0.6vw 0.5vw rgb(121, 22, 202));
    animation: deplaceFatalImage 0.65s linear;
}
@keyframes deplaceFatalImage {
    100% { left: 100%; }
}



.div-to-showing-fatal {
    position: absolute;
    top: 0;
    left: 0;
    /* border: 20px solid green; */
    z-index: 21;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, black, rgb(51, 51, 51), gray, rgb(221, 221, 221), gray, rgb(51, 51, 51), black);
    display: flex;
    justify-content: center;
    align-items: center;
}
.div-to-showing-fatal img {
    width: 55%;
    height: 85%;
    filter: contrast(1.15);
    animation: ani 0.2s linear;
    margin-top: 0;
    filter: drop-shadow(0.5vw 0.5vw 1.5vw white) drop-shadow(-0.5vw -0.5vw 1.5vw white);
}
@keyframes ani {
    0% {transform: scale(0.1);}
}
.div-to-showing-fatal p {
    font-weight: bold;
    position: absolute;
    font-size: 7.5vw;
    color: white;
    text-align: center;
    -webkit-text-stroke: 0.5vw;
    text-shadow: 0.5vw 0.5vw 0.3vw black, -0.5vw -0.5vw 0.3vw black;
    transform: scaleY(1.4);
    animation: fatalText 0.2s linear;
    letter-spacing: 0.2vw;
}
@keyframes fatalText {
    0% {transform: translateX(200%);}
}


img[alt="arrow_go"] {
    position: absolute;
    right: 0;
    top: 30%;
    z-index: 10;
    width: 35%;
    filter: contrast(1.3) drop-shadow(0.4vw 0.4vw 0.3vw rgb(238, 246, 252)) drop-shadow(-0.4vw -0.4vw 0.3vw rgb(238, 246, 252));
    animation: bougeFleche 0.47s linear infinite;
}
@keyframes bougeFleche {
    50% {
        right: 4%;
        opacity: 0;
    }
}

img[alt="potion_santé"] {
    position: absolute;
    width: 6%;
    height: 9%;
    top: 20%;
    left: 30%;
    z-index: 9;
    filter: contrast(1.3) drop-shadow(0.2vw 0.2vw 0.1vw rgb(116, 250, 54)) drop-shadow(-0.2vw -0.2vw 0.1vw rgb(116, 250, 54));
    animation: bougePotionSante 0.5s linear infinite;
    transition: 0.85s ease;
}
@keyframes bougePotionSante {
    50% {transform: translateY(10%);}
}

img[alt="potion_énergie"] {
    position: absolute;
    width: 6%;
    height: 9%;
    top: 20%;
    left: 50%;
    z-index: 9;
    filter: contrast(1.3) drop-shadow(0.2vw 0.2vw 0.1vw rgb(250, 83, 54)) drop-shadow(-0.2vw -0.2vw 0.1vw rgb(250, 83, 54));
    animation: bougePotionEnergie 0.5s linear infinite;
    transition: 0.85s ease;
}
@keyframes bougePotionEnergie {
    50% {transform: translateY(10%);}
}

/* CSS pour la partie contenant le profil, le sang, le power, les différentes options du jeu */

.up-side-infos-and-options {
    position: absolute;
    /* border: 2px solid blue; */
    top: 0;
    width: 100%;
    height: 18%;
    display: none;
    padding: 1%;
    z-index: 20;
}

.actor-infos {
    /* border: 2px solid yellow; */
    height: 100%;
    width: 60%;
    display: flex;
}

.actor-infos p {
    color: white;
    font-size: 1.1vw;
    padding: 1% 1% 1% 1%;
    -webkit-text-stroke: 0.2vw;
    letter-spacing: 0.1vw;
}

.actor-infos img {
    border: 0.2vw solid rgb(0, 71, 0);
    border-radius: 50% 0 45% 50%;
    /* min-width: 19%; */
    height: 100%;
    background: linear-gradient(to right, green, yellowgreen);
}

.container-for-health-power {
    /* border: 2px solid blueviolet; */
    min-width: 81%;
}

.container-health {
    position: relative;
    border: 0.2vw solid rgb(0, 71, 0);
    height: 22%;
    width: 100%;
    border-radius: 0 1rem 1rem 0;
    background-color: red;
    overflow: hidden;
}

.container-health::before {
    position: absolute;
    content: "";
    width: 97%;
    height: 35%;
    left: 1%;
    top: 8%;
    border-radius: 0 1rem 1rem 0;
    background: rgba(255, 255, 255, 0.692);
}

.health {
    background: rgb(5, 158, 5);
    height: 100%;
    width: 100%;
    transition: 0.15s ease;
}

.container-power {
    position: relative;
    border: 0.1vw solid rgb(196, 27, 5);
    background-color: rgb(250, 190, 134);
    height: 10%;
    width: 80%;
    border-radius: 0 1rem 1rem 0;
    overflow: hidden;
}

.container-power::before {
    position: absolute;
    content: "";
    width: 97%;
    height: 35%;
    left: 1%;
    top: 6%;
    border-radius: 0 1rem 1rem 0;
    background: rgba(255, 255, 255, 0.692);
}

.power {
    background: rgb(236, 67, 6);
    height: 100%;
    width: 100%;
    transition: 0.15s ease;
}

.game-tools-options {
    position: relative;
    /* border: 2px solid white; */
    width: 38%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

.game-tools-options img:nth-child(1) {
    height: 50%;
}

.game-tools-options img:nth-child(2) {
    height: 65%;
}

.game-tools-options img:nth-child(3) {
    position: absolute;
    right: 0;
    bottom: -17%;
    height: 50%;
}


.avion-chasse {
    position: absolute;
    /* border: 2px solid red; */
    bottom: 20%;
    width: 100%;
    height: 101%;
    z-index: 19;
    overflow: hidden;
    transform: translateX(-100%);
    animation: deplaceAvionChasse 4s linear;
}
@keyframes deplaceAvionChasse {
    100% {transform: translateX(100%);}
}
.avion-chasse img {
    width: 200%;
    height: 100%;
    filter: contrast(2) saturate(0.2);
    animation: avionChasse 0.17s steps(2) infinite;
}
@keyframes avionChasse {
    100% {
        transform: translateX(-100%);
    }
}


/* #################### CSS Pour le menu (soit pour reprendre le jeu ou pour quitter le jeu ou encore d'autre option) ############# */

.menu-game {
    position: absolute;
    /* border: 2px solid red; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: rgb(8, 8, 8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    overflow-y: scroll;
}
.menu-game::-webkit-scrollbar {
    display: none; 
}
.menu-game::before {
    position: absolute;
    content: "";
    top: 5%;
    left: 3%;
    /* border: 2px solid white; */
    width: 25%;
    height: 35%;
    border-radius: 50%;
    box-shadow: inset 0.7vw 0.7vw 2vw white;
} 
.menu-game::after {
    position: absolute;
    content: "";
    bottom: 5%;
    right: 3%;
    /* border: 2px solid white; */
    width: 45%;
    height: 65%;
    border-radius: 50%;
    z-index: -1;
    box-shadow: inset -0.7vw -0.7vw 2vw white;
} 
.menu-game h1 {
    font-size: 17vmin;
    color: white;
    -webkit-text-stroke: 1.2vmin;
    text-align: center;
    text-shadow: 0.8vmin 0.8vmin 1vmin orangered;
}
.menu-game .div-choices {
    /* border: 2px solid green; */
    border-radius: 1vmin;
    min-width: 45%;
    min-height: 40%;
    font-size: 2.7vmin;
    padding: 1% 0;
    display: flex;
    flex-direction: column;
    color: white;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.377);
}
.menu-game .div-choices h3 {
    /* border: 2px solid red; */
    width: 70%;
    padding: 2% 5%;
    margin-bottom: 1.5%;
    text-align: center;
    background: linear-gradient(to right, green, rgb(178, 243, 48));
    text-shadow: 0.2vmin 0.2vmin black;
    border-radius: 0.5vmin;
    box-shadow: 0.3vmin 0.3vmin black;
}
.menu-game .div-choices h3:hover {
    cursor: default;
}