#pages-box {
    width: 100%;
    display: flex;
    height: 35px;
}

#before-pages {
    flex-grow: 60;
    background-color: var(--primary-color);
    /* border-top-right-radius: 15px; */
}

#pages-background {
    flex-grow: 3;
    background-color: var(--primary-color);
    align-content: center;
}

#before-after-pages-background {
    flex-grow: 60;
    background-color: var(--primary-color);
}

#pages {
    font-size: calc(var(--pages-size) * 0.9);
    font-family: var(--font-family-secondary);
    color: white;
    display: flex;
    width: 100%;
    justify-content: center;
    background-color: var(--primary-color);
}

#pages a {
    font-family: var(--font-family-secondary);
    color: white;
}

#pages a:hover {
    font-family: var(--font-family-secondary);
    color: var(--tertiary-color);
}

#after-pages {
    flex-grow: 60;
    background-color: var(--primary-color);
    /* border-top-left-radius: 15px; */
}

@media (min-width: 1013px) {
    #left-margin-pages {
        padding-left: 240px;
        background-color: var(--primary-color);
    }

    #right-margin-pages {
        padding-right: 10%;
        background-color: var(--primary-color);
    }
}

@media (max-width: 565px) {
    #pages {
        font-size: 20px;
    }
}