style.css

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
h4{
    color: #008cff !important;
}

#likeCounter{
    cursor: default;
}

#animatedTitle{
    font-size: 36px;

}
.jumbotron {
   
    -webkit-columns: 100px 1;
    -moz-columns: 100px 1;


    columns: 100px 1;
    column-gap: 0;
    column-rule: 1px solid #1a242f;

    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    
    -webkit-column-rule: 1px solid #1a242f;
    -moz-column-rule: 1px solid #1a242f;
    
  }
  


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    
}

body{
    background-color:  #1f2022 !important;
    color: #007bff !important;
    overflow-x: hidden;

        
     
};
.darker{
    background:  #0f0f0f !important;
    
    z-index:9999;
}

#liked,.btn-outline-light{
    fill: #191a1b !important;
    transform: scale(1);
    transition: all 1s ease-out;
}
#liked:hover{
    fill: var(--red) !important;
    transform: scale(1.1);
    transition: all 0.3s ease-out;
}
#liked:active{
    
    stroke: var(--red);
    transform: scale(1.3);
    transition: all 0.05s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.col-1{

    margin: 0px !important;
    padding: 0px !important;
}
.col-2{
   
    margin: 0px !important;
    padding: 0px !important;
}
li{
    border-bottom: rgba(10, 10, 10, 0.418) 1px solid;
    list-style: none !important;
    color: #f8f9fab9;
    background-color: #191a1b;
    width: auto;
    height: auto;
    


    margin-right: 0px !important;
    margin-left: 0px !important;
    
}

.card {
    border-bottom: rgba(10, 10, 10, 0.418) 1px solid !important;
    background-color: #191a1b !important;
    color: #f8f9fab9 !important;
}
.card-body{
    border-bottom: rgba(10, 10, 10, 0.6) 1px solid !important;
    background-color: #191a1b !important;
    color: #f8f9fab9 !important;
}
.btn-link{

    color: #f8f9fab9 !important;
};

li:hover{
    border-bottom: rgba(10, 10, 10, 0.418) 1px solid;
    list-style: none !important;
    color: #f8f9face;
    background-color: #151516;
    width: auto;
    height: auto; 
}
.hideIt{
    display: none;
}
.showIt{
    display: block;
}

.btn-outline-light{
    background-color: #007bff41 !important;
    border-radius: 0px !important;
    border: none !important;
    outline: none !important;
}

   ::-webkit-scrollbar{
        height: 4px;
        width: 4px;
        background: gray;
    }
    ::-webkit-scrollbar-thumb:horizontal{
        background: #000;
        border-radius: 10px;
    }
    ::-webkit-scrollbar {
        height: 8px;
        overflow: invisible;
        width: 8px;
    }


.out-line-primary{
    border-top: #007bff 2px solid ;
}
footer{
    
    columns: 1fr 5;
    column-gap: 0;
    column-rule: 1px solid #1a242f;
    margin: 10px !important;
    padding: 0px !important;
    position: absolute;
    width: 100%;
    left: 0; 
}

.fa{
    color: #ffffff;
    transform: scale(2);
    padding: 10px;
    margin-bottom: 100px;
    bottom: 0;
}


.container {
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}
.checkbox {
    width: 100%;
    margin: 15px auto;
    position: relative;
    display: block;
}

.checkbox input[type="checkbox"] {
    width: auto;
    opacity: 0.00000001;
    position: absolute;
    left: 0;
    margin-left: -20px;
}
.checkbox label {
    position: relative;
}
.checkbox label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid #7bbe72;
}
.checkbox label:after {
  content: '';
    display: block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #7bbe72;
    border-left: 2px solid #7bbe72;
    -webkit-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    transition: transform ease 0.25s;
    will-change: transform;
    position: absolute;
    top: 12px;
    left: 10px;
}
.checkbox input[type="checkbox"]:checked ~ label::before {
    color: #7bbe72;
}

.checkbox input[type="checkbox"]:checked ~ label::after {
    -webkit-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

.checkbox label {
    min-height: 34px;
    display: block;
    padding-left: 40px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    
}
.checkbox label span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.checkbox input[type="checkbox"]:focus + label::before {
    outline: 0;
}

#gotoTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #1f2022; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    
    font-size: 18px; /* Increase font size */
  }
  
  #gotoTop:hover {
    background-color:  #191a1b; /* Add a dark-grey background on hover */
  }

  #gotoBottom {

    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    top: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #1f2022; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    
    font-size: 18px; /* Increase font size */
  }
  
  #gotoTop:hover {
    background-color:  #191a1b; /* Add a dark-grey background on hover */
  }

  




/* .card-tint{
    background-color:  #151516 !important;

} */
.text-small{
    font-size: 15px !important;
}
.bar-container{
    box-sizing: border-box;
    flex-wrap: wrap;
}

.container {
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px; 
    column-gap: 10px;
    row-gap: 15px;
  }
.badge{
    font-size: larger;
}
.card-tint{
    color:var(--blue);
    transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
.card-tint:hover{
    cursor: pointer;
    transform: scale(1.1);
    transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    color:#3910f2;
}

p{

    left: 0;  
    transition: all 1s ease-out !important;
}
p:hover{
    left: 10px;  
    transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335) !important;
}
#bar-companies{
    text-align: center !important;
}



.display-6{
    
    font-size: 22px;
    -webkit-columns: 4 150px;
    -moz-columns: 4 150px;
    columns: 4 150px;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;
}


.bg-darker{
    background-color: #1f2022;

}