.pagination {
    display: block;
    width: 75%;
    margin: 1em auto;
    text-align: center;
}

.pagination:after {
     content: '';
     clear: both;
 }

.pagination-button {
    display: inline-block;
    padding: 5px 10px;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    background-color: #48beef;
    font-size: 18px;
    color: #fffdfd;
    text-align: center;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    border-radius: 100%;

}


.pagination-button:hover {
     background-color: #2e377e;
     color: #ffffff;
 }

.pagination-button.active {
     background-color: #2e377e;
     border-color: #bbb;
     color: #ffffff;
 }


.pagination-button:first-of-type {
    border-radius: 100%;
 }

.pagination-button:last-of-type {
     border-radius: 100%;
 }


/* arbitrary styles */
.heading { text-align: center; max-width: 500px; margin: 20px auto; }

.article-loop {
    display: block;
}