:root {
    --body-bg: #333;
    --font-color: #fff;
    --primary-color: #008ed6;
    --icon-font-size: 30px;
}

body {
    background: var(--body-bg) !important;
    color: var(--font-color) !important;
}


.navbar {
    border-bottom: 3px solid var(--primary-color);
    background: #292b2c;
    opacity: 0.7;
}

#home-section {
    background: url('../img/home.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
    min-height: 700px;
}

#home-section .dark-overlay {
    background: rgba(0, 0, 0, 0.7);
    min-height: 700px;
}

#home-section .fa {
    background-color: var(--font-color);
    color: var(--primary-color);
    padding: 4px;
    font-size: var(--icon-font-size);
    border-radius: 5px;
}

#home-section .bi-check {
    font-size: var(--icon-font-size);
    color: var(--primary-color);
}

/* bootstrap font */

#home-section .card {
    opacity: 0.8;
}

#home-section .home-inner {
    padding-top: 150px;
    padding-bottom: 50px;
}

#explore-main-section .fa,
#share-main-section .fa {
    font-size: var(--icon-font-size);
    color: var(--font-color);
    background: var(--body-bg);
    padding: 5px;
    border-radius: 5px;
}

#create-main-section .fa {
    background-color: var(--font-color);
    color: var(--primary-color);
    padding: 4px;
    font-size: var(--icon-font-size);
    border-radius: 5px;
}

footer .modal-content{
    background: var(--body-bg);
}