:root {
    --dimension-healthbar-height: 20px;
    --dimension-healthbar-width: 80px;
}

body {
    font-family: "Comic Sans MS";
}

div#game {
    height: 720px;
    width: 1280px;
    background-size: cover;
}

.menu-on {
    display: grid;
    grid-template-columns: 1280/2px 1fr;
    grid-template-rows: 1280/2px 1fr;
    grid-template-areas: "h n" "a f";
    height: 150px;
    width: 1280px;
}

.menu-off {
    display: grid;
    grid-template-columns: 1280/2px 1fr;
    grid-template-rows: 1280/2px 1fr;
    grid-template-areas: "h n" "a f";
    height: 0px;
    width: 0px;
}

h1 {
    color: white;
}



.pablo-sprite, .hb-heros-sprite, .docteur-sprite {
    height: 144px;
    width: 144px;
}

.ennemy2-sprite, .ennemy3-sprite, .ennemy4-sprite {
    height: 144px;
    width: 144px;
}

.ennemy1-sprite {
    height: 224px;
    width: 263px;
}

.healthbar-controler {
    height: var(--dimension-healthbar-height);
    width: var(--dimension-healthbar-width);
    background-color: gray;
    border-width: 5px;
    border-color: black;
    border-style: inset;
    position: absolute;
}

.healthbar-value {
    height: var(--dimension-healthbar-height);
    width: calc(var(--dimension-healthbar-width));
    background-color: lime;
}

p#speech-bubble {
    position: absolute; 
    background-image: url("sprite/bulle.png");
    background-size: 100% 110%;
    line-height: 40px;
}