html {
    margin: 0;
    padding: 0;
    background-color: #efe1c4;
}

div {
    height: 100px;
    width: 50px;
    position: fixed;
    top: 50%;
}

p {
    position: fixed;
    z-index: 1000000000; /** c'est la parole après tout ! **/
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    top: calc(50vh - 180px);
    left: 0;
    width: 100vw;
}

p.a, p.b {
    top: calc(50vh);
    font-size: 14px;
}

p.a {
    font-family: 'Times New Roman', Times, serif;
    left: calc(-125px/2 - 50px + 12.5px);
    top: 36vh;
}

p.b {
    font-family: 'Courier New', Courier, monospace;
    left: calc(125px/2 + 50px - 12.5px);
    top: 58vh;
}

#a {
    background: url('divers/a.png') no-repeat center;
    left: 0;
    transform: translate(calc(50vw - 250%), -50%);
    animation: 15s a cubic-bezier(0.47, 1.07, 1, 1);
}

#b {
    background: url('divers/b.png') no-repeat center;
    right: 0;
    transform: rotateY(180deg) translate(calc(50vw - 250%), -50%);
    animation: 15s b cubic-bezier(0.47, 1.07, 1, 1);
}

/** 
0.1s = 0.65%
0.2s = 1.3%
0.5s = 3,3%
1s = 6,6% 
2s = 13,2%   
**/

@keyframes a {
    0% { transform: translate(-100%, -50%); }
    26.4% { transform: translate(-100%, -50%) rotateZ(0deg); }
    33% { transform: translate(-50%, -50%) rotateZ(30deg); }
    59.8% { transform: translate(-50%, -50%) rotateZ(30deg); }
    66.4% { transform: translate(0%, -50%) rotateZ(0deg); }
    79.6% { transform: translate(0%, -50%); left: 0vw; }
    96.3% { transform: translate(calc(50vw - 250%), -50%) rotateZ(12deg); }
    100% { transform: translate(calc(50vw - 250%), -50%) rotateZ(0deg); }
}

@keyframes b {
    0% { transform: rotateY(180deg) translate(-100%, -50%); }
    40% { transform: rotateY(180deg) translate(-100%, -50%) rotateZ(0deg); }
    46.6% { transform: rotateY(180deg) translate(-50%, -50%) rotateZ(30deg); }
    59.8% { transform: rotateY(180deg) translate(-50%, -50%) rotateZ(30deg); }
    66.4% { transform: rotateY(180deg) translate(0%, -50%) rotateZ(0deg); }
    79.6% { transform: rotateY(180deg) translate(0%, -50%) rotateZ(0deg); }
    96.3% { transform: rotateY(180deg) translate(calc(50vw - 250%), -50%) rotateZ(12deg); }
    100% { transform: rotateY(180deg) translate(calc(50vw - 250%), -50%) rotateZ(0deg); }
}

/** Big ❤️ à toi ! **/