body {
    text-align: center;
    background-color: purple;
    animation-name: bg;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 10000ms;
    /*color: white;*/
    font-family: "Comic Sans MS";
}

.container {
    width: 100%;
    padding: 8px;
}

.container--inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container--inner > *:not(:first-child) {
    margin-top: 24px;
}

.header h1 {
    font-size: 300%;
}

.footer .images {
    display: flex;
    flex-direction: row;
}

.header h1 > * {
    animation-name: wobb;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 400ms;
    display: inline-block;
    transform: translateY(0px);
    margin-left: 2px;
    margin-right: 2px;
}

@keyframes wobb {
    0%, 100%   {transform: translateY(0px)}
    25%  {transform: translateY(-3px)}
    75%  {transform: translateY(3px)}
}

@keyframes bg {
    0%, 100% {
        background-color: purple;
    }

    50% {
        background-color: mediumpurple;
    }
}

.box {
    background-color: cornsilk;
    width: 100%;
    padding: 24px;
}

blockquote {
    border: 5px solid orange;
}

.visitors .counter {
    display: flex;
    flex-direction: row;
}

.visitors .counter > * {
    background-color: black;
    color: white;
    padding: 4px;
    border: 1px solid grey;
    margin: 2px;
}