@media (prefers-color-scheme: light) {
    body  {
        background-color: var(--color-white);
    }

    body, main p {
        color: var(--color-grey-dark);
    }
    footer .container, .panel .index {
        background-color: var(--color-red-main);
    }
    
    a:not(.button), a:not(.button):focus {
        color: var(--color-grey-dark) !important;
    }
    a:not(.button):hover, .nav-link.active  {
        color: var(--color-red-main) !important;
    }
    a:not(.button)::after {
        background-color: var(--color-red-main);
    }
    
    .button.style1 {
        color: var(--color-white);
        background-color: var(--color-red-main);
        border-color: var(--color-red-main);
    }
    .button.style1:hover, .button.style2:hover, .button.style3:hover {
        background-color: var(--color-red-dark);
        border-color: var(--color-red-dark);
    }

    .button.style2 {
        color: var(--color-white);
        background-color: var(--color-grey-main);
        border-color: var(--color-grey-main);
    }
    
    .button.style3 {
        color: var(--color-grey-dark);
        background-color: var(--color-white);
        border-color: var(--color-grey-dark);
    }
    .button.style3:hover {
        color: var(--color-white);
    }

    header {
        background-color: var(--color-white);
    }
    
    @media (min-width: 1400px) {
        header {
            background: linear-gradient(0deg,
            rgba(255, 255, 255, .5) 10px, rgba(255, 255, 255, .5) 10px,
            rgba(255, 255, 255, .6) 20px, rgba(255, 255, 255, .6) 20px,
            rgba(255, 255, 255, .7) 30px, rgba(255, 255, 255, .7) 30px,
            rgba(255, 255, 255, .7) 20px, rgba(255, 255, 255, 1) 100%);
        }
    }
    
    header nav .offcanvas.show, header nav .offcanvas.showing {
        background: rgba(255, 255, 255, .5);
    }
    header nav .offcanvas-backdrop {
        background: rgba(255, 255, 255, .1);
    }
    
    section.intro > .row {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(0, 0, 0, 0.5) 100%)
    }
    
    section.intro h3, section.intro p {
        color: var(--color-grey-dark);
    }

    .form-control {
        color: var(--color-grey-dark);
        background-color: var(--color-white);
    }
    .form-control:focus {
        color: var(--color-white);
        background-color: var(--color-red-main);
        border-color: var(--color-red-dark);
    }
    
    .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    .modal-content {
        -webkit-box-shadow: 0 0 30px 30px var(--color-white);
        box-shadow: 0 0 30px 30px var(--color-white);
    }
    .modal-backdrop {
        background: var(--color-white);
    }

    .lightbox-caption em {
        color: var(--color-grey-dark);   
    }
    
    .carousel-control-prev-icon:after, .carousel-control-next-icon:after {
        color: var(--color-grey-dark);
        background-color: var(--color-white);
    }
    .carousel-caption {
        background-color: rgba(255, 255, 255, 0.8);
    }

    @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
        section.intro .box.animation-start{
            background: linear-gradient(90deg,
            rgba(255, 255, 255, .65) 10px, rgba(255, 255, 255, .65) 10px,
            rgba(255, 255, 255, .675) 20px, rgba(255, 255, 255, .675) 20px,
            rgba(255, 255, 255, .7) 30px, rgba(255, 255, 255, .7) 30px,
            rgba(255, 255, 255, .7) 20px, rgba(255, 255, 255, 1) 50%);
        }
        section.intro .box.animation-end {
            background: linear-gradient(90deg,
            rgba(255, 255, 255, .65) 10px, rgba(255, 255, 255, .65) 10px,
            rgba(255, 255, 255, .675) 20px, rgba(255, 255, 255, .675) 20px,
            rgba(255, 255, 255, .7) 30px, rgba(255, 255, 255, .7) 30px,
            rgba(255, 255, 255, .7) 20px, rgba(255, 255, 255, 1) 40%);
        }
    }
    
    @supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
        section.intro .box {
            background: var(--color-white);
        }
    }
}

