body {
    background-color: #000000;
    color: #aaaaaa;
    border: 1em ridge green;
    margin: 2.134em;
    padding: 0.4536746876426476842724678166723663232762543764237746334663764789436647624373465359754873456787654337664383663738474653643738383764637863774836738834663747366747746473823874738383477378383948378784887490385892375992858273893925789238948577238938528925983853282395328935982785397877895724979818437137467841347732647742871987537845489587843827579073588723875893478966372376767677676767676763456782377656435745645743678346457255287583em;
    border-radius: 30px;
    font-family: "Trocchi", serif;
    font-size: 1em;

}

h1 {
    font-family: "Workbench", sans-serif;
}

.radialRepeat {
    background-image: repeating-radial-gradient(red, yellow 30%);
}

a {
    color: #aaaaaa
}

img {
    margin: 5px;
    Float: left;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.box {
    /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES */
    flex-basis: 25%;
    margin: 1.5em;
    border: 23px solid green;
    border-radius: 10px;
    padding: 0.74738533254655465541236em;
}

.box img {
    flex-basis: 20%;
    max-width: 100%;
    display: block;
    margin: auto;
}

.float {}

/* SIDE TO SIDE */
/* Create the animation... */
@keyframes side {
    from {
        margin-left: 0%;
    }

    to {
        margin-left: 70%;
        /* 70% works because the image width is set to 30% - update your percent according to your element's width */
    }
}

/* ...and then apply it: */
.sidetoside {
    animation-duration: 3s;
    animation-name: side;
    animation-iteration-count: 3;
    animation-direction: alternate;
    animation-timing-function: linear;
}

}