@import "fonts.css";

:root{
    --color-0:#E60965;
    --color-1:#F94892;
    --color-2:#FFA1C9;
    --color-3:#FBE5E5;
    --background-color:#353251;

    --dino-size:6.4vmin;
    --bordure-size:0.5vmin;
}

*{
    position:relative;
    margin:0;
    padding:0;
    box-sizing: border-box;
    image-rendering: pixelated;
}

html, body{
    width:100%;
    height:100%;
    background: var(--background-color);
    display:flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    background: url("img/mosaic.png");
    background-position: center center;
    background-size: 50%;
}
#tiles{
    display: none;
}

#conteneur{
    width:96vmin;
    height:96vmin;
    padding:16vmin;
    background-image: url("img/background.png");
    background-size: cover;
}
#ecran{
    width:100%;
    height:100%;
    overflow: hidden;
    background-color: var(--color-3);
    background-image: url("img/titleBackground.png");
    background-size: cover;
    display:flex;
    justify-content: center;
    align-items: center;
}
#ecran.jeu{
    background-image: url("img/jeuBackground.png");
}

#debug{
    position:absolute;
    left:0;
    top:0;
    color:white;
}
.titre{
    position:absolute;
    left:50%;
    top:50%;
    width:62.5%;
    transform: translate(-50%, -80%);
}
.titre-action{
    position:absolute;
    left:50%;
    top:70%;
    width:50%;
    transform: translateX(-50%);
}

.gameover{
    position:absolute;
    background-image: url("img/gameover.png");
    background-size: cover;
    width:71.25%;
    height:35%;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-family: "RobotoCondensed";
    font-weight:700;
    padding:10.2vmin 10vmin 0 0;
    line-height:8vmin;
    font-size:5vmin;
    text-align:right;
    color:var(--color-0);
}

.item{
    position: absolute;
    width:var(--dino-size);
    height:var(--dino-size);
    background-image: url("img/dinosaur.png");
    background-size: cover;
}
.head{ background-position-x: 0; z-index:9; }
.head-mange{ background-position-x: calc( var(--dino-size) * -1);  z-index:9; }
.head-over{ background-position-x: calc( var(--dino-size) * -2);  z-index:9; }
.cou{ background-position-x: calc(var(--dino-size) * -3);  z-index:7; }
.cou-tourne{ background-position-x: calc(var(--dino-size) * -4);  z-index:7; }
.cou-tourne2{ background-position-x: calc(var(--dino-size) * -5);  z-index:7; }
.corps{ background-position-x: calc(var(--dino-size) * 2);  z-index:8; }

.fruit{
    background-position-x: var(--dino-size);
    z-index:1;
}