:root{
    --margin-spacing: calc(0.5rem + 0.5vw);
    --padding-spacing: calc(0.5rem + 0.5vw);
}
html{
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
    scroll-margin-block: 3rem;
    --p-line-height: calc(1.6rem + 0.15vw);
    --p-font-size: calc(1rem + 0.2vw);

    --background-bg: #fff;
    --nav-transition: transform 0.5s ease, width 0.5s ease;
    --nav-panel-size: 300px;
    --p-color: #4d4d4dff;
    --header-bg: #efefef;
    --menu-bar-color: black;
    --toggle-border: 1px solid #000;
    --note-header-bg: #b6c4e3ff;
    --note-header-color: #00004dff;
    --note-content-bg: #ebecee;
    --note-content-color: #37389aff;

    --wrap-up-note-header-color: #6b2522;
    --wrap-up-note-header-bg: #dfc3b3;
    --wrap-up-note-content-bg: #e9dccf;
    
    --dash-input-color: #0b0b0b;

    --wrap-up-bg: #ebe5dc;

    --wrap-up-footer-bg: #e9dccf;

    --btn-color: black;
    --btn-border-color: #000000;
    --btn-bg: white;

    --nav-li-bg: #f1f1f1;
    --nav-list-bg: white;
    --nav-a-color: black;
    --nav-borders-color: white;

    --submit-btn-shadow-color: #ce6d57;
    --submit-btn-bg: transparent;

    --radio-active-color: black;
    --active-bg-color: #e6e6e6;
    --active-border-color: rgb(128, 128, 208);
    --code-bg: rgb(241, 241, 241);
    --code-color: green;
    --code-color: rgb(255, 58, 58);
    --console-bg: rgb(230, 230, 230);
    --console-title-bg: #ccc;
    background-color: var(--background-bg);
    font-family: lato;
    overflow-x: hidden;
}
.dark{
    --background-bg: #232323;
    --p-color: #c5c5c5;
    --header-bg: #1a1a1a;
    --menu-bar-color: white;
    --toggle-border: 1px solid #fff;

    --nav-li-bg: #1e1e1e;
    --nav-list-bg: rgb(41, 41, 41);
    --nav-a-color: #e3e3e3;
    --nav-borders-color: rgb(30, 30, 30);

    --dash-input-color: #f2f2f2;

    --wrap-up-bg: #1f1d18;

    --wrap-up-footer-bg: #302d26;

    --btn-color: #ffffff;
    --btn-border-color: #ffffff;
    --btn-bg: transparent;
    
    --submit-btn-shadow-color: #723426;
    --submit-btn-bg: #f1dacf;

    --radio-active-color: white;
    /* --active-bg-color: var(--nav-li-bg); */
    --active-bg-color: hsl(0, 0%, 10%);
    --active-border-color: #000000;
    
    --note-header-bg: #1d1d1f;
    --note-header-color: #eaeaea;
    --note-content-bg: #2b2c2f;
    --note-content-color: #ebecee;
    --wrap-up-note-header-color: #d4d4d4;
    --wrap-up-note-header-bg: #392f29;

    --wrap-up-note-content-bg: #43403d;

    --code-bg: rgb(36, 36, 36);
    --code-color: green;
    --code-color: rgb(255, 58, 58);
    --console-bg: rgb(35, 35, 35);
    --console-title-bg: #333;

    
    color: white;
}
a.inline{
    display: inline;
}

/*Padding begin*/
.pt-0{
    padding-top: 0 !important;
}
.pt-1{
    padding-top: calc(var(--padding-spacing) * 1) !important;
}
.pt-2{
    padding-top: calc(var(--padding-spacing) * 2) !important;
}
.pt-3{
    padding-top: calc(var(--padding-spacing) * 3) !important;
}
.pt-4{
    padding-top: calc(var(--padding-spacing) * 4) !important;
}
.pt-5{
    padding-top: calc(var(--padding-spacing) * 5) !important;
}
.pt-6{
    padding-top: calc(var(--padding-spacing) * 6) !important;
}

.pb-0{
    padding-bottom: 0 !important;
}
.pb-1{
    padding-bottom: calc(var(--padding-spacing) * 1) !important;
}
.pb-2{
    padding-bottom: calc(var(--padding-spacing) * 2) !important;
}
.pb-3{
    padding-bottom: calc(var(--padding-spacing) * 3) !important;
}
.pb-4{
    padding-bottom: calc(var(--padding-spacing) * 4) !important;
}
.pb-5{
    padding-bottom: calc(var(--padding-spacing) * 5) !important;
}
.pb-6{
    padding-bottom: calc(var(--padding-spacing) * 6) !important;
}

.pl-0{
    padding-left: 0 !important;
}
.pl-1{
    padding-left: calc(var(--padding-spacing) * 1) !important;
}
.pl-2{
    padding-left: calc(var(--padding-spacing) * 2) !important;
}
.pl-3{
    padding-left: calc(var(--padding-spacing) * 3) !important;
}
.pl-4{
    padding-left: calc(var(--padding-spacing) * 4) !important;
}
.pl-5{
    padding-left: calc(var(--padding-spacing) * 5) !important;
}
.pl-6{
    padding-left: calc(var(--padding-spacing) * 6) !important;
}

