src/assets/index.css
@import 'tailwindcss';
@plugin "daisyui" {
  themes:
    'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate',
    'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden',
    'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black',
    'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
    'night', 'coffee', 'winter', 'dim', 'nord', 'sunset', 'caramellatte',
    'abyss', 'silk', 'procyon';
}

@plugin "daisyui/theme" {
  name: 'procyon';
  color-scheme: light;

  --color-base-100: #e3e3ed;
  --color-base-200: #d1d1db;
  --color-base-300: #bfbfc9;
  --color-base-content: #2a2730;
  --color-primary: #fc055b;
  --color-primary-content: #ffffff;
  --color-secondary: #219aaf;
  --color-secondary-content: #ffffff;
  --color-accent: #e8d03a;
  --color-accent-content: #2a2730;
  --color-neutral: #2a2730;
  --color-neutral-content: #ffffff;
  --color-info: #219aaf;
  --color-info-content: #ffffff;
  --color-success: #16a34a;
  --color-success-content: #ffffff;
  --color-warning: #e8d03a;
  --color-warning-content: #2a2730;
  --color-error: #dc2626;
  --color-error-content: #ffffff;

  /* border radius */
  --radius-selector: 3rem;
  --radius-field: 3rem;
  --radius-box: 3rem;

  /* base sizes */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  /* border size */
  --border: 1px;

  /* effects */
  --depth: 1;
  --noise: 0;
}

* {
  scrollbar-width: thin;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 966px) {
  ::-webkit-scrollbar,
  .scroller {
    width: 8px;
    height: 8px;
    background-color: #f1f1f1;
  }
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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;
}

svg {
  vertical-align: unset;
}

.z-hover {
  transition: all ease-in-out 0.3s !important;
}

.z-hover:hover,
.z-hover:focus,
.z-hover:active {
  transition: transform 0.3s !important;
  -ms-transform: scale(1.01) !important;
  -webkit-transform: scale(1.01) !important;
  transform: scale(1.01) !important;
}

.pb-0-important {
  padding-bottom: 0 !important;
}

.fade-in {
  opacity: 1;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
