input.css

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

@layer base {
  html {
    font-family: 'Montserrat', sans-serif;
  }
}

@layer components {
  .btn-git {
    @apply mt-4 inline-block px-6 py-2.5 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-500 bg-blue-700 hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out;
  }

  .project-section {
    @apply flex flex-col md:flex-row justify-center items-center mx-4 md:mx-20 md:mt-16 mt-8 md:border-b-0 md:pb-0 dark:border-zinc-800 border-gray-300 pb-8 border-b-2;
  }

  .img-div {
    @apply rounded-xl shadow-md drop-shadow-md md:w-480 sm:h-64 w-full max-w-480 mx-8 h-52;
  }

  .text-div {
    @apply md:ml-8 mt-8 md:mt-0 md:w-1/3 md:mx-0 max-w-480 w-full;
  }
}

canvas {
  display: block;
}

video {
  object-position: center;
  object-fit: fill;
  width: 100%;
  height: 100%;
}

#particles-js {
  width: 100%;
  height: 100vh;
  min-height: 300px;
  position: relative;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

#particles-js-2 {
  background: #3b82f6;
  height: 150px;
  width: 100%;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.underline-effect {
  position: relative;
  white-space: nowrap;
}

.underline-effect:after {
  --deco-height: 0.3125em;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--deco-height) * -0.625);
  height: var(--deco-height);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%2300FDCF' stroke-width='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: auto 100%;
  background-repeat: round;
  background-position: 0em;
  filter: brightness(0) saturate(100%) invert(43%) sepia(96%) saturate(2210%) hue-rotate(202deg) brightness(97%) contrast(99%);
}

.particles-js-text {
  text-align: center;
  display: block;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.scrolled {
  background: rgb(243, 244, 246);
}

.dark .scrolled {
  background: rgb(24, 24, 27);
}

#nav {
  transition: 0.5s background;
}

.dark .svg-white {
  filter: invert(98%) sepia(0%) saturate(1%) hue-rotate(103deg) brightness(108%) contrast(101%) !important;
}

/* ===== Scrollbar CSS ===== */
* {
  scrollbar-width: auto;
  scrollbar-color: #3b82f6 rgb(244, 246, 243);
}

*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: rgb(243, 244, 246);
}

*::-webkit-scrollbar-thumb {
  background-color: #3b82f6;
  border-radius: 10px;
  border: 3px solid #3b82f6;
}

*.dark {
  scrollbar-width: auto;
  scrollbar-color: #3b82f6 #18181b;
}

.dark *::-webkit-scrollbar-track {
  background: #18181b;
}

.animate-wave {
  animation: wave 1s linear infinite alternate;
}

@keyframes wave {
  0% {
    transform: rotate(-5deg);
  }

  to {
    transform: rotate(5deg);
  }
}

.img-div,
#skills img {
  overflow: hidden;
  transition: 0.5s all ease-in-out;
}

.img-div img {
  transition: 0.5s all ease-in-out;
}

.img-div:hover,
#skills img:hover {
  transform: scale(1.2);
  border-radius: 3px;
}

.img-div img:hover {
  border-radius: 3px;
}

.scrollview {
  transform: translateY(50px) rotate(-5deg) translateZ(0);
  transition-delay: .3s;
  transition: .4s;
  opacity: 0;
}

.inView {
  opacity: 1;
  transform: translateY(0px) rotate(0deg) translateZ(0);
}

@media only screen and (max-width: 825px) {
  .scrollview {
    transform: translateY(50px) rotate(0deg) translateZ(0);
  }

  .inView {
    transform: translateY(0px) rotate(0deg) translateZ(0);
  }
}