// Common styles of the project

$breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px);
@import "node_modules/include-media/dist/include-media"; // https://github.com/eduardoboucas/include-media
@import "node_modules/include-media-spread/dist/spread"; // https://github.com/jackmcpickle/include-media-spread

@include media(">=md") {

}

.some-class-for-heading {
  @include spread(font-size, 1rem, 3rem);
}

:root {
  --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans-serif);
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  display: flex;
  flex-direction: column;
  text-align: left;
  @include font-size($font-size-base);
  color: $body-color;
  background-color: $body-bg;
}

.main {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

.list-unstyled {
  @include list-unstyled();
}

