background: linear-gradient(to right, rgb(from var(--brand-light) r g b / 90%), rgb(from var(--brand) r g b / 90%), rgb(from var(--brand-light) r g b / 90%));;
opacity: .9;
box-shadow: 0 3px 6px -4px var(--shadow);
box-shadow: 0 3px 6px -4px var(--shadow);
position: -webkit-sticky;
position: -webkit-sticky;
position: sticky;
position: sticky;
top: 0;
top: 0;
z-index: 10;
z-index: 10;
min-height: 2em;
min-height: 2em;
margin-top: -1px;
margin-top: -1px;
}
}
#nav {
#nav {
position: relative;
position: relative;
margin: auto;
margin: auto;
width: 100%;
width: 100%;
max-width: 1160px;
max-width: 1160px;
min-width: 960px;
min-width: 960px;
}
}
#nav-button,
#nav-button,
#nav-label {
#nav-label {
display: none;
display: none;
}
}
#nav-content ul {
#nav-content ul {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
max-width: 640px;
max-width: 640px;
}
}
#nav-content li {
#nav-content li {
line-height: 1.5;
line-height: 1.5;
list-style: none;
list-style: none;
transition: .3s;
transition: .3s;
}
}
#nav-content li a {
#nav-content li a {
display: block;
display: block;
font-size: 1.4rem;
font-size: 1.4rem;
padding: .5em 10px;
padding: .5em 10px;
color: var(--brand-font);
color: var(--brand-font);
}
}
#nav-content li a:hover {
#nav-content li a:hover {
background: #eef;
background: #eef;
color: #333!important;
color: #333!important;
}
}
@media (max-width: 1024px ) {
@media (max-width: 1024px ) {
nav {
nav {
height: 2em;
height: 2em;
}
}
#nav {
#nav {
box-shadow: 0 3px 6px -4px var(--shadow);
box-shadow: 0 3px 6px -4px var(--shadow);
background: var(--light-bg);
background: rgb(from var(--light-bg) r g b / 90%);