body.index_endpoint {
    min-height: 100vh;
    background-color: #030812;
}

body.index_endpoint #links_on_top {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1rem 0;
}

body.index_endpoint #links_on_top a {
    color: #f8fafc;
    text-shadow: 0 0.1rem 0.5rem rgba(2, 6, 17, 0.85);
}

body.index_endpoint #links_on_top a,
body.index_endpoint #links_on_top a:link *,
body.index_endpoint #links_on_top a:hover *,
body.index_endpoint #links_on_top a:visited *,
body.index_endpoint #links_on_top a:active * {
    color: #f8fafc;
}

body.index_endpoint #links_on_top a:is(:hover, :focus) {
    color: #ffffff;
}

body.index_endpoint {
    background-image:
        linear-gradient(rgba(2, 6, 17, 0.4), rgba(2, 6, 17, 0.7)),
        url("img/aurora-desktop-1440.jpg");
    background-position: center center;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, fixed;
}

@supports (background-image: -webkit-image-set(url("img/aurora-desktop-1440.jpg") 1x)) {
    body.index_endpoint {
        background-image:
            linear-gradient(rgba(2, 6, 17, 0.4), rgba(2, 6, 17, 0.7)),
            -webkit-image-set(
                url("img/aurora-desktop-1440.jpg") 1x,
                url("img/aurora-desktop-1920.jpg") 1.33x,
                url("img/aurora-desktop-2880.jpg") 2x
            );
    }
}

@supports (background-image: image-set(url("img/aurora-desktop-1440.jpg") 1x)) {
    body.index_endpoint {
        background-image:
            linear-gradient(rgba(2, 6, 17, 0.4), rgba(2, 6, 17, 0.7)),
            image-set(
                url("img/aurora-desktop-1440.jpg") 1x,
                url("img/aurora-desktop-1920.jpg") 1.33x,
                url("img/aurora-desktop-2880.jpg") 2x
            );
    }
}

body.index_endpoint main[id^="main_"] {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background: rgba(10, 14, 24, 0.34);
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.28);
}

#main_index {
    background: rgba(10, 14, 24, 0.18);
}

body.index_endpoint footer {
    margin: 0 1rem 1rem;
    padding: 0 0 1rem;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: #f8fafc;
    text-align: center;
    text-shadow: 0 0.1rem 0.5rem rgba(2, 6, 17, 0.85);
}

body.index_endpoint footer a {
    color: inherit;
}

@media (orientation: portrait), (max-aspect-ratio: 4/5) {
    body.index_endpoint {
        background-color: #030812;
        background-image:
            linear-gradient(rgba(2, 6, 17, 0.28), rgba(2, 6, 17, 0.72)),
            url("img/aurora-mobile-720.jpg");
        background-position: center top;
        background-size: auto, cover;
        background-repeat: no-repeat, no-repeat;
        background-attachment: scroll, scroll;
    }

    body.index_endpoint #links_on_top {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 0.75rem 0;
    }

    @supports (background-image: -webkit-image-set(url("img/aurora-mobile-720.jpg") 1x)) {
        body.index_endpoint {
            background-image:
                linear-gradient(rgba(2, 6, 17, 0.28), rgba(2, 6, 17, 0.72)),
                -webkit-image-set(
                    url("img/aurora-mobile-720.jpg") 1x,
                    url("img/aurora-mobile-1080.jpg") 1.5x,
                    url("img/aurora-mobile-1440.jpg") 2x
                );
        }
    }

    @supports (background-image: image-set(url("img/aurora-mobile-720.jpg") 1x)) {
        body.index_endpoint {
            background-image:
                linear-gradient(rgba(2, 6, 17, 0.28), rgba(2, 6, 17, 0.72)),
                image-set(
                    url("img/aurora-mobile-720.jpg") 1x,
                    url("img/aurora-mobile-1080.jpg") 1.5x,
                    url("img/aurora-mobile-1440.jpg") 2x
                );
        }
    }

    body.index_endpoint main[id^="main_"] {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        border-radius: 0.75rem;
    }

    body.index_endpoint footer {
        margin: 0 0.5rem 0.5rem;
        border-radius: 0.5rem;
    }
}