html,body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#face
{
    position: absolute;
    width: 100%;
    top: 50%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 32vmin;
    text-align: center;
    animation: face 1.25s infinite steps(2);
    user-select: none;
    cursor: default
}

@keyframes face
{
    0%
    {
        transform: translate(0, -50%);
    }
    24.9%
    {
        transform: translate(0, -50%);
    }
    25%
    {
        transform: translate(-0.88vmin, calc(-50% + 3.5vmin));
    }
    49.9%
    {
        transform: translate(0, -50%);
    }
    50%
    {
        transform: translate(0, -50%) scaleX(-1);
    }
    74.9%
    {
        transform: translate(0, -50%) scaleX(-1);
    }
    75%
    {
        transform: translate(0.88vmin, calc(-50% + 3.5vmin)) scaleX(-1);
    }
    99.9%
    {
        transform: translate(0, -50%) scaleX(-1);
    }
    100%
    {
        transform: translate(0, -50%);
    }
}