bluelib/examples/index.css

#background {
    width: 100vw;
    height: 120vh;

    position: fixed;
    z-index: -1;

    object-fit: cover;
    object-position: center;
}

#body {
    padding: 0 16px;
}

#background {
    margin: 0 -16px;
}

@media screen and (max-width: 800px) {
    #body {
        padding: 0 8px;
    }

    #background {
        margin: 0 -8px;
    }
}

@media screen and (max-width: 400px) {
    #body {
        padding: 0 4px;
    }

    #background {
        margin: 0 -4px;
    }
}

#body .chapter-1 > .panel,
#body .chapter-2 > .panel,
#body .chapter-3 > .panel,
#body .chapter-4 > .panel,
#body .chapter-5 > .panel,
#body .chapter-6 > .panel,
#body .chapter-7 > .panel,
#body .chapter-8 > .panel,
#body .chapter-9 > .panel {
    min-width: 360px;
}

#body .panel .chapter-1 > .panel,
#body .panel .chapter-2 > .panel,
#body .panel .chapter-3 > .panel,
#body .panel .chapter-4 > .panel,
#body .panel .chapter-5 > .panel,
#body .panel .chapter-6 > .panel,
#body .panel .chapter-7 > .panel,
#body .panel .chapter-8 > .panel,
#body .panel .chapter-9 > .panel {
    min-width: unset;
}

#body article {
    margin: 0 auto;

    max-width: 1600px;
}