.navbar {
    /*background-color:hsla(304,0%,100%,0.9) !important;*/
    /*background-image:*/
    /*radial-gradient(at 76% 74%, hsla(300,0%,81%,1) 0px, transparent 50%),*/
    /*radial-gradient(at 80% 16%, hsla(77,0%,82%,1) 0px, transparent 50%),*/
    /*radial-gradient(at 81% 48%, hsla(301,0%,75%,1) 0px, transparent 50%);*/
    background: linear-gradient(-45deg, #f5feff, #f2f2f0, #f3f9fb, #f2f4fb);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    color: hsla(246,72%,16%,1);
    border-bottom: 1px solid black;
    z-index: 1000;
}

.dummy-navbar {
    margin-top: 76px;
}

.navbar-toggler {
    border: 0px;
    position: absolute;
    top: 17px;
}

.navbar-header {
    padding-top: 5px;
    padding-bottom: 5px;
}

/*.navbar-brand {*/
/*    border: 4px solid black;*/
/*    padding-top: 6px;*/
/*    padding-bottom: 12px;*/
/*}*/

/* credit: https://codepen.io/t_afif/pen/xxpRrOG */
.navbar-brand {
    --c: #000000; /* the border color */
    --b: 4px; /* the border thickness*/
    --g: 5px; /* the gap on hover */

    /*padding: calc(var(--g) + var(--b));*/
    padding-top: 10px;
    padding-bottom: 16px;
    padding-left: 3px;
    padding-right: 5px;

    --_g: #0000 25%, var(--c) 0;
    background: conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) var(--_i, 200%) 0  /200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left var(--b), var(--_g)) 0 var(--_i, 200%)/var(--_i, var(--b)) 200% no-repeat;
    transition: .3s, background-position .3s .3s;
    cursor: pointer;
}

.navbar-brand:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}