utility.css

.border {
    border: 2px solid black;

}

.flex{
    display: flex;
   
}

.justify-center {
   justify-content: center;

}
.align-items {
    align-items: center;
}



.bg-black {
    background-color: black;
    color:  #b1b1b1;
}

.bg-grey{
    background-color: #121212;
}

.invert {
    filter: invert(1); 
    /* For this we can invert the svg images to white very easily */
}

.rounded{
    border-radius: 7px;
}

.m-1 {
    margin: 5px;
}

.p-1{
    padding: 10px;
}

.icons {
    
    width: 20px;  
}

/* Webkit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 12px; /* Scrollbar width */
    height: 12px; /* Scrollbar height for horizontal scrollbars */
  }
  
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #5A5A5A, #3B3B3B); /* Gradient for a cool look */
    border-radius: 10px; /* Soft edges for thumb */
    border: 2px solid #1E1E1E; /* Adds a border for a more modern look */
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7A7A7A, #525252); /* Slightly brighter on hover */
  }
  
  ::-webkit-scrollbar-track {
    background: #1E1E1E; /* Dark track to match the theme */
    border-radius: 10px; /* Soft edges for the track */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
  }
  
  /* Firefox (scrollbar-color and scrollbar-width) */
  html {
    scrollbar-width: thin; /* Makes the scrollbar thin */
    scrollbar-color: #5A5A5A #1E1E1E; /* Thumb (foreground) and track (background) colors */
  }