// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// 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/
$Angular10JwtAuth-primary: mat-palette($mat-indigo);
$Angular10JwtAuth-accent: mat-palette($mat-pink, A200, A100, A400);

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

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

/* You can add global styles to this file, and also import other style files */
//@import 'node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css';
//@import 'node_modules/primeicons/primeicons.css';
////@import ''/              "node_modules/primeng/resources/themes/saga-blue/theme.css",
//@import 'node_modules/primeng/resources/primeng.min.css';

html, body { height: 100%; }
//@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@font-face {
  font-family: Roboto;
  src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
}

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

.btn {
  margin: 0.5em;
  border-radius: 10px;
}
.title {
  text-align: center;
  position: absolute;
  top:25%;
  left: 10%;
  color:white;
  font-size: 2rem;
  z-index: 3;
  font-family: 'Roboto', sans-serif;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  font-weight: bold;
  border: 2px solid #f1f1f1;
  width: 80%;
  padding: 1em;
  border-radius: 25px;
}
@media (max-width: 760px) {
  .title{
    font-size: 1rem;
    top:28%;
  }
}