:root {
    /* --color-primary: linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); */
    
    /* --color-primary:
    linear-gradient(150deg, transparent 0%, transparent 35%, rgba(41, 137, 216, 0.4) 35%, rgba(41, 137, 216, 0.4) 65%, transparent 65%),
    linear-gradient(170deg, rgba(30, 87, 153, 0.6) 20%, rgba(125, 185, 232, 0.3) 80%),
    linear-gradient(to bottom, #1e5799, #2989d8); */

    --color-primary:
    linear-gradient(155deg, transparent 0%, transparent 30%, rgba(30, 87, 153, 0.3) 30%, rgba(30, 87, 153, 0.3) 50%),
    linear-gradient(165deg, transparent 0%, transparent 40%, rgba(41, 137, 216, 0.5) 40%, rgba(41, 137, 216, 0.5) 60%),
    linear-gradient(175deg, #2989d8 50%, #1e5799 100%);

    --color-bg-body: #eaf5ff;

    --color-bg-footer: 
    linear-gradient(150deg, transparent 0%, transparent 35%, rgba(52, 58, 64, 0.4) 35%, rgba(52, 58, 64, 0.4) 65%, transparent 65%),
    linear-gradient(170deg, rgba(33, 37, 41, 0.6) 20%, rgba(73, 80, 87, 0.3) 80%),
    linear-gradient(to bottom, #212529, #343a40);

    --bg-404: linear-gradient(to right, #1e5799 0%, #2989d8 100%);
    
    --color-secondary: #6c757d;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-default: #f8f9fa;
    --color-dark: #343a40;
    --color-light: #ffffff;
}

.bg-404{
    min-height: 100vh;
}
.bg-404 h1{
    font-size: 150px;
    line-height: normal;
    color: #ffffff8c;
}
.bg-404 p{
    max-width: 60%;
    margin: 0 auto;
    color: #ffffffb3;
}

.bg-primary   { background: var(--color-primary); color: #fff; }
.bg-secondary { background: var(--color-secondary); color: #fff; }
.bg-body      { background: var(--color-bg-body); color: #000; }
.bg-footer    { background: var(--color-bg-footer); color: #fff; }
.bg-404       { background: var(--bg-404); color: #fff; }
.bg-danger    { background: var(--color-danger); color: #fff; }
.bg-warning   { background: var(--color-warning); color: #000; }
.bg-default   { background: var(--color-default); color: #000; }
.bg-dark      { background: var(--color-dark); color: #fff; }
.bg-light     { background: var(--color-light); color: #000; }

@media (max-width: 991.98px) {
    .bg-md-primary   { background: var(--color-primary); color: #fff; }
    .bg-md-secondary { background: var(--color-secondary); color: #fff; }
    .bg-md-danger    { background: var(--color-danger); color: #fff; }
    .bg-md-warning   { background: var(--color-warning); color: #000; }
    .bg-md-default   { background: var(--color-default); color: #000; }
    .bg-md-dark      { background: var(--color-dark); color: #fff; }
    .bg-md-light     { background: var(--color-light); color: #000; }
    .bg-404 p{
        max-width: 90%;
    }
}

@media (max-width: 767.98px) {
    .bg-sm-primary   { background: var(--color-primary); color: #fff; }
    .bg-sm-secondary { background: var(--color-secondary); color: #fff; }
    .bg-sm-danger    { background: var(--color-danger); color: #fff; }
    .bg-sm-warning   { background: var(--color-warning); color: #000; }
    .bg-sm-default   { background: var(--color-default); color: #000; }
    .bg-sm-dark      { background: var(--color-dark); color: #fff; }
    .bg-sm-light     { background: var(--color-light); color: #000; }
    .bg-404 h1{
        font-size: 100px;
    }
}