utilities.css

@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
.border {
    border: 2px solid red;
    margin: 3px;
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

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

.bg-black {
    background-color: black;
    color: white;
}

.invert {
    filter: invert(1);
}

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

.rounded {
    border-radius: 7px;
}

.p-1 {
    padding: 10px;
}

.p-2 {
    padding-left: 8px;
}

.slogo {
    /* padding-top: 6px; */
    /* display: flex;
    margin: auto; */
    /* for aligning at center */
    
    justify-content: left;
    width: fit-content;
    height: 8vh;
}

/* Style the scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #27785e;
    /* background-color: #ffc800; */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: #222;
}

/* Track */
::-webkit-scrollbar-track {
    background: #27785e;
}

/* Handle on Firefox */
* {
    scrollbar-color: #27785e #222;
}

/* Track on Firefox */
*::-webkit-scrollbar-track {
    background: #222;
}

.slider {
    width: 100px;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 4px;
    /* margin-bottom: 15px;  */
    background-color: rgb(0, 0, 0);
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    background-color: hsl(30, 100%, 50%);
    overflow: visible;
    cursor: pointer;
}


/* .slider{
    background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
    border: solid 1px #82CFD0;
    border-radius: 8px;
    height: 7px;
    width: 356px;
    outline: none;
    transition: background 450ms ease-in;
    -webkit-appearance: none;
} */