styles.scss

@use '@angular/material' as mat;
@use '@angular/cdk' as cdk;

@import 'bootstrap/scss/bootstrap-reboot';
@import 'bootstrap/scss/bootstrap-grid';
@import 'bootstrap/scss/utilities/flex';
@import 'bootstrap/scss/utilities/text';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/card';

// Material progress bar
@import '@angular/material/theming';
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$theme: mat.define-light-theme($primary, $accent);
@include mat.progress-bar-theme($theme);
@include mat.snack-bar-theme($theme);
@include cdk.overlay();

.btn {
  margin: 0.25rem;
}

// github-corner
.github-corner {
  position: fixed;
  top: 0;
  right: 0;
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}