.container {
    background-color:white;
    margin:2em auto;
    text-align:center;
}
.rouge {
    background-color:red;
    padding: 1.5em 1em;
    margin: 5em auto;
    display:inline-block;
}
.barres {
    margin: 0 0.2em;
    height:50px;
    width:15px;
    background-color:white;
    display:inline-block;
}

.anim {
    animation: 1.5s ease infinite animbar;
}

#bar2 {
    animation-delay: 0.20s;
}
#bar3 {
    animation-delay: 0.40s;
}

/*duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name*/

@keyframes animbar {
    from {
        transform:scaleY(1.5);
    }
    to {
        transform: scaleY(1);
    }
}


/************CERCLES**************/
article {
    min-height:50vh;
    position:absolute;
    display:inline-block;
}

.center {
    position:relative;
    width:60px;
    height:60px;
}

.cercles {
    border-radius:50%;
    width:60px;
    height:60px;
    position:absolute;
}
#rouge {
    border:2px solid red;
    top:7px;
}
#yellow {
    border:2px solid yellow;
    right:7px;
    top:7px;
}
#blue {
    border:2px solid blue;
}

.rotate {
    animation: 1s linear infinite tourne;
}
@keyframes tourne {
    from {
        transform:rotate(0);
    }
    to {
        transform:rotate(360);
    }
}