body {
    background-size: cover;
    background-color: tomato;
    padding: 3em;
}

img {
    box-shadow: 0px 0px 10px #fff;
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}

h1 img {
    width: 100%; /* Responsive width */
    max-width: 600px; /* Max width for larger screens */
    position: relative; /* Change to relative */
    margin: 20px auto; /* Center image */
    display: block; /* Block element */
}

.glow {
    font-size: 40px;
    color: rgb(126, 79, 235);
    text-align: center;

    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
    from {
        text-shadow:
            0 0 10px rgb(255, 255, 255),
            0 0 20px #fff,
            0 0 30px #f0e9ec,
            0 0 40px #e60073,
            0 0 50px #f5eff2,
            0 0 60px #e60073,
            0 0 70px #ec0d0d;
    }

    to {
        text-shadow:
            0 0 20px #fff,
            0 0 30px #ec0d0d,
            0 0 40px #ec0d0d,
            0 0 50px #ec0d0d,
            0 0 60px #ec0d0d,
            0 0 70px #f3eaea,
            0 0 80px #e6dfdf;
    }
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 768px) {
    body {
        padding: 1em; /* Reduced padding on mobile */
    }

    .glow {
        font-size: 24px; /* Smaller font size */
    }

    h1 img {
        width: 100%; /* Full width on smaller screens */
        max-width: none; /* Remove max-width constraint */
    }
}
