@use "app-layout";
@use "../../../node_modules/bootstrap/scss/bootstrap";

#app-content {
    @include themer.themed {
        background-color: themer.color-of("background");
        color: themer.color-of("text");
    }
}

nav.navbar {
    @extend .navbar-expand-lg;
    @extend .sticky-top;
    @include themer.themed {
        @extend .navbar-light;
        background-color: themer.color-of("navbar");
    }
}

.jumbotron {
    @extend .container-fluid;
    @extend .p-4;
    @include themer.themed {
        background-color: themer.color-of("main");
    }

    &.sub {
        @include themer.themed {
            background-color: themer.color-of("sub");
        }
    }
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 3em;
}

hr {
    @extend .my-3;
    @include themer.themed {
        color: themer.color-of("bold");
    }
}