body {
    background-color:#1a1817;
    transition: background-color 0.3s ease, background-image 0.3s ease;
}

body::after {
    transition: opacity 0.3s ease;
}

.intro {
    transition: color 0.3s ease;
}

.intro p {
    transition: color 0.3s ease;
}

/* FANTASY THEME */
body.fantasy-theme {
    background-image: url('/images/fantasy-bg.svg');
    background-repeat: no-repeat;
    background-color: #799174;

    animation: parallax linear;
   animation-timeline: scroll(); 
   
}

@keyframes parallax {
  from {
    background-position: top 0px center;
  }
  to {
    background-position: top 160px center;
  }
}

.fantasy-theme #event-content #event-title {
    background:unset;
    box-shadow:unset;
    color: var(--text-color);
    text-shadow:unset;
    padding:unset;
    margin-bottom: var(--space-8);
}

.fantasy-theme .container .event-header {
    background: var(--beige);
}

.fantasy-theme .event-details {
    background: var(--brown-dark);
    border-color: var(--brown-dark);
}

.fantasy-theme .detail-item {
    background:var(--beige);

}
.fantasy-theme .intro {
    color: var(--brown-dark);
}

.fantasy-theme .intro p {
    color: var(--brown-dark);
}

@media (max-width: 600px) {
    body.fantasy-theme {
       background-position:50% -1%;
    }
}

/* SPOOKY THEME */
body.spooky-theme {
    background-color: #2c2928;
    background-image: linear-gradient(180deg, #1a1817 0%, #3a5344 100%);
}

body.spooky-theme::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/fog.jpg') no-repeat bottom center;
    mix-blend-mode: soft-light;
    background-size: cover;
    opacity: 0.7;
    z-index:-1;
    position:fixed;
    animation: parallax-fog linear;
   animation-timeline: scroll(); 
}

.spooky-theme #event-content #event-title {
    background:var(--beige-light);
    color: var(--text-color);
    text-shadow:unset;
    text-align:left;
    margin-bottom:0;
    padding-bottom:0;
    padding-top: 1.4em;

}

.spooky-theme #event-content #event-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: var(--success);
    margin-top: var(--space-6);
    border-radius: 2px;
}

.spooky-theme .pushme .inner {
    background-color: var(--success-light);
    color: var(--white);
}

.spooky-theme .intro {
    color: var(--success-light);
}

.spooky-theme .intro p {
    color: var(--success);
}

@keyframes parallax-fog {
  from {
    background-position: top 0px center;
  }
  to {
    background-position: top -200px center;
  }
}