@import "header_img.css";

@media (max-width: 1150px) {
    .header_img {
        object-fit: cover;
    }
}

main:has(:not(.header_img)) {
    margin-top: 5em !important;
}

#logo-container {
    width: 30em;
    padding-left: 2em;
}

.navbar {
    border-bottom: 1px solid #9e9e9e44;
}

main * {
    scroll-margin-top: 90px;
}

main {
    padding-top: 2em;
}

/* Footer so ausrichten, dass er bottom-sticky ist. (Wenn Höhe Inhalt < Höhe Seite => Footer bleibt unten) */

html,
body {
    height: 100%;
}

.wrapper {
    height: auto;
    min-height: 100%;
}

main {
    padding-bottom: 300px;
}

footer {
    height: fit-content;
    transform: translateY(-100%);
    font-size: 0.85em;
    padding: 1em;
    width: 100%;
    text-align: center;
}

@media (min-width: 1200px) {
    [data-bs-theme=dark] {
        .navbar {
            --bs-bg-opacity: 0.75;
        }
    }

    .navbar {
        margin-top: 1em;
        margin-left: 1.5em;
        margin-right: 1.5em;
        border-radius: var(--bs-border-radius-lg);
        border-style: solid;
        border-color: var(--bs-secondary-border-subtle);
        border-width: 1px;
        --bs-bg-opacity: 0.7;
        backdrop-filter: blur(10px);
    }

    main * {
        scroll-margin-top: 110px;
        scroll-behavior: smooth;
    }

    main {
        margin-left: 8%;
        margin-right: 8%;
    }
}

@media (min-width: 1200px) {
    .navbar {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    main {
        padding-bottom: 500px;
    }
}

@media (max-width: 650px) {
    #logo-container {
        width: 80%;
    }
}

:is(.show, .showing) .navbar-nav>li {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1em;
}

.navbar-nav>li {
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em;
    height: 100%;
    font-weight: 700;
    font-size: medium;
}