.navbar {
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.header {
    font-family: FFDINforPUMAW05-Regular !important;

    .siteTitle {
        font-family: FFDINforPUMAW05-Bold;
        font-size: 25px;
    }

    .nav-link {
        font-size: 16px !important;
        font-family: FFDINforPUMAW05-Regular !important;
        color: black;
        font-weight: 900 !important;
    }

    .dropdown-item {
        font-family: FFDINforPUMAW05-Regular !important;
        font-size: 14px !important;
    }

    .nav>li>a:hover {
        background-color: transparent;
    }

    a:not(.btn):hover {
        text-decoration: none !important;
    }

    .username,
    .username:focus {
        background-color: #f3efe9;
        border-radius: 50%;
        padding: 7px;
        color: #AE946D;
        font-family: "FFDINforPUMAW05-Regular" !important;
        font-size: calc(var(--avatar-size) / 2);
    }

    #persona .dropdown-toggle::after {
        display: none;
    }

    .custom-navbar-toggler {
        background-color: white;
    }

    .headerTitle {
        width: 100%;
        text-align: center;
        font-size: 16px;
        font-family: 'FFDINforPUMAW05-Bold';
    }

    #nav-img {
        margin-right: 14px;
        height: 17px;
    }

    .custom-container {
        flex-wrap: nowrap !important;
    }

    .navbar-header {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .header {
        font-family: FFDINforPUMAW05-Regular !important;

        .nav-link {
            font-size: 12px !important;
            font-family: FFDINforPUMAW05-Regular !important;
            color: black;
            font-weight: 900 !important;
        }

        .navbar-toggler {
            font-size: 15px;
        }

        .dropdown-item {
            font-family: FFDINforPUMAW05-Regular !important;
            font-size: 14px !important;
        }

        .headerTitle {
            width: 50%;
            text-align: center;
            font-size: smaller;
        }

    }

}

@media only screen and (max-width: 320px) {
    .header {
        .headerTitle {
            width: 40%;
        }

    }

}

.mobile-nav-hidden {
    display: none;
}