#topBar{
    border-bottom:  1px solid var(--clrAccent2);
    clear:          both;
    font-family:    "Montserrat";
    width:          100%;
}

#pageHeader{
    background: var(--clrAccent1);
    height:     var(--navBarHeight);
    width:      100%;
}

#pageTitle{
    color:              var(--clrText2);
    font-weight:        1000;
    line-height:        var(--navBarHeight);
    padding-left:       20px;
    text-shadow:        var(--stroke);
    text-decoration:    none;
    width:              fit-content;
}

#themeBox{
    color:          var(--clrText2);
    float:          right;
    font-size:      1em;
    padding-top:    10px;
    padding-right:  5px;
}
#theme{
    background:         var(--clrAccent1);
    border:             none;
        border-radius:  10px;
    color:              var(--clrText2);
    padding:            5px 5px;
    outline:            1px solid var(--clrText2);
}#theme:hover{
    background:         var(--clrAccent1);
    color:              var(--clrText2);
}#theme:open{
    background:         var(--clrBG);
    color:              var(--clrText);
}
option{background: var(--clrBG)}

#pageNav{
    height:         var(--navBarHeight);
    width:          100%;
}

.btnPageNav{
    background:         var(--clrBG);
    display:            flex;
    color:              var(--clrText);
    float:              left;
    height:             100%;
    justify-content:    space-around;
    line-height:        var(--navBarHeight);
    overflow:           hidden;
    position:           relative;
    text-align:         center;
    text-decoration:    none;
    width:              calc(99.5% / 4);
    word-wrap:          normal;
}.btnPageNav:hover{
    background:         none;
    border-radius:      15px;
    color:              var(--clrAccent1);
    font-weight:        600;
    outline:            1px solid var(--clrAccent1);
        outline-offset: -4px;
}