hypothetical/resources/sass/app.scss

// Sass modules
@use "sass:math";

// Base font size
$base-font-size: 16px;

// Libraries
$enable-smooth-scroll: false;
@import "bootstrap/scss/bootstrap.scss";

// Functions
@import "functions/**/*.scss";

// Core
@import "_fonts";
@import "_common-vars";
@import "_site-vars";

// Supplementary
@import "mixins/**/*.scss";
@import "classes/**/*.scss";
@import "partials/**/*.scss";
@import "sections/**/*.scss";
@import "pages/**/*.scss";

//
// Main Website Styles
//

[data-whatinput="initial"], [data-whatinput="keyboard"] {
    :focus {
        outline: 1px dotted $c-accent;
    }
}

[data-whatinput="mouse"], [data-whatinput="touch"] {
    :focus {
        outline: none !important;
    }
}

html {
    width: 100%;
    font-size: $base-font-size;

    @include media-breakpoint-up(xxxl) {
        font-size: 18px;
    }

    @include media-breakpoint-up(xxxxl) {
        font-size: 20px;
    }

    &.no-scroll {
        overflow-y: hidden;
    }
}

body {
    @include font-sans;
    width: 100%;
    color: $c-text;
    -webkit-overflow-scrolling: touch;

    a, button {
        color: inherit;

        &:hover, &:focus {
            color: inherit;
        }
    }
}

.page-container {
    display: flex;
    min-height: 100vh;
    flex-direction: column;

    @media (max-width: $nav-mobile-max) {
        padding-top: $nav-height-mobile;
    }

    @media (min-width: $nav-desktop-min) {
        padding-top: $nav-height-desktop;
    }

    .main-content {
        display: flex;
        flex-grow: 1;

        > div {
            width: 100%;
        }
    }
}