html,body{
  min-height: 100%;
  width: 100%;
  margin: 0;
  font-family: inter, sans-serif, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  scroll-behavior: smooth;
  box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distributes the elements: navbar, main, and footer */
  min-height: 100vh; /* Full viewport height */
}

.nav-link:hover {
  background-color: #f8f9fa0d;
  color: #ffc107; 
}

.nav-item a:hover{
  color: #ffc107 !important; 
}

.card img {
  width: 100%; /* Ensures the image fills the width of the container */
  aspect-ratio: 16/9; /* Adjust this ratio as needed */
  object-fit: cover;
}

/* remove scrollbar from browser*/
::-webkit-scrollbar {
  display: none;
}


nav > #navbarNav > ul > li > a {
  display: flex;
  justify-content: center;
}

/* Logo Slider */

.tag-list{
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li img{
  width: 80px;
  height: 80px;
  padding: 1rem;
  border-radius: 0.5rem;
}

.scroller {
  max-width: 100%;
  overflow: hidden;

  -webkit-mask: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);

  mask: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

.scroller__inner{
  width: max-content;
  display: flex;
  gap: 2rem;
  flex-wrap: nowrap;

  animation: 
    scroll 
    var(--_animation-duration, 30s) 
    var(--_animation-direction, forwards)
    linear 
    infinite;
}

.scroller:hover .scroller__inner{
  animation-play-state:paused;
}

.scroller[data-direction="right"]{
  --_animation-direction: reverse;
}

@keyframes scroll{
  to {
    transform: translate(calc(-50% - 1rem));
  }
}

/* End of Slider */


/* Typewriter */
.typewriter-container {
  display: inline-block;
  min-height: 40px; /* Prevent UI shifts */
  white-space: nowrap;
  font-family: monospace, sans-serif;
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

.cursor {
  display: inline-block;
  font-size: inherit;
  animation: blink 1.3s infinite;
  padding-left: 0;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* End of Typewriter */

#particles-js {
position: absolute;
z-index: -1; /* Ensure particles are behind other content */
height: 100%; /* Full viewport height */
width: 100%; /* Full viewport width */
}
.content-container {
  position: relative;
  min-height: 95vh; /* Minimum full viewport height */
}