index.css

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

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 4px;
}

*::-webkit-scrollbar-track {
  background: rbga(255, 255, 255, 0.3);
  border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 14px;
}

body {
  width: 100%;
  min-height: 100vh;
  /* overflow-y: hidden; */
  background: linear-gradient(
      to bottom right,
      rgba(0, 0, 0, 0.3),
      rgba(255, 255, 255, 0)
    ),
    url("./assets/SMBG.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

@layer components {
  .bg-blur-primary {
    @apply backdrop-blur-lg bg-clip-padding backdrop-filter bg-opacity-10;
  }
  .bg-blur-secondary {
    @apply backdrop-blur-xl bg-white bg-opacity-10;
  }
  .bg-blur-dark {
    @apply bg-black bg-opacity-80 backdrop-blur-md;
  }
}