.pr-0{
    padding-right: 0 !important;
}
.pr-1{
    padding-right: calc(var(--padding-spacing) * 1) !important;
}
.pr-2{
    padding-right: calc(var(--padding-spacing) * 2) !important;
}
.pr-3{
    padding-right: calc(var(--padding-spacing) * 3) !important;
}
.pr-4{
    padding-right: calc(var(--padding-spacing) * 4) !important;
}
.pr-5{
    padding-right: calc(var(--padding-spacing) * 5) !important;
}
.pr-6{
    padding-right: calc(var(--padding-spacing) * 6) !important;
}

.p-block-0{
    padding-block: 0 !important;
}
.p-block-1{
    padding-block: calc(var(--padding-spacing) * 1) !important;
}
.p-block-2{
    padding-block: calc(var(--padding-spacing) * 2) !important;
}
.p-block-3{
    padding-block: calc(var(--padding-spacing) * 3) !important;
}
.p-block-4{
    padding-block: calc(var(--padding-spacing) * 4) !important;
}
.p-block-5{
    padding-block: calc(var(--padding-spacing) * 5) !important;
}
.p-block-6{
    padding-block: calc(var(--padding-spacing) * 6) !important;
}

.p-inline-0{
    padding-inline: 0 !important;
}
.p-inline-1{
    padding-inline: calc(var(--padding-spacing) * 1) !important;
}
.p-inline-2{
    padding-inline: calc(var(--padding-spacing) * 2) !important;
}
.p-inline-3{
    padding-inline: calc(var(--padding-spacing) * 3) !important;
}
.p-inline-4{
    padding-inline: calc(var(--padding-spacing) * 4) !important;
}
.p-inline-5{
    padding-inline: calc(var(--padding-spacing) * 5) !important;
}
.p-inline-6{
    padding-inline: calc(var(--padding-spacing) * 6) !important;
}
/*Padding End*/


/*Margin begin*/
.mt-0{
    margin-top: 0 !important;
}
.mt-1{
    margin-top: calc(var(--margin-spacing) * 1) !important;
}
.mt-2{
    margin-top: calc(var(--margin-spacing) * 2) !important;
}
.mt-3{
    margin-top: calc(var(--margin-spacing) * 3) !important;
}
.mt-4{
    margin-top: calc(var(--margin-spacing) * 4) !important;
}
.mt-5{
    margin-top: calc(var(--margin-spacing) * 5) !important;
}
.mt-6{
    margin-top: calc(var(--margin-spacing) * 6) !important;
}

.mb-0{
    margin-bottom: 0 !important;
}
.mb-1{
    margin-bottom: calc(var(--margin-spacing) * 1) !important;
}
.mb-2{
    margin-bottom: calc(var(--margin-spacing) * 2) !important;
}
.mb-3{
    margin-bottom: calc(var(--margin-spacing) * 3) !important;
}
.mb-4{
    margin-bottom: calc(var(--margin-spacing) * 4) !important;
}
.mb-5{
    margin-bottom: calc(var(--margin-spacing) * 5) !important;
}
.mb-6{
    margin-bottom: calc(var(--margin-spacing) * 6) !important;
}

.ml-0{
    margin-left: 0 !important;
}
.ml-1{
    margin-left: calc(var(--margin-spacing) * 1) !important;
}
.ml-2{
    margin-left: calc(var(--margin-spacing) * 2) !important;
}
.ml-3{
    margin-left: calc(var(--margin-spacing) * 3) !important;
}
.ml-4{
    margin-left: calc(var(--margin-spacing) * 4) !important;
}
.ml-5{
    margin-left: calc(var(--margin-spacing) * 5) !important;
}
.ml-6{
    margin-left: calc(var(--margin-spacing) * 6) !important;
}

.mr-0{
    margin-right: 0 !important;
}
.mr-1{
    margin-right: calc(var(--margin-spacing) * 1) !important;
}
.mr-2{
    margin-right: calc(var(--margin-spacing) * 2) !important;
}
.mr-3{
    margin-right: calc(var(--margin-spacing) * 3) !important;
}
.mr-4{
    margin-right: calc(var(--margin-spacing) * 4) !important;
}
.mr-5{
    margin-right: calc(var(--margin-spacing) * 5) !important;
}
.mr-6{
    margin-right: calc(var(--margin-spacing) * 6) !important;
}

.m-block-0{
    margin-block: 0 !important;
}
.m-block-1{
    margin-block: calc(var(--margin-spacing) * 1) !important;
}
.m-block-2{
    margin-block: calc(var(--margin-spacing) * 2) !important;
}
.m-block-3{
    margin-block: calc(var(--margin-spacing) * 3) !important;
}
.m-block-4{
    margin-block: calc(var(--margin-spacing) * 4) !important;
}
.m-block-5{
    margin-block: calc(var(--margin-spacing) * 5) !important;
}
.m-block-6{
    margin-block: calc(var(--margin-spacing) * 6) !important;
}

.m-inline-0{
    margin-inline: 0 !important;
}
.m-inline-1{
    margin-inline: calc(var(--margin-spacing) * 1) !important;
}
.m-inline-2{
    margin-inline: calc(var(--margin-spacing) * 2) !important;
}
.m-inline-3{
    margin-inline: calc(var(--margin-spacing) * 3) !important;
}
.m-inline-4{
    margin-inline: calc(var(--margin-spacing) * 4) !important;
}
.m-inline-5{
    margin-inline: calc(var(--margin-spacing) * 5) !important;
}
.m-inline-6{
    margin-inline: calc(var(--margin-spacing) * 6) !important;
}

/*End of margin*/



.hide-element{
    display: none;
}
.dis-block{
    display: block;
}
.dis-inline{
    display: inline;
}