body {
    display: flex;
    flex: 1 1;
    height: 100vh;
    min-width: 300px;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}
  
@media (min-width: 768px) {
    html {
      font-size: 16px;
    }
}

header {
    width: auto;
    max-width: 200px;
    height: 100vh;
    opacity: 1;
    transition: width .5s ease-in-out, opacity .7s ease-in-out;
}
footer {
    height: auto;
    opacity: 1;
    transition: height .5s ease-in-out, opacity .7s ease-in-out;
}
nav.upper, nav.lower {
    height: 0;
    opacity: 0;
    transition: height .5s ease-in-out, opacity .7s ease-in-out;
}
nav.upper {
    max-height: 75px !important;
}
    nav.upper :is(a, img) {
        max-height: 75px !important;
    }
nav.lower {
    max-height: 110px !important;
}
    nav.lower :is(a, img) {
        max-height: 110px !important;
    }
@media only screen and (max-width: 576px) {
    header {
        width: 0;
        opacity: .7;
    }
        header.border,
        header.border-1 {
            border: none !important;
            border-width: 0 !important;
        }
    footer {
        height: 0 !important;
        opacity: .7;
    }
        footer.border-top {
            border-top: none !important;
        }
        footer.p-1,
        footer.pb-1 {
            padding: 0 !important;
        }
        footer > div {
            height: 0 !important;
        }
    nav.upper, nav.lower {
        height: unset;
        opacity: 1;
        z-index: 3;
    }

    main {
        top: 75px;
        z-index: 2;
    }
}

#content {
    height: 100vh;

    transition: filter .5s ease-in-out;
}

html[data-bs-theme="dark"] a.hide-if-same-theme[data-bs-theme-value="dark"],
html[data-bs-theme="light"] a.hide-if-same-theme[data-bs-theme-value="light"] {
    display: none;
}

.transition {
    z-index: 3000;
    height: 0px;
    transform: height .5s ease-in-out;

    opacity: 0.9;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}
    body.turbo-loading #content, 
    body.turbo-loaded #content {
        filter: blur(2px);
    }
    body.turbo-loading > .transition, 
    body.turbo-loaded > .transition {
        height: 100vh !important;
    }