@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@4/distr/fira_code.css);

:root {
    --StuVe-blue: #4ABBEBFF;
    --StuVe-dark-blue: #137da9;
    --StuVe-green: #A4BA2EFF;
    --StuVe-dark-green: #6b7b1d;
    --StuVe-gray: #697F85FF;

    --Color-Info: #64b5f6;
    --Color-Success: #81c784;
    --Color-Warning: #ffb74d;
    --Color-Error: #e57373;

    --color_info_bg: #e3f2fd;
    --color_info_text: #0d47a1;
    --color_danger_bg: #ffebee;
    --color_danger_text: #b71c1c;
    --color_warning_bg: #fff3e0;
    --color_warning_text: #b33f00;
    --color_sucess_bg: #e8f5e9;
    --color_sucess_text: #1b5e20;
    --container_shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

/* Set fonts */
* {
    font-family: 'Overpass', sans-serif !important;
}

code {
    font-family: 'Fira Code', monospace !important;
}

/* Change Sidebar and Edit Icon Color */
div.v-application .primary {
    background-color: var(--StuVe-green) !important;
    border-color: var(--StuVe-dark-green) !important;
}

/* Change Color of Header */
.v-application .black {
    background-color: var(--StuVe-gray) !important;
}

/* Change Color of Titles */
.is-active,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600 !important;
    color: var(--StuVe-dark-green) !important;
}

h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after {
    background: linear-gradient(90deg, var(--StuVe-dark-green), rgba(255, 255, 255, 0)) !important
}

/* Change Color of Links */
a {
    color: var(--StuVe-dark-blue) !important;
}

/* Change Color of the comment section */
.comments-header {
    background-color: var(--StuVe-green) !important;
}

/* Add note to footer*/
footer > .caption:after {
    content: " & C-Ref ❤️";
    font-family: 'Overpass', sans-serif;
}