body {
    font-family: 'Roboto', sans-serif;
    background-color: #0f0518;
    color: #fff;
    overflow-y: auto;
    /* Changed to allow scrolling for article */
}

.font-spooky {
    font-family: 'Creepster', cursive;
}

/* Fog Animation */
.fog-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.fog-img {
    position: absolute;
    height: 100vh;
    width: 300vw;
    z-index: 1;
    opacity: 0.3;
    background: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png') repeat-x;
    animation: fog 60s linear infinite;
}

.fog-img-2 {
    z-index: 2;
    opacity: 0.2;
    animation: fog 40s linear infinite reverse;
}

@keyframes fog {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-200vw, 0, 0);
    }
}

/* Ghost Animation */
.ghost {
    transition: transform 0.2s, opacity 0.5s;
    cursor: pointer;
}

.ghost:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px #fff);
}

.ghost-float {
    animation: floatGhost 3s ease-in-out infinite alternate;
}

@keyframes floatGhost {
    0% {
        transform: translateY(0) rotate(-5deg);
    }

    100% {
        transform: translateY(-15px) rotate(5deg);
    }
}

/* Ectoplasm Particle */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: fadeUp 1s forwards;
}

@keyframes fadeUp {
    to {
        transform: translateY(-50px);
        opacity: 0;
    }
}

/* High-quality claymation background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('clay_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
}