/*

Colors

#fbf7ff
#f6dcff
#e7b7f7
#9664A0
#7636a5
#5f1d80
#530064

*/

.navBar1_mainDIV
{
    justify-content: space-around;
}

.menuItems_hDIV
{
    justify-content: center;
}

.navBar1_mainDIV,
.menuDivider
{
    border-bottom: solid 0.1em #f6dcff;
}

.notifDIV
{
    background: url(images/bell-regular.svg);
}

.pageHomeDIV
{
    background: url(images/house-solid.svg);
}

.accountDIV
{
    text-align: center;
    
}

.searchDIV::after
{
    content: url(images/magnifying-glass-solid.svg);
    display: block;
    position: absolute;
    filter: brightness(10);
}

.pageTitleNavBarDIV
{
    text-align: center;
}

.notifDIV,
.pageHomeDIV
{
    height: 50%;
}



/*
------------------------------------ ASPECT RATIO DRIVEN RULES
----------------------
---------------------- PORTRAIT RULES
*/

.navBarLogoDIV,
.navIconDIV,
.accountDIV,
.pageTitleNavBarDIV
{
    margin: auto 1vw;
}

.navBar1_mainDIV,
.navBarLogoDIV img
{
    height: 2.3em;
}

.notifDIV,
.pageHomeDIV
{
    width: clamp(0.8em, 2.4vw, 5em);
}

.accountDIV
{
    padding: 1vw;
    border-radius: 3vw;
    font-size: 1.4vw;
    height: 2vw;
    width: 2vw;
    line-height: 2vw;
}

.searchDIV::after
{
    width: 1.4vw;
    margin: -3.2vw 0.9vw;
}

.pageTitleNavBarDIV
{
    width: 65vw;
}

/*
---------------------- LANDSCAPE RULES
*/

@media (min-aspect-ratio: 1)
{
    
}

/*
------------------------------------ MAXIMUMS/LIMITS
*/

@media screen and (min-width: 56em)
{
    .navBarLogoDIV,
    .navIconDIV,
    .accountDIV,
    .pageTitleNavBarDIV
    {
        margin: auto 0.4em;
    }
    
    /*
    .navBar1_mainDIV,
    .navBarLogoDIV img
    {
        height: 2.2em;
    }

    .notifDIV,
    .pageHomeDIV
    {
        width: 2.2em;
    }
    */

    .accountDIV
    {
        padding: 0.5em;
        border-radius: 1.5em;
        font-size: 0.7em;
        height: 1.5em;
        width: 1.5em;
        line-height: 1.6em;
    }

    .searchDIV::after
    {
        width: 0.8em;
        margin: -1.4em 0.3em;
    }
}