@font-face {
    font-family: "Old Press";
    src: url("/assets/font/old_press/Old Press.ttf")
}

body{
    font-family: "Old Press", var(--bs-body-font-family);
    font-size: 1.5rem;
}

:root,
:host {
    --bs-primary-base: oklch(36% 0.15 30deg);

    --bs-primary-100: color-mix(in oklch, var(--bs-white) 80%, var(--bs-primary-base));
    --bs-primary-200: color-mix(in oklch, var(--bs-white) 60%, var(--bs-primary-base));
    --bs-primary-300: color-mix(in oklch, var(--bs-white) 40%, var(--bs-primary-base));
    --bs-primary-400: color-mix(in oklch, var(--bs-white) 20%, var(--bs-primary-base));
    --bs-primary-500: var(--bs-primary-base);
    --bs-primary-600: color-mix(in oklch, var(--bs-black) 16%, var(--bs-primary-base));
    --bs-primary-800: color-mix(in oklch, var(--bs-black) 48%, var(--bs-primary-base));
    --bs-primary-900: color-mix(in oklch, var(--bs-black) 64%, var(--bs-primary-base));

    --bs-primary-fg: light-dark(var(--bs-primary-600), var(--bs-primary-400));
    --bs-primary-fg-emphasis: light-dark(var(--bs-primary-800), var(--bs-primary-200));
    --bs-primary-bg: var(--bs-primary-500);
    --bs-primary-bg-subtle: light-dark(var(--bs-primary-100), var(--bs-primary-900));
    --bs-primary-bg-muted: light-dark(var(--bs-primary-200), var(--bs-primary-800));
    --bs-primary-border: light-dark(var(--bs-primary-300), var(--bs-primary-600));
    --bs-primary-focus-ring: light-dark(color-mix(in oklch, var(--bs-primary-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-primary-500) 75%, var(--bs-bg-body)));
    --bs-primary-contrast: var(--bs-black);

    --bs-accent-base: var(--bs-primary-base);
    --bs-accent-fg: var(--bs-primary-fg);
    --bs-accent-fg-emphasis: var(--bs-primary-fg-emphasis);
    --bs-accent-bg: var(--bs-primary-bg);
    --bs-accent-bg-subtle: var(--bs-primary-bg-subtle);
    --bs-accent-bg-muted: var(--bs-primary-bg-muted);
    --bs-accent-border: var(--bs-primary-border);
    --bs-accent-focus-ring: var(--bs-primary-focus-ring);
    --bs-accent-contrast: var(--bs-primary-contrast);

    --bs-bg-body: var(--bs-black);
    --bs-fg-body: var(--bs-gray-050);
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    --bs-heading-font-family: "Old Press", sans-serif;
    --bs-heading-color: var(--bs-primary-base);
    text-shadow: -1px 0 1rem var(--bs-white), 0 1px 1rem var(--bs-white), 1px 0 1rem var(--bs-white), 0 -1px 1rem var(--bs-white);
}

#browse-happy-banner {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #1a1a1a;
    color: #ffffff;
    z-index: 999999; /* Legt sich über alles andere */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Old Press", sans-serif;
    padding: 20px;
    box-sizing: border-box;
}

.bh-content {
    max-width: 600px;
    text-align: center;
    background: #2a2a2a;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #444;
}

.bh-content h3 { margin-top: 0; color: #ff4d4d; font-size: 24px; }

.bh-content p { line-height: 1.6; color: #ccc; }

/* 2. Wenn der Browser modern genug für Bootstrap 6 ist, BLENDE DAS BANNER AUS */
@supports (color: light-dark(#fff, #000)) {
    #browse-happy-banner {
        display: none !important;
    }
}

body {
    background-image:
            url("/assets/img/background.png");
    background-size:
            cover;
    background-repeat: no-repeat;
    background-position:
            37.5% 0;
    background-attachment: fixed;
}

@media(min-width: 768px) and (orientation: landscape){
    body {
        background-image:
                url("/assets/img/Melanie.PNG"),
                url("/assets/img/background.png");
        background-size:
                contain,
                cover;
        background-position:
                150% 0,
                0 0;
    }

}
@media(min-width: 1024px) {
    body{
        background-image:
                url("/assets/img/background.png");
        background-size:
                cover;
        background-position:
                0 0;
    }
}

@media(min-width: 1280px){
    body {
        background-image:
                url("/assets/img/Melanie.PNG"),
                url("/assets/img/SagradaMuerte.PNG"),
                url("/assets/img/background.png");
        background-size:
                contain,
                75%,
                cover;
        background-position:
                100% 0,
                0 100%,
                0 0;
    }
}


@media(min-width: 1536px){
    body {
        background-size:
                contain,
                contain,
                cover;
        background-position:
                100% 0,
                0 100%,
                0 0
    }
}

.navbar-brand img {
    max-width: 275px;
}

header .nav-link {
    font-family: "Old Press", var(--bs-body-font-family);
    font-size: 2rem;
}
.navbar-nav {
    --bs-nav-link-color: var(--bs-navbar-color);
    --bs-nav-link-hover-color: var(--bs-primary-base);
    --bs-nav-link-active-color: var(--bs-primary-base);
}

.navbar {
    --bs-navbar-active-color: var(--bs-primary-base);
}

.nav-link:hover,
.nav-link:focus,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    text-shadow:
            -1px 0 1rem var(--bs-white),
            0 1px 1rem var(--bs-white),
            1px 0 1rem var(--bs-white),
            0 -1px 1rem var(--bs-white);
}
header .navbar-nav .nav-link.active,
header .navbar-nav .nav-link.show {
    text-decoration: underline;
}

footer p{
    font-size: 1rem;
    font-family: var(--bs-body-font-family);
    min-height: 10vh;
}
@media(min-width: 768px) {
    footer{
        background-image: url("/assets/img/logo-without-skull.svg");
        background-repeat: no-repeat;
        background-size: 100px;
        background-position-y: center;
        background-position: 2rem
    }
}

footer .nav-link{
    gap:0;
    border:0;
    margin:0;
    padding-left: 0;
    padding-right: 0;
}
footer .nav-link + .nav-link:before,
footer .nav-link + .nav-link::before{
    content:"|";
    color: initial!important;
    text-shadow: none!important;
    padding-left: .25rem;
    padding-right: .25rem;
}