/* Général */

*, ::before, ::after
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body
{
    background-color: #f1f1f1;
    height: 100vh;
}

.container
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Score */
.score
{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 20px 0;
}

/* Zone de jeu */
.gameZone
{
    width: 500px;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    background: url('../ressources/background-black.png');
    position: relative;
    animation: backgroundDefile 3s linear infinite;
}

.case
{
    display: inline-block;
    width: 25px;
    height: 25px;
}

/* Ennemis */

    .alien
    {
        background: url('../ressources/ennemies.png');
        background-size: contain;
        background-position: center;
    }

    .alienTouche
    {
        background-color: red;
    }

/* Vaisseau du joueur */

    .vaisseau
    {
        background: url('../ressources/vaisseau.png');
        background-size: contain;
        background-position: center;
        transform: rotate(180deg);
    }

    .tirVaisseau
    {
        background-color: yellowgreen; 
    }

/* Animations */

@keyframes backgroundDefile
{
    from
    {
        background-position-y: 0px;
    }
    to 
    {
        background-position-y: 256px;
    }
}