.navbar {
    font-family: 'Nunito', sans-serif;
    background: var(--header-BackgroundColor);
    color: var(--header-textColor);
    z-index: 9999;
    height: var(--header-Height);
    padding: 0 3.75rem;

    .navbar-brand {
        h3 {
            margin-bottom: 0;
        }
        img {
            height: 3rem;
            width: 2.625rem;
        }
        .title {
            font-size: 1.75rem;
            font-weight: 350;
            line-height: 2.1rem;
        }
        .subtitle {
            font-size: 1.125rem;
            font-weight: 250;
        }
    }

    .navbar-items {
        display: flex;
        align-items: center;
        flex-direction: row;
    }
    .navbar-toggler {
        display: none;
    }
    @media screen and (max-width: 900px) {
        .navbar-toggler {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto 0;
            border: #ffd39c solid .2rem;
            border-radius: 1rem;
            width: 3rem;
            height: 3rem;
            .navbar-toggler-icon {
                mask-image: url("../public/icons/bars-solid.svg");
                -webkit-mask-image: url("../public/icons/bars-solid.svg");
                mask-repeat: no-repeat;
                -webkit-mask-repeat: no-repeat;
                mask-position: center;
                -webkit-mask-position: center;

                background-color: #d8ac74;

                width: 2rem;
                height: 2rem;
                position: relative;
            }
        }
        .navbar-items {
            display: none;
        }

        &.navbar-expanded {
            .navbar-items {
                display: flex;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                width: 100%;
                transition: height 0.15s ease-in-out;
                flex-direction: column;
                background: var(--header-BackgroundColor);

                .nav-item {
                    margin: .5rem 0;
                }
            }
        }
    }

    .nav-item .nav-link {
        font-family: 'Nunito', sans-serif;
        font-size: 1.4rem;
        line-height: 1.5rem;
        font-weight: 250;
        white-space: nowrap;

        &:hover {
            color: rgba(255,255,255, .75);
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        }
    }
}

.external-link-icon:after {
    content: "";
    position: relative;
    display: inline-block;
    left: 5px;
    top: 2px;
    background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNzUuNzg4IDE4IDQ2LjU2NCA0Ny4yMjRhNC40MDIgNC40MDIgMCAwIDAgMCA2LjIyMyA0LjQwMyA0LjQwMyAwIDAgMCA2LjIyMyAwTDgyIDI0LjIzM3Y5Ljc3QTQuMDAxIDQuMDAxIDAgMCAwIDg2IDM4YzIuMjA1IDAgNC0xLjc5IDQtMy45OTdWMTMuOTk3YzAtMS4xMDEtLjQ0Ny0yLjEtMS4xNy0yLjgyNEEzLjk4MyAzLjk4MyAwIDAgMCA4Ni4wMDIgMTBINjUuOTk3QTQuMDAxIDQuMDAxIDAgMCAwIDYyIDE0YzAgMi4yMDUgMS43OSA0IDMuOTk3IDRoOS43OTFaTTkwIDU4VjM4Ljk4NSA4MC4wM2MwIDUuNTA2LTMuOTY3IDkuOTctOC44NjcgOS45N0gxOC44NjdDMTMuOTcgOTAgMTAgODUuNTI3IDEwIDgwLjAzVjE5Ljk3YzAtNS41MDYgMy45NjctOS45NyA4Ljg2Ny05Ljk3aDQyLjdINDJhNCA0IDAgMSAxIDAgOEgyMC4yNzhDMTkuMDA1IDE4IDE4IDE5LjE5NSAxOCAyMC42NjlWNzkuMzNDMTggODAuNzggMTkuMDIgODIgMjAuMjc4IDgyaDU5LjQ0NEM4MC45OTUgODIgODIgODAuODA1IDgyIDc5LjMzMVY1OGE0IDQgMCAxIDEgOCAwWiIgZmlsbD0iI2ZmZDM5YyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=') center center;
    background-size: contain;
    height: 16px;
    width: 16px;
}