Facti13.Frontend.Angular/src/styles.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@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. Available color palettes: https://material.io/design/color/
$f13_ang_web-primary: mat.define-palette(mat.$red-palette);
$f13_ang_web-accent: mat.define-palette(mat.$red-palette, A200, A100, A400);

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

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$f13_ang_web-theme: mat.define-light-theme((
  color: (
    primary: $f13_ang_web-primary,
    accent: $f13_ang_web-accent,
    warn: $f13_ang_web-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 mat.all-component-themes($f13_ang_web-theme);

/* You can add global styles to this file, and also import other style files */

@font-face {
  font-family: Lato;
  src: url('assets/fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
  font-family: LatoBlack;
  src: url('assets/fonts/Lato-Black.ttf') format('truetype');
}

@font-face {
  font-family: LatoThin;
  src: url('assets/fonts/Lato-Thin.ttf') format('truetype');
}


html, body { height: 100%; }
body { margin: 0; font-family: Lato, Roboto, "Helvetica Neue", sans-serif; }

h1,h2,h3,h4,h5,h6 {
  font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif;
  color: #fbf1d7;
}

span {
  font-family: LatoThin, Roboto, "Helvetica Neue", sans-serif;
}

.lato {
  font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif;
}

.mat-card-subtitle {
  font-family: LatoThin, Roboto, "Helvetica Neue", sans-serif;
}

.spacer {
  flex: 1 1 auto;
}

.f13_color_primary {
  color: #ef7f41;
}

.f13_color_secondary {
  color: #d6473c;
}

.f13_color_extra {
  color: #5e7edf;
}

//размеры говна начало

.content-in-center {
  width: 66%; margin: 0 auto
}

.content-in-center-header {
  display: flex;
  width: 66%;
  padding-left: calc((100% - 66%)/2);
  padding-right: calc((100% - 66%)/2);
  margin: 0 auto;
  background: linear-gradient(to top, #f2a998, #e65e11);
}

@media only screen and (max-width: 600px) {
  $screen-width: 95%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }
}

@media only screen and (min-width: 600px) {
  $screen-width: 90%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }
}

@media only screen and (min-width: 768px) {
  $screen-width: 80%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }
}

@media only screen and (min-width: 992px) {
  $screen-width: 70%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }
}

@media only screen and (min-width: 1200px) {
  $screen-width: 66%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }
}

//размеры говна конец

.content-in-border {
  border-radius: 15px;
  background-color: #f5f5f5;
  padding: 15px;
  margin-top: 15px
}