@use '@angular/material' as mat;

html,
body {
  height: 100dvh;
  margin: 0;

  font-family: var(--mat-sys-body-medium-font);
  background-color: var(--mat-sys-surface-container);

  color-scheme: light dark;
  @include mat.theme((
    color: mat.$azure-palette,
    typography: Roboto,
    density: 0));
}

.force-light-mode {
  color-scheme: light !important;
}

.force-dark-mode {
  color-scheme: dark !important;
}

h1,
h2,
h3,
h4 {
  margin: 30px 30px 10px;
  width: fit-content;
}

#logo {
  margin-top: 30px;

  h1 {
    display: inline;
  }

  button {
    float: right;
    margin-right: 10px;

    mat-icon {
      width: fit-content;
      margin: auto;
      padding: 0;
    }
  }
}