@use "sass:map";

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here
$list-group-bg: inherit;
$mostly-white: rgba(255,255,255, 0.7);

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
// @import "../node_modules/bootstrap/scss/type";
// @import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

body {
    background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.3)), url('img/pexels-bert-5985264.jpg');
    height: 100vh;
    background-position: center;
    background-size: cover;
}

header {
    h1 {
        background-color: $mostly-white;
        margin: 0 auto;
    }

    figure {
        max-width: 10rem;
        text-align: center;
        margin: map.get($spacers, 5) auto $spacer;
        img {
            max-width: 100%;
        }
    }
}

section ul {
    background-color: $mostly-white;
    max-width: 20rem;
    margin: 1rem auto;

    li {
        width: 100%;
        overflow: auto;

        i {
            float: left;
        }
    }
}