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

@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp:wght@400&display=swap');

@font-face {
  font-family: 'base';
  src: url('../fonts/Montserrat-VariableFont_wght.ttf');
  font-weight: 1 999;
}

@layer utilities {
  .font-thin {
    font-variation-settings: 'wght' 100;
  }
  .font-extralight {
    font-variation-settings: 'wght' 200;
  }
  .font-light {
    font-variation-settings: 'wght' 300;
  }
  .font-normal {
    font-variation-settings: 'wght' 400;
  }
  .font-medium {
    font-variation-settings: 'wght' 500;
  }
  .font-semibold {
    font-variation-settings: 'wght' 600;
  }
  .font-bold {
    font-variation-settings: 'wght' 700;
  }
  .font-extrabold {
    font-variation-settings: 'wght' 800;
  }
  .font-black {
    font-variation-settings: 'wght' 900;
  }
}

html,
body {
  width: 100%;
  height: 100%;
}

@keyframes miniFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.miniFadeInLeft {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0, 1);
  animation-name: miniFadeInLeft;
}

@keyframes miniFadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
  }
}

.miniFadeOutLeft {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-name: miniFadeOutLeft;
}

@keyframes miniFadeInRight {
  from {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.miniFadeInRight {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0, 1);
  animation-name: miniFadeInRight;
}

@keyframes miniFadeOutRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
  }
}

.miniFadeOutRight {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-name: miniFadeOutRight;
}

@keyframes miniFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.miniFadeInDown {
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-delay: 0.6s;
  animation-fill-mode: both;

  animation-name: miniFadeInDown;
}

@keyframes miniFadeOutUp {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
}

.miniFadeOutUp {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-name: miniFadeOutUp;
}

@keyframes miniFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.miniFadeInUp {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-name: miniFadeInUp;
}

@keyframes miniFadeOutDown {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
}

.miniFadeOutDown {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-name: miniFadeOutDown;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.default-transition {
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.quick-transition {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.h-\[50px\] {
  height: 50px!important;
}