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

@import '@angular/cdk/overlay-prebuilt.css';

@font-face {
  font-weight: 400;
  font-style: normal;
  font-family: Barlow;
  src: url('./assets/fonts/Barlow-Regular.ttf') format('truetype');
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  --color-primary: #9bf;
  --color-secondary: #e2f1ff;
  --color-secondary-rgb: 226, 241, 255;
  --color-text-main: #21242b;
  --color-text-secondary: #a5abbd;
  --color-indication-success: #2dc193;
  --color-indication-error: #fea0b3;
  --color-indication-error-dark: #c36b7e;
  --color-always-white: white;
  --color-background-secondary: #a5abbd;
}

body {
  background-color: var(--color-primary);
  color: var(--color-text-main);
  font-weight: 400;
  font-style: normal;
  font-family: Barlow, sans-serif;
  font-synthesis: style;
}

.shimmer {
  position: relative;
  display: inline-block;
  border-radius: 8px;
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-size: 1000px 1000px;
  background-repeat: no-repeat;
  animation-name: shimmer-animation;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes shimmer-animation {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}
