@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

.dropdown:hover .dropdown-menu {
    display: block;
}
div::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
div::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px white;
}

div::-webkit-scrollbar-thumb {
    @apply bg-gray-300 outline-none
}
div {
    scrollbar-width: thin;
}
body, html{
    @apply scrolling-touch;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
body::-webkit-scrollbar {
    width: 8px;
}
body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px white;
}

body::-webkit-scrollbar-thumb {
    @apply bg-gray-300 
}

.sidebar {
    height: 100vh;
    top: 0;
    @apply hidden flex-col w-full pt-20 sticky overflow-y-hidden;
}

.slider {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.heading {
    @apply uppercase text-xl font-bold;
}

.sidebar:hover {
    overflow-y: auto;
}

.vertical{
    @apply flex-col;
}

@screen md {
    .horizontal {
        @apply flex-row;
    }
}

.active {
    @apply text-blue-500
}

.main-content {
    @apply flex flex-col pt-16;
}

a:hover{
    @apply opacity-75
}

.fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 0.45s;
    animation-fill-mode: both;
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }