:root {
    --super-color-1: #d2cfc0;
    --super-color-2: #498935;
    --super-color-3: #e9e8df;
    --super-color-4: #c4c1b1;
}

/* .darkmode {
    --super-color-1: #000;
    --super-color-2: #63ad4c;
} */
::-webkit-scrollbar-track {
    background: var(--super-color-2);
}

header {
    --color: #498935;
}

html:not(.darkmode) header .mobile-on.dark {
    background-color: var(--super-color-2);
    border-top: 3px solid #000;
    box-shadow: 0 0 31px #00000066;
}

html:not(.darkmode) header .mobile-on.dark a {
    color: #FFF !important;
}

html.darkmode header .mobile-on.dark {
    background-color: var(--super-color-2);
}

html.darkmode header .mobile-on.dark a {
    color: #FFF;
}

html:not(.darkmode) body {
    background: rgb(from var(--super-color-1) r g b / 80%);
}

html:not(.darkmode) header,
html:not(.darkmode) .container.nav,
html:not(.darkmode) header .nav ul li ul,
html:not(.darkmode) header .nav ul ul li:hover a {
    background-color: var(--super-color-1);
}

html:not(.darkmode) .device-mobile header,
html:not(.darkmode) .device-mobile .container.nav,
html:not(.darkmode) .device-mobile header .nav ul li ul,
html:not(.darkmode) .device-mobile header .nav ul ul li:hover a {
    background-color: var(--super-color-1);
    background: linear-gradient(0deg, var(--super-color-1) 0%, #e9e8df 90%);
}

header .nav a:hover {
    color: #FFF !important;
}

html:not(.darkmode) .device-mobile header .nav a:hover {
    color: #000 !important;
}

body:not(.device-mobile) nav>ul>li>ul {
    box-shadow: 0px 8px 10px #00000022 !important;
}

/* html:not(.darkmode) header .nav>ul>ul>li:hover>a {
    background-color: #00000011;
} */

.btn,
a.btn,
a.btn:active,
a.btn:hover,
a.btn:visited {
    background-color: var(--super-color-2);
}

.btn:hover,
a.btn:hover {
    background-color: rgb(from var(--super-color-2) r g b / 80%);
}

header a,
header a:active,
header a:hover,
header a:visited,
.c,
a.c,
.mm-carousel .grid .title {
    color: var(--super-color-2);
}

header .nav ul li {
    font-weight: bold;
    font-size: 0.9em;
}

header nav>ul>li>a,
header nav>ul>li>ul>li,
.device-mobile header .nav ul li a,
.theater-stk {
    border-color: rgb(from var(--super-color-2) r g b / 20%) !important;
}

html:not(.darkmode) .theater-stk {
    background-color: #FFFFFF66;
}

header .rounded {
    border-color: rgb(from var(--super-color-2) r g b / 20%);
}

.darkmode .device-mobile header .icon {
    transform: scale(1.2);
    color: var(--super-color-1);
}

h1,
h2,
h3 {
    color: var(--super-color-2);
}

.mm-carousel>.points>div {
    background-color: var(--super-color-2);
}

header .brand img {
    display: none !important;
}

header .brand a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

header .brand a::after {
    content: "";
    background-image: url(/assets/mandalorian/logo-cn.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 140px;
    height: 35px;
    display: inline-block;
}

header .container.nav::before {
    content: "";
    background-image: url(/assets/mandalorian/grogu.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 160px;
    height: 100%;
    display: inline-block;
    margin-right: -30px;
}

html.darkmode .container.nav::before {
    content: "";
    background-image: url(/assets/mandalorian/grogu-d.png);
}

header .nav {
    grid-template-columns: auto auto 1fr auto auto;
}

header .container.nav>div {
    min-width: 40px;
}

.device-mobile header .container.nav::before {
    height: 90px;
    align-items: center;
    justify-content: center;
    align-self: center;
    display: flex;
    justify-items: center;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    margin: -30px 0 0px -30px;
    background-size: 240px;
    background-position: top center;
}

@media (max-width: 768px) {
    body.nav-fix[scroll-dir=down]:not(.nav-open) header {
        top: -130px;
        transition: top .2s;
    }
}

/******************** DARKMODE ********************/
.darkmode header,
.darkmode header .nav ul li a {
    color: var(--super-color-1);
}

@font-face {
    font-family: 'Agency FB Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Agency FB Bold'), url('/assets/mandalorian/AGENCYB.woff') format('woff');
}

.device-mobile header .container.nav::after {
    font-family: 'Agency FB Bold', Arial, Helvetica, sans-serif;
    grid-column-start: 4;
    grid-column-end: -1;
    grid-row-start: 2;
    padding: 0.2em .6em;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 22px;
    border: 2px solid #000000CC;
    color: #FFF;
    background: rgb(from var(--super-color-2) r g b / 70%);
    margin: 0px auto 0 -80px;
    display: inline-block;
    width: auto;
    line-height: 0.8em;
}

.device-desktop header .container.nav .brand {
    display: flex;
    flex-direction: column;
}

.device-desktop header .container.nav .brand::after {
    font-family: 'Agency FB Bold', Arial, Helvetica, sans-serif;
    grid-column-start: 4;
    grid-column-end: -1;
    grid-row-start: 2;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    border: 2px solid #00000099;
    color: #FFF;
    background: rgb(from var(--super-color-2) r g b / 50%);
    display: flex;
    margin: auto;
    margin-top: -3px;
    line-height: 1.2em;
    padding: 0.1em 0.4em;
}

.device-mobile header .container.nav::after,
.device-desktop header .container.nav .brand::after {
    /* content: "Infos & Tickets"; */
}

.lang-nl .device-mobile header .container.nav::after,
.lang-nl .device-desktop header .container.nav .brand::after {
    /* content: "Info & Tickets"; */
}

.device-mobile header .container.nav::before {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 2;
    margin: -30px 0 0px 0px;
}

a.mandalorian-click {
    display: block;
    position: absolute;
}

.device-desktop a.mandalorian-click {
    left: 0;
    bottom: 0;
    top: 0;
    width: 180px;
}

.device-mobile a.mandalorian-click {
    right: 0;
    left: 0;
    bottom: 0;
    height: 60px;
}

.container.nav {
    position: relative;
}