:root {
    --main-color: #02aed6;
    --footer-color: #262626;
    --bs-content-border-color: #eee;
    --bs-blue: var(--main-color);
    --bs-blue-hover-bg: #04cef6;
    --bs-body-font-size: 1rem;
}

body {
    background-color: #f0f0f0;
}

.container {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.bar {
    background-color: var(--main-color);
    color: #fff;
    font-size: 1rem;
}

.bar a {
    color: #fff;
    text-decoration: none;
}

h4 {
    font-weight: 300;
    color: var(--main-color);
}

.sidebar-heading,
.card-body h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 0.5rem;
}

footer h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

footer {
    background-color: var(--footer-color);
    color: #fff;
    font-size: 0.85rem;
}

footer a {
    color: #fff;
    text-decoration: none;
}

footer .card,
footer .card-body {
    background-color: var(--footer-color);
    color: #fff;
}

.end {
    background-color: #000;
    color: #fff;
}

.sidebar-nav {
    font-size: 1rem;
}

.white {
    background-color: var(--bs-action-active-bg);
    color: #000;
}

.article-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.article-date {
    font-weight: bold;
    color: var(--main-color);
}

a.blue {
    color: var(--main-color);
    text-decoration: none;
}