@use "sass:map";

@import 'bootstrap/functions';
@import 'bootstrap/variables';
@import 'bs-overrides';

[data-bs-theme="light"] {
    --siteBackground: linear-gradient(to bottom right, rgb(80, 160, 220), rgb(114, 165, 255));
}

[data-bs-theme="dark"] {
    --siteBackground: linear-gradient(to bottom right, rgb(70, 81, 110), rgb(16, 20, 60));
}

body {
    background: var(--siteBackground);
    background-repeat: no-repeat;
    background-attachment: fixed;

    @each $tag, $size in $heading-font-sizes {
        #{$tag} {
            font: {
                family: $heading-font-family;
                size: $size;
                weight: bold;
            }

            small {
                font-size: calc(2em / 3);
            }

            @each $breakpoint, $modifier in $heading-breakpoints {
                @media (max-width: #{map-get($grid-breakpoints, $breakpoint)}) {
                    font-size: $size * $modifier;
                }
            }
        }
    }

    .navbar-brand img {
        max-width: 40px;
        height: auto;
        transform: rotate(340deg);
    }
}