:root {
    --light: #f8f9fa;
    --dark: #343a40;
    --font1: 'Play', sans-serif;
    --font2: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --scrollbar: #004a9e;
    --scrollbar-thumb: #d7e7ff;
    --pd-5: 5px;
    --pd-10: 10px;
    --pd-20: 20px;
    --pd-30: 30px;
    --pd-40: 40px;
    --pd-50: 50px;
    --pt-5: 5px;
    --pt-10: 10px;
    --pt-20: 20px;
    --pt-30: 30px;
    --pt-40: 40px;
    --pt-50: 50px;
    --pb-5: 5px;
    --pb-10: 10px;
    --pb-20: 20px;
    --pb-30: 30px;
    --pb-40: 40px;
    --pb-50: 50px;
    --ml-50: 50px;
    --mr-50: 50px;
    --bg-1: #004a9e;
    --bg-2: #ffc107;
    --bg-3: #f0f6ff;
    --bg-4: #444444;
    --color-1: #005ec9;
    --color-2: #00cbf9;
    --color-3: #343a40;
    --color-4: #444444;
    --fsize-0: 2.1rem;
    --fsize-1: 2rem;
    --fsize-2: 1.5rem;
    --fsize-3: 1rem;
}


/* scrollbar */

 ::-webkit-scrollbar-track {
    border: none;
    background-color: var(--scrollbar);
}

 ::-webkit-scrollbar {
    width: 10px;
    background-color: var(--scrollbar);
}

 ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
}

html {
    scrollbar-color: #000 #c1c1c1;
    scrollbar-width: thin
}


/*font family */

.font1 {
    font-family: var(--font1);
}

.font2 {
    font-family: var(--font2);
}


/* font size */

.fsize_0 {
    font-size: var(--fsize-0);
}

.fsize_1 {
    font-size: var(--fsize-1);
}

.fsize_2 {
    font-size: var(--fsize-2);
}

.fsize_3 {
    font-size: var(--fsize-3);
}


/*font color*/

.color_light {
    color: var(--light);
}

.color_dark {
    color: var(--dark);
}

.color_1 {
    color: var(--color-1);
}

.color_2 {
    color: var(--color-2);
}

.color_3 {
    color: var(--color-3);
}


/* padding  variable call*/

.pd_5 {
    padding: var(--pd-5);
}

.pd_10 {
    padding: var(--pd-10);
}

.pd_20 {
    padding: var(--pd-20);
}

.pd_30 {
    padding: var(--pd-30);
}

.pd_40 {
    padding: var(--pd-40);
}

.pd_50 {
    padding: var(--pd-50);
}


/* padding top variable call*/

.pt_5 {
    padding-top: var(--pt-5);
}

.pt_10 {
    padding-top: var(--pt-10);
}

.pt_20 {
    padding-top: var(--pt-20);
}

.pt_30 {
    padding-top: var(--pt-30);
}

.pt_40 {
    padding-top: var(--pt-40);
}

.pt_50 {
    padding-top: var(--pt-50);
}


/* padding bottom variable call */

.pb_5 {
    padding-bottom: var(--pb-5);
}

.pb_10 {
    padding-bottom: var(--pb-10);
}

.pb_20 {
    padding-top: var(--pb-20);
}

.pb_30 {
    padding-bottom: var(--pb-30);
}

.pb_40 {
    padding-bottom: var(--pb-40);
}

.pb_50 {
    padding-bottom: var(--pb-50);
}


/*background variable call*/

.bg_1 {
    background: var(--bg-1);
}

.bg_2 {
    background: var(--bg-2);
}

.bg_3 {
    background: var(--bg-3);
}

.bg_4 {
    background: var(--bg-4);
}