html,
body,
#app {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: #e5e7eb;
    background: transparent;
}


/* GLOBAL HERO BACKGROUND */

body::before {

    content: "";
    position: fixed;
    inset: 0;

    background:
        linear-gradient(
            rgba(3, 8, 18, 0.55),
            rgba(3, 8, 18, 0.55)
        ),
        url("/images/hero-hammerhead-miners.png");

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    z-index: -1;
}


/* KEINE OVERLAY-FLÄCHEN */

.page-shell,
main,
.content,
article {

    background: transparent !important;

}

/* HERO SECTION */

.hero {
    padding: 12rem 0 7rem 0;
    min-height: 72vh;
    background: transparent !important;
}

.hero-content {
    max-width: 760px;
    margin-left: 20vw;
    position: relative;
    z-index: 2;
}

/* RESPONSIVE */

@media (max-width: 900px) {

    body::before {
        background-position: center top;
    }

    .hero-content {
        margin-left: 0;
        padding: 0 1.5rem;
    }

}