@media (prefers-color-scheme: dark) {
    body  {
        background-color: var(--color-grey-dark);
    }

    body, main p {
        color: var(--color-white);
    }
    footer .container, .panel .index {
        background-color: var(--color-red-dark);
    }

    a:not(.button), a:not(.button):focus {
        color: var(--color-white) !important;
    }
    a:not(.button):hover, .nav-link.active  {
        color: var(--color-red-main) !important;
    }
    a:not(.button)::after {
        background-color: var(--color-red-main);
    }

    .button.style1 {
        color: var(--color-white);
        background-color: var(--color-red-dark);
        border-color: var(--color-red-dark);
    }
    .button.style1:hover, .button.style2:hover, .button.style3:hover {
        background-color: var(--color-red-main);
        border-color: var(--color-red-main);
    }

    .button.style2{
        color: var(--color-grey-dark);
        background-color: var(--color-grey-light);
        border-color: var(--color-grey-light);
    }
    .button.style2:hover {
        color: var(--color-white);
    }
    
    .button.style3{
        color: var(--color-white);
        background-color: var(--color-grey-dark);
        border-color: var(--color-white);
    }
    
    header {
        background-color: var(--color-grey-dark);
    }
    
    @media (min-width: 1400px) {
        header {
            background: linear-gradient(0deg,
            rgba(29, 29, 29, .4) 10px, rgba(29, 29, 29, .4) 10px,
            rgba(29, 29, 29, .6) 20px, rgba(29, 29, 29, .6) 20px,
            rgba(29, 29, 29, .7) 30px, rgba(29, 29, 29, .7) 30px,
            rgba(29, 29, 29, .7) 20px, rgba(29, 29, 29, 1) 100%);
        }
    }
    
    header nav .offcanvas.show, header nav .offcanvas.showing {
        background: rgba(0, 0, 0, .75);
    }
    header nav .offcanvas-backdrop {
        background: rgba(0, 0, 0, .2);
    }

    section.intro video {
        filter: sepia(10%) brightness(75%) saturate(140%) contrast(110%);
        -webkit-filter: sepia(10%) brightness(75%) saturate(140%) contrast(110%);
    }
    section.intro > .row {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(0, 0, 0, .75) 100%)
    }

    .form-control {
        color: var(--color-white);
        background-color: var(--color-grey-dark);
    }
    .form-control:focus {
        color: var(--color-white);
        background-color: var(--color-red-main);
        border-color: var(--color-red-light);   
    }
    
    .dropdown-menu {
        background-color: rgba(29, 29, 27, 0.8);
    }
    
    .modal-content {
        -webkit-box-shadow: 0 0 30px 30px var(--color-grey-dark);
        box-shadow: 0 0 30px 30px var(--color-grey-dark);
    }
    .modal-backdrop {
        background: var(--color-grey-dark);
    }

    .lightbox-caption em {
        color: var(--color-white);   
    }
    
    .carousel-control-prev-icon:after, .carousel-control-next-icon:after {
        color: var(--color-white);
        background-color: var(--color-grey-dark);
    }
    .carousel-caption {
        background-color: rgba(29, 29, 27, .8);
    }
    
    @supports (backdrop-filter: none) or (-webkit-backdrop-filter: none) {
        section.intro .box.animation-start{
            background: linear-gradient(90deg,
            rgba(29, 29, 29, .55) 10px, rgba(29, 29, 29, .55) 10px,
            rgba(29, 29, 29, .65) 20px, rgba(29, 29, 29, .65) 20px,
            rgba(29, 29, 29, .7) 30px, rgba(29, 29, 29, .7) 30px,
            rgba(29, 29, 29, .7) 20px, rgba(29, 29, 29, 1) 50%);
        }
        section.intro .box.animation-end {
            background: linear-gradient(90deg,
            rgba(29, 29, 29, .55) 10px, rgba(29, 29, 29, .55) 10px,
            rgba(29, 29, 29, .65) 20px, rgba(29, 29, 29, .65) 20px,
            rgba(29, 29, 29, .7) 30px, rgba(29, 29, 29, .7) 30px,
            rgba(29, 29, 29, .7) 20px, rgba(29, 29, 29, 1) 40%);
        }
    }

    @supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
        section.intro .box {
            background: var(--color-grey-dark)
        }
    }
}