div.modern-page-navigation {
    flex-wrap: wrap;
}

div.modern-page-navigation a, 
span.modern-page-current, 
span.modern-page-dots {
    margin-left: 20px;
    font-size: 18px;
    color: var(--font-color);
    font-weight: normal;
}

div.modern-page-navigation a.modern-page-first, 
div.modern-page-navigation span.modern-page-first {}

span.modern-page-current {
    color: var(--red);
    font-weight: bold;
    border-bottom: 1px solid transparent;
}

div.modern-page-navigation a, 
span.modern-page-current, 
div.modern-page-navigation a.modern-page-previous, 
span.modern-page-dots {}

div.modern-page-navigation a {
    border-bottom: 1px solid transparent;
    transition: border-color .3s;
}
div.modern-page-navigation a:hover {
    border-color: var(--red);
}
div.modern-page-navigation a.modern-page-previous,
div.modern-page-navigation a.modern-page-next {
    border-bottom: none;
}
div.modern-page-navigation a.modern-page-dots {
    border-bottom: 1px solid transparent;
    transition: color .3s;
}
div.modern-page-navigation a.modern-page-dots:hover {
    color: var(--red);
}
div.modern-page-navigation a.modern-page-previous:hover path,
div.modern-page-navigation a.modern-page-next:hover path {
    stroke: var(--red);
}