.backg {
    width: 100%;
    height: 50%;
    animation: pulse 15s infinite;
}

.whitebd {
    width: 100%;
    height: 100%;
    animation: bg 15s infinite;
}

@keyframes bg {
    0% {
        background-color: dimgray;
    }
    12% {
        background-color: black;
    }
    24% {
        background-color: dimgray;
    }
    36% {
        background-color: black;
    }
    48% {
        background-color: dimgray;
    }
    60% {
        background-color: black;
    }
    72% {
        background-color: dimgray;
    }
    84% {
        background-color: black;
    }
    100% {
        background-color: dimgray;
    }
}

@keyframes pulse {
    0% {
        background-color: black;
        height: 0%;
    }
    12% {
        background-color: dimgrey;
        height: 25%;
    }
    24% {
        background-color: black;
        height: 50%;
    }
    36% {
        background-color: dimgray;
        height: 75%;
    }
    48% {
        background-color: black;
        height: 100%;
    }
    60% {
        background-color: dimgray;
        height: 75%;
    }
    72% {
        background-color: black;
        height: 50%;
    }
    84% {
        background-color: dimgray;
        height: 25%;
    }
    100% {
        background-color: black;
        height: 0%;
    }
}

.cercle {
    height: 300px;
    width: 300px;
    position: relative;
    left: 40%;
    top: 33%;
    background-color: dimgrey;
    animation-name: stretch;
    animation-duration: 10s;
    animation-timing-function: ease-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

.carre {
    box-shadow:
            0 0 0 1em dimgrey,
            0 1em 0 1em dimgrey,
            -2.5em 1.5em 0 .5em dimgrey,
            2.5em 1.5em 0 .5em dimgrey,
            -3em -3em 0 0 dimgrey,
            3em -3em 0 0 dimgrey,
            -2em -2em 0 0 dimgrey,
            2em -2em 0 0 dimgrey,
            -3em -1em 0 0 dimgrey,
            -2em -1em 0 0 dimgrey,
            2em -1em 0 0 dimgrey,
            3em -1em 0 0 dimgrey,
            -4em 0 0 0 dimgrey,
            -3em 0 0 0 dimgrey,
            3em 0 0 0 dimgrey,
            4em 0 0 0 dimgrey,
            -5em 1em 0 0 dimgrey,
            -4em 1em 0 0 dimgrey,
            4em 1em 0 0 dimgrey,
            5em 1em 0 0 dimgrey,
            -5em 2em 0 0 dimgrey,
            5em 2em 0 0 dimgrey,
            -5em 3em 0 0 dimgrey,
            -3em 3em 0 0 dimgrey,
            3em 3em 0 0 dimgrey,
            5em 3em 0 0 dimgrey,
            -2em 4em 0 0 dimgrey,
            -1em 4em 0 0 dimgrey,
            1em 4em 0 0 dimgrey,
            2em 4em 0 0 dimgrey;

    background: dimgrey;
    width: 1em;
    height: 1em;
    overflow: hidden;
    position: relative;

    animation-name: stretch2;
    animation-duration: 10s;
    animation-timing-function: ease-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes stretch {
    0% {
        transform: scale(.1);
        background-color: black;
        border-radius: 100%;
        left: 40%;
    }
    50% {
        background-color: dimgrey;
        border-radius: 100%;
        left: 10%;
    }
    100% {
        transform: scale(2);
        background-color: black;
        border-radius: 100%;
        left: 70%;
    }
}

@keyframes stretch2 {
    0% {
        transform: scale(.1);
        left: 40%;
    }
    50% {
        left: 70%;
    }
    100% {
        transform: scale(.9);
        left: 10%;
    }
}

body,
html {
    height: 100%;
    padding: 0;
    margin: 0;
}