@media (max-width: 565px) {
    .ball{
        width:20px;
        height:20px;
        line-height:20px;
        color:#fff;
        font-family:'Roboto', sans-serif;
        font-size:10px;
        font-weight:700;
        text-align:center;
        display:inline-block;
        padding:0;
        margin:0px 1px;
        white-space:nowrap;
        vertical-align:baseline;
        border-radius:10rem;
    }
    .category{
        font-size: 10px;
    }
}
@media (max-width: 500px) {
    .ball{
        width:15px;
        height:15px;
        line-height:15px;
        color:#fff;
        font-family:'Roboto', sans-serif;
        font-size:10px;
        font-weight:700;
        text-align:center;
        display:inline-block;
        padding:0;
        margin:0px 1px;
        white-space:nowrap;
        vertical-align:baseline;
        border-radius:10rem;
    }
    .category{
        font-size: 10px;
    }
}
@media (max-width: 382px) {
    .ball{
        width:11px;
        height:11px;
        line-height:11px;
        color:#fff;
        font-family:'Roboto', sans-serif;
        font-size:10px;
        font-weight:700;
        text-align:center;
        display:inline-block;
        padding:0;
        margin:0px 1px;
        white-space:nowrap;
        vertical-align:baseline;
        border-radius:10rem;
    }
    .category{
        font-size: 9px;
    }
}
.pagination{
    text-align: center;
    display: flex;
}
.pagination a{
    margin: 2px;
    text-align: center;
    font-weight: bold;
    background-color: #003f88 ;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}
.pagination .active{
    color: #003f88;
    background-color: yellow ;
    border-radius: 5px;
}
.pagination span{
    margin: 2px;
    text-align: center;
    font-weight: bold;
    background-color: #003f88 ;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}
.category a button{
    color: white;
    background-color: #003f88;
    height: 30px;
    margin-bottom: 5px;
    border-radius: 15px;
}