.post-archive-image
{
    aspect-ratio                : 1 / 1;
    width                       : 100%;
    height                      : auto;
    border-top-left-radius      : 5%;
    border-top-right-radius     : 5%;
    object-fit                  : cover;
}

.category-description
{
    margin-top                  : 20px;
    font-size                   : 16px;
    line-height                 : 1.5;
}

.category-description.h2
{
    font-size                   : 24px;
    font-weight                 : bold;
    margin-bottom               : 10px;
    color                       : #00205C;
}

.cat-banner
{
    position                    : relative;
    text-align                  : center;
    color                       : white;
}

.cat-img-text
{
    position                    : absolute;
    top                         : 50%;
    left                        : 30%;
    transform                   : translate(-50%, -50%);
    font-size                   : 4vw;
    max-width                   : 60%;
    color                       : #ffffff;
}

.cat-img-bar
{
    position                    : absolute; 
    bottom                      : 0; 
    left                        : 0; 
    width                       : 100%; 
    height                      : 20px; 
    z-index                     : 9999;
    border-bottom-right-radius  : 12px;
    border-bottom-left-radius   : 12px;
}

.main-cat-banner
{
    aspect-ratio                : 5 / 2;
    width                       : 100%;
    height                      : auto;
    border-radius               : 12px;
}

.nav-links
{
    display                     : flex;
    flex-wrap                   : wrap;
    justify-content             : center;
    margin-top                  : 20px;
}

.page-numbers
{
    border-radius               : 50%;
}
span.page-numbers.current 
{
    background-color            :#041e42;
}

a:hover, a:focus, a:active 
{
    color                       :#041e42;
}


@media (max-width: 768px)
{
    .nav-links
    {
        align-items             : center;
    }

    .main-cat-banner
    {
        aspect-ratio            : 1;
        border-radius           : 20px;
    }

    .cat-img-text
    {
        top                         : 50%;
        left                        : 48%;
        font-size                   : 10vw;
    }
    .cat-img-bar
    {
        position                    : absolute; 
        bottom                      : 0; 
        left                        : 0; 
        width                       : 100%; 
        height                      : 20px; 
        border-bottom-right-radius  : 20px;
        border-bottom-left-radius   : 20px;
    }

    .post-title
    {
        font-size                   : 1.5em;
        margin-bottom               : 10px;
    }
}