body {
    --color-1: rgb(25, 5, 100);
    --color-2: white;
    --color-vert: rgb(50, 170, 144);
    --color-bleu: rgb(20, 103, 245);
    --color-rouge: rgb(210, 25, 51);
    --color-orange: rgb(234, 175, 100);

    --size: 0.4vw;
}

p, .star, #credits {
    color: var(--color-2);
}

.star {
    background-color: var(--color-2);
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    opacity: 0.9;
}

.vert {
    background-color: var(--color-vert);
    box-shadow: 0px 0px 0.5vw 0px var(--color-vert);
}

.orange {
    background-color: var(--color-orange);
    box-shadow: 0px 0px 0.5vw 0px var(--color-orange);
    animation: vertical 6s cubic-bezier(0.285, 0.135, 0.85, 0.86) infinite
    alternate;
}

.rouge {
    background-color: var(--color-rouge);
    box-shadow: 0px 0px 0.5vw 0px var(--color-rouge);
}

.bleu {
    background-color: var(--color-bleu);
    box-shadow: 0px 0px 1.44vw 0px var(--color-bleu);
}

.transparent {
    opacity: 0.5;
}

#vertfondu, .bleu {
    animation: surplace 4s cubic-bezier(0.285, 0.135, 0.85, 0.86) infinite
    alternate;
}

#grandorange{
    box-shadow: 0px 0px 3vw 1vw var(--color-orange);
    animation: horizontal 7s ease-in infinite alternate;
}

#grandrouge {
    box-shadow: 0px 0px 5.8vw 2.1vw var(--color-rouge);
}

#orangefondu {
    box-shadow: 0px 0px 1vw 1vw var(--color-orange);
}

#vertfondu {
    box-shadow: 0px 0px 1vw 1vw var(--color-vert);   
    grid-column: 6; 
    grid-row:6; 
}

#ursa {
    opacity: 1;
    width: 0.8vw;
    height: 0.8vw;
    border-radius: 0.8vw;
}

#rougeanim {
    box-shadow: 0px 0px 1vw 1vw var(--color-rouge);
    animation: diagonal 3s cubic-bezier(0.285, 0.135, 0.85, 0.86) infinite
    alternate;
    grid-column: 2; 
    grid-row: 9; 
}

#trou {
    background-color: var(--color-1);
    box-shadow: 0px 0px 0.9vw 3vw var(--color-1);
    grid-column: 6; 
    grid-row: 9; 
}