@import 'variables';
//@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '../node_modules/@angular/material/_theming';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);

* {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  margin:     0;
  padding:    0;
  min-height: 100%;
  height:     100%;
  font-size:  10px;
}

/**
  * Basic styles from Material Design Lite for HTML elements
  */
h1, h2, h3, h4, h5, h6, p {
  margin:  0;
  padding: 0;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  letter-spacing: -0.02em;
  font-weight:    400;
  font-size:      56px;
  font-size:      0.6em;
  font-family:    $primary-font;
  line-height:    1.35;
  opacity:        0.54;
}

h1 {
  margin-top:     24px;
  margin-bottom:  24px;
  letter-spacing: -0.02em;
  font-weight:    400;
  font-size:      56px;
  font-family:    $primary-font;
  line-height:    1.35;
}

h2 {
  margin-top:    24px;
  margin-bottom: 24px;
  font-weight:   400;
  font-size:     45px;
  font-family:   $primary-font;
  line-height:   48px;
}

h3 {
  margin-top:    24px;
  margin-bottom: 24px;
  font-weight:   400;
  font-size:     34px;
  font-family:   $primary-font;
  line-height:   40px;
}

h4 {
  margin-top:              24px;
  margin-bottom:           16px;
  font-weight:             400;
  font-size:               24px;
  font-family:             $primary-font;
  line-height:             32px;
  -moz-osx-font-smoothing: grayscale;
}

h5 {
  margin-top:     24px;
  margin-bottom:  16px;
  letter-spacing: 0.02em;
  font-weight:    500;
  font-size:      20px;
  font-family:    $primary-font;
  line-height:    1;
}

h6 {
  margin-top:     24px;
  margin-bottom:  16px;
  letter-spacing: 0.04em;
  font-weight:    400;
  font-size:      16px;
  font-family:    $primary-font;
  line-height:    24px;
}

p {
  margin-bottom:  16px;
  letter-spacing: 0;
  font-weight:    400;
  font-size:      14px;
  line-height:    24px;
}

a {
  font-weight: 500;
}

blockquote {
  position:       relative;
  letter-spacing: 0.08em;
  font-weight:    300;
  font-style:     italic;
  font-size:      24px;
  font-family:    $primary-font;
  line-height:    1.35;
}

blockquote:before {
  position: absolute;
  left:     -0.5em;
  content:  '“';
}

blockquote:after {
  margin-left: -0.05em;
  content:     '”';
}

mark {
  background-color: #f4ff81;
}

dt {
  font-weight: 700;
}

address {
  letter-spacing: 0;
  font-weight:    400;
  font-style:     normal;
  font-size:      12px;
  line-height:    1;
}

ul, ol {
  letter-spacing: 0;
  font-weight:    400;
  font-size:      14px;
  line-height:    24px;
}