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

html{
  scroll-behavior: smooth;
}

*{
  transition: all .2s;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

@layer utilities {
  .aside-scroll-design {
    @apply [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:rounded-full
  }
  .box {
    @apply flex flex-col w-full p-8 rounded-lg h-full border-[1px] border-[#F1F1F4] dark:border-[#1E2027] shadow-[0px_3px_4px_0px_rgba(0,_0,_0,_0.03)]
  }
}


@layer components {
  .change-text::after{
    content: '';
    animation: text-change 5s linear 0s infinite;
  }
  .text-slide-in{
    position: relative;
    animation: slide-text-in .5s linear 0s forwards;
  }

  .pop-modal{
    animation: pop-modal .1s linear 0s forwards;
  }

  .pop-modal-down{
    animation: pop-modal-down .1s linear 0s forwards;
  }


  /* ANIMATIONS */
  @keyframes text-change {
    0%{content: 'Boundaries';}
    100%{content: 'Limitations';}
  }

  @keyframes slide-text-in {
    /* 0%{left: -200%;}
    100%{left: 0%;} */
    0%{transform: scale(0); opacity: 0;}
    100%{transform: scale(1); opacity: 1;}
  }

  @keyframes pop-modal {
    /* 0%{left: -200%;}
    100%{left: 0%;} */
    0%{margin-top: 20px; opacity: 0;}
    100%{margin-top: 0; opacity: 1;}
  }

  @keyframes pop-modal-down {
    /* 0%{left: -200%;}
    100%{left: 0%;} */
    0%{margin-bottom: 20px; opacity: 0;}
    100%{margin-bottom: 0; opacity: 1;}
  }
}