@tailwind components;
@tailwind base;
@tailwind utilities;

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

@font-face {
  font-family: 'Source Sans';
  src: url('./assets/fonts/SourceSans3-VariableFont_wght.ttf')
    format('truetype');
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: 'Source Sans';
  src: url('./assets/fonts/SourceSans3-Italic-VariableFont_wght.ttf')
    format('truetype');
  font-style: italic;
  font-weight: 100 900;
}

.mobile-full-height {
  @apply: h-full max-w-full;
}

@supports (height: 100cqh) {
  .mobile-full-height {
    height: 100cqh;
  }
}

@supports (height: 100svh) {
  .mobile-full-height {
    height: 100svh;
  }
}

@supports not ((height: 100svh) and (height: 100cqh)) {
  .mobile-full-height {
    @apply h-screen max-h-screen min-h-screen;
  }
}

/* body {
  -webkit-app-region: drag;
} */

button,
a {
  -webkit-app-region: no-drag;
}

.pb-safe {
  padding-bottom: max(
    calc(env(safe-area-inset-bottom, 1.5rem) - 0.75rem),
    0.5rem
  );
}

html {
  overscroll-behavior-y: none;
}

.background-animate {
  background-size: 400%;

  -webkit-animation: AnimationName 7s ease infinite;
  -moz-animation: AnimationName 7s ease infinite;
  animation: AnimationName 7s ease infinite;
}

@keyframes AnimationName {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
