:root{
    --forest-green-traditional: #004b23ff;
    --dark-green-x-11: #006400ff;
    --pakistan-green: #007200ff;
    --ao-english: #008000ff;
    --yellow-green-color-wheel: #38b000ff;
    --sheen-green: #70e000ff;
    --green-lizard: #9ef01aff;
    --electric-lime: #ccff33ff;
    --cultured: #f8f9faff;
    --cultured-2: #e9ecefff;
    --gainsboro: #dee2e6ff;
    --light-gray: #ced4daff;
    --cadet-blue-crayola: #adb5bdff;
    --sonic-silver: #6c757dff;
    --davys-grey: #495057ff;
    --onyx: #343a40ff;
    --eerie-black: #212529ff;
}

@font-face {
    font-family: ubuntu;
    src: url( './../fonts/Ubuntu-Light.ttf' );
}

@font-face {
    font-family: plento;
    src: url( './../fonts/PLENTO.ttf' );
}

::-webkit-scrollbar{
    width: 6px;
    height: 6px;
}
  
::-webkit-scrollbar-track {
    background: #EEEEEE;
}
  
::-webkit-scrollbar-thumb {
    background-color: var( --forest-green-traditional );
    opacity: 0.65;
    transition-duration: 0.1s;
    border-radius: 6px;
}
  
::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}

*{
    font-family: ubuntu;
    position: relative;
    scroll-behavior: smooth;
}

html, body{
    display: flex;
    width: 100%;
}

body{
    margin: 0px;
    padding: 0px;
}

.d-flex{
    display: flex;
    display: flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.d-none{
    display: none;
}

.w-100{
    width: 100%;
}

.h-100{
    height: 100%;
}

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

.justify-content-start{
    justify-content: flex-start;
}

.justify-content-end{
    justify-content: flex-end;
}

.justify-content-between{
    justify-content: space-between;
}

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

.align-items-start{
    align-items: flex-start;
}

.align-items-end{
    align-items: flex-end;
}

.flex-column{
    flex-direction: column;
}

.flex-column-reverse{
    flex-direction: column-reverse;
}

.flex-row{
    flex-direction: row;
}

.text-gradient{
    background-image: -webkit-linear-gradient( 120deg, var( --eerie-black ), var( --cultured ) ), 
        linear-gradient( 120deg, var( --eerie-black ), var( --cultured ) );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-break{
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}