/* Background images fixed to left and right edges */
body::before,
body::after {
    content: "";
    position: fixed;
    top: 15vh;
    width: 25%;  /* Larger default width */
    height: 80vh;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    transition: width 0.3s ease;
}

@media (min-width: 1280px) {
    body::before, body::after {
        width: 30%; /* Even larger on wide screens */
    }
}

@media (max-width: 768px) {
    body::before, body::after {
        width: 40%; /* Very large on mobile for character */
        top: 25vh;
        opacity: 0.8;
    }
}

body::before {
    left: -5%;  /* Slightly off-screen for better effect */
    background-image: url('../img/MawL.png');
}

body::after {
    right: -5%; /* Slightly off-screen for better effect */
    background-image: url('../img/MawR.png');
}

/* Hide elements if images fail to load */
.no-bg-images body::before,
.no-bg-images body::after {
    display: none;
}