bootstrap.scss

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Quattrocento:wght@400;700&display=swap');

@import "~bootstrap/scss/functions";

$enable-shadows: true;

$spacer: 1rem;
$spacers: (
        0: 0,
        1: $spacer * .25,
        2: $spacer * .5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
        6: $spacer * 4.5,
        7: $spacer * 6,
);

$font-family-sans-serif: "Quattrocento", "Helvetica Neue", sans-serif;
$line-height-base: 1.75;
$headings-font-family: "Cinzel";
$headings-font-weight: 500;
$display-font-weight: 400;
$display-line-height: 1;

$gray: #404abf;
$white: tint-color($gray, 90%);
$gray-100: tint-color($gray, 80%);
$gray-200: tint-color($gray, 60%);
$gray-300: tint-color($gray, 40%);
$gray-400: tint-color($gray, 20%);
$gray-500: $gray;
$gray-600: shade-color($gray, 20%);
$gray-700: shade-color($gray, 40%);
$gray-800: shade-color($gray, 60%);
$gray-850: shade-color($gray, 75%);
$gray-900: shade-color($gray, 80%);
$black: shade-color($gray, 90%);

$primary: $gray-500;

$body-bg: $gray-900;
$body-color: $gray-100;

$input-bg: $gray-850;
$btn-font-weight: 500;
$btn-close-color: $white;

$navbar-nav-link-padding-x: 20px;
$navbar-dark-color: rgba($body-color, .75);
$navbar-dark-hover-color: rgba($body-color, 1);
$navbar-dark-active-color: $body-color;
$navbar-dark-disabled-color: rgba($body-color, .25);
$navbar-dark-toggler-border-color: rgba($body-color, .1);

$carousel-control-prev-icon-bg: url("/img/left.png");
$carousel-control-icon-width: 50px;
$carousel-control-next-icon-bg: url("/img/right.png");
$carousel-indicator-height: 14px;
$carousel-indicator-width: 14px;
$carousel-indicator-opacity: 0.3;
$carousel-indicator-active-opacity: 0.6;
$carousel-indicator-spacer: 4px;
$carousel-transition-duration: 0.5s;

$modal-content-bg: $gray-850;
$modal-title-line-height: 1;
$modal-inner-padding: $spacer * 1.5;
$offcanvas-horizontal-width: 300px;

@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";

$letter-spacings: (
        1: 0.01em,
        2: 0.02em,
        3: 0.03em,
        4: 0.04em,
        5: 0.05em,
        6: 0.06em,
        7: 0.07em,
        8: 0.08em,
        9: 0.09em,
        10: 0.10em
);

$utilities: (
        "letter-spacing": (
                property: letter-spacing,
                values: (
                        map-merge($letter-spacings, negativify-map($letter-spacings))
                )
        )
);

@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

@import "~bootstrap/scss/helpers";

@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";

#piano__form__description__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 18em;
  font-size: 0.75rem;

  @include media-breakpoint-up(md) {
    font-size: 1.125rem;
    line-height: 2;
    max-height: 13em;
  }
}

#section-coming {
  background-color: $gray-850;
}