:root {
    --body-color-primary: #333;
    --body-color-secondary: #666;
    --body-color-secondary-rgb: 102, 102, 102;
    --body-font-family: 'Open Sans', sans-serif;
    --body-font-weight: 400;
    --body-bg: var(--color-white);
    --body-bg-secondary: var(--color-white);
    --heading-font-family: 'Montserrat', sans-serif;
    --heading-font-weight: 700;
    --heading-secondary-font-weight: 600;
    --heading-line-height: 1.6;
    --heading-margin-bottom: 1.5rem;
    --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --color-white: #FFF;
    --color-white-rgb: 255, 255, 255;
    --color-black: #1A1A1A;
    --color-black-rgb: 26, 26, 26;
    --color-light-gray: #F5F5F5;
    --color-light-gray-rgb: 245, 245, 245;
    --color-primary: #00A443;
    --color-primary-rgb: 0, 164, 67;
    --color-primary-dark: #007A33;
    --color-secondary: #005795;
    --color-secondary-rgb: 0, 87, 149;
    --color-secondary-dark: #003E6B;
    --btn-padding-x: 1.5rem;
    --btn-padding-y: 0.75rem;
    --transition: all 0.3s ease;
    --header-navbar-padding-y: 1rem;
    --main-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --page-hader-padding: 4rem 0;
    --border-radius: 4px;
    --card-padding: 2rem;
    --card-title-size: 1.2rem;
    --card-title-margin-bottom: .5rem;
    --card-description-size: .9rem;
    --card-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --card-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --card-hover-translate-y: -10px;
    --font-size-small: 0.875rem;
    --font-size-big: 3rem;
    --footer-padding: 4rem;
    --footer-item-margin: 1.5rem;
    --footer-links-margin: .75rem;
    --footer-item-opacity: .8;
    /*bootstrap variables*/
    --bs-body-color: var(--body-color-primary);
    --bs-secondary-rgb: var(--body-color-secondary-rgb);
    --bs-body-font-family: var(--body-font-family);
    --bs-body-font-weight: var(--body-font-weight);
    --bs-body-bg: var(--body-bg);
    --bs-secondary-bg-rgb: var(--color-light-gray-rgb);
    --bs-heading-font-family: var(--heading-font-family);
    --bs-heading-font-weight: var(--heading-font-weight);
    --bs-heading-secondary-font-weight: var(--heading-secondary-font-weight);
    --bs-box-shadow-sm: var(--box-shadow-sm);
    --bs-link-hover-color-rgb: var(--color-secondary-rgb);
    --bs-breadcrumb-font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
    line-height: var(--heading-line-height);
    margin-bottom: var(--heading-margin-bottom);
}
h1 {
    font-weight: var(--heading-font-weight);
}
h2, h3, h4, h5, h6 {
    font-weight: var(--heading-secondary-font-weight);
}

.todo-image {
    background-color: #e0e0e0;
}

.list-check {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 2rem;
}
.list-check li {
    padding-left: 1.5rem;
    margin-bottom: .5rem;
    position: relative;
}
.list-check li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-secondary);
    font-weight: bold;
}

.bg-main-gradient {
    background: var(--main-gradient);
}

.text-big {
    font-size: var(--font-size-big);
}

.form-control {
    padding: 0.75rem;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), .2);
}