[data-theme="halloween"]{
    --fr-color-site: 244 131 27;
    --fr-color-site-dark: 28 28 28;
    --fr-color-site-light: 144 4 187;
    --fr-color-site-darker: 99 195 40;
    --fr-color-site-top: 99 195 40;
    --fr-color-tarif: 208 40 35;
    --logo-header: url( ../img/logo-fond-middle.svg);
    @import url('https://fonts.googleapis.com/css?family=Eater');
}
[data-theme="halloween"] body:before {
    background-image: url(../img/halloween.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    z-index: -1;
}
[data-theme="halloween"] #top {
    background-color: rgb(255 255 255 / 20%);
    background-image: linear-gradient(to bottom, white 5%, rgb(255 255 255 / 10%) 50%);
}
[data-theme="halloween"] .navbar-brand {
    position: relative;
}
[data-theme="halloween"] #top {
    background-color: rgb(255 255 255 / 20%);
}
[data-theme="halloween"] .navbar:first-child{
    background-color: rgb(var(--fr-color-site-dark)) !important;
    background-image: linear-gradient(to bottom, rgb(var(--fr-color-site-light)) 25%, rgb(var(--fr-color-site-light) / 0%));
}
[data-theme="halloween"] .h-100.border.p-2.position-relative.rounded-3 {
    background-color: white;
    box-shadow: 0 0 1rem orange;
}
[data-theme="halloween"] .h-100.border.p-2.position-relative.rounded-3.bg-site.text-white.text-center.d-flex.align-items-center {
    background-color: rgb(var(--fr-color-site)) !important;
    box-shadow: 0 0 1rem orange;
}

[data-theme="halloween"] .font-14.text-black-50{
    color: rgb(255 255 255 / 50%) !important;
}
[data-theme="halloween"] p.font-14.font-weight-bold.text-uppercase {
    color: rgb(var(--fr-color-site));
}

@media (min-width: 1024px)
{
    [data-theme="halloween"] .navbar:first-child:before {
        content: 'Happy Halloween !!';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: "Rubik Wet Paint", system-ui;
        font-size: 3vw;
        text-shadow: 2px 2px 30px green;
        font-family: 'Eater', cursive;
        color: #111111;
        -moz-animation: flicker 4s 0s infinite;
        -webkit-animation: flicker 4s 0s infinite;
        animation: flicker 4s 0s infinite;
    }

}
@keyframes flicker {
    0%, 6%, 12% {
        text-shadow: none;
        color: #111111;
    }
    3%, 9% {
        text-shadow: 0 0 8px rgba(250, 103, 1, 0.6);
        color: #fa6701;
    }
    60% {
        text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1);
        color: #fa6701;
    }
    100% {
        text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1);
        color: #fa6701;
    }
}
@keyframes animation
{
    0% {text-shadow: 0 0 20px #fefcc9,
    10px -10px 30px #feec85,
    -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
    -20px -60px 60px #cd4606,
    0 -80px 70px #973716,
    10px -90px 80px #451b0e;}
    100% {text-shadow: 0 0 20px #fefcc9,
    10px -10px 30px #fefcc9,
    -20px -20px 40px #feec85,
    22px -42px 60px #ffae34,
    -22px -58px 50px #ec760c,
    0 -82px 80px #cd4606,
    10px -90px 80px  #973716;}
}

.navbar-brand a {
    min-width: 265px;
    min-height: 90px;
    display: block;
    background-image: var(--logo-header);
}
.navbar-brand img{
    position: absolute;
    left:-500px;
}