body {
    background-color: #000;
}
.site-header,
footer {
    background-color: #f00;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("../media/spoopstober-bg.gif") center / cover;
    filter: brightness(0.3) hue-rotate(320deg);
    opacity: 0;
    animation: spoopstober-bg-in 1s ease calc(var(--transition-duration) * 2 + 1s) forwards;
}
@keyframes spoopstober-bg-in {
    to { opacity: 1; }
}
.tile--new-spoop {
    --bg: url("../media/me.jpg");
}
.tile--banshee-chapter {
    --bg: url("../media/banshee-chapter.webp");
    background-position: 20% center;
}
.tile--return-to-silent-hill {
    --bg: url("../media/return-to-silent-hill.webp");
    background-position: 85% center;
}
.tile--kilometre-31 {
    --bg: url("../media/kilometre-31.webp");
}
.tile--a-page-of-madness {
    --bg: url("../media/a-page-of-madness.webp");
}
.tile--pit-and-the-pendulum {
    --bg: url("../media/pit-and-the-pendulum.webp");
}
.tile--wolf-house {
    --bg: url("../media/wolf-house.webp");
}
.tile--audition {
    --bg: url("../media/audition.webp");
}
.tile--medium {
    --bg: url("../media/medium.webp");
    background-position: 25% center;
}
.tile--blood-on-satans-claw {
    --bg: url("../media/blood-on-satans-claw.webp");
    background-position: 25% center;
}
.tile--one-cut-of-the-dead {
    --bg: url("../media/one-cut-of-the-dead.webp");
}
.tile--hitcher {
    --bg: url("../media/hitcher.webp");
    background-position: 30% center;
}
.tile--good-boy {
    --bg: url("../media/good-boy.webp");
    background-position: 35% center;
}
.tile--session-9 {
    --bg: url("../media/session-9.webp");
}
.tile--possessor {
    --bg: url("../media/possessor.webp");
}
.tile--camp-miasma {
    --bg: url("../media/camp-miasma.webp");
}
.tile--psycho {
    --bg: url("../media/psycho.webp");
    background-position: 90% center;
}
.tile--substance {
    --bg: url("../media/substance.webp");
    background-position: 75% center;
}
.tile--onibaba {
    --bg: url("../media/onibaba.webp");
}
.tile--dead-ringers {
    --bg: url("../media/dead-ringers.webp");
}
.tile--titane {
    --bg: url("../media/titane.webp");
    background-position: 35% center;
}
.tile--tenebre {
    --bg: url("../media/tenebre.webp");
}