@font-face {
    font-family: 'Gilroy-Bold';
    src: url('../fonts/GILROY-BOLD.ttf');
    font-display: swap;
    ascent-override: 100%;
}

@font-face {
    font-family: 'Gilroy-Medium';
    src: url('../fonts/GILROY-MEDIUM.ttf');
    font-display: swap;
    ascent-override: 100%;
}

@font-face {
    font-family: 'Gilroy-SemiBold';
    src: url('../fonts/GILROY-SEMIBOLD.ttf');
    font-display: swap;
    ascent-override: 100%;
}

body {
    overflow: hidden;
    user-select: none;
    color: #fff;
}

.slide-enter-active,
.slide-leave-active {
  transition: all .5s;
}

.slide-leave-active {
  transform: translateX(26.0417vw);
}

.slide-enter {
  scale: 0.8;
  transform: translateX(13.0208vw);
  transition: all .5s;
}

.slide-enter-to {
  scale: 1.02;
  transform: translateX(0px);
}

.context-item {
    transition: all 0.3s;
}

.context-item:hover {
    cursor: pointer;
    background: #8485E7;
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.26);
    transition: all 0.3s;
}

::-webkit-scrollbar{
    width: 0px;
    background-color: #002aff00;
}
  
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


.fade-enter-active {
  opacity: 0; 
  animation: slideIn 0.8s ease forwards;
}

.fade-leave-active {
  animation: slideOut 0.8s ease forwards;
}

@keyframes slideIn {
  0% {
      opacity: 0; 
      transform: translateY(-100%);
  }
  100% {
      opacity: 1; 
      transform: translateY(0);
  }
}

@keyframes slideOut {
  0% {
      opacity: 1; 
      transform: translateY(0);
  }
  100% {
      opacity: 0;
      transform: translateY(-100%);
  }
}