/* Reset default margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Georgia", serif; /* A classic, readable font */
    background: #f5e7d4; /* Initial solid color as fallback (light tan) */
    display: flex;
    flex-direction: column; /* Stack container and footer vertically */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Prevents scroll on small screens */
    animation: fadeColors 60s infinite ease-in-out; /* Slow fading animation */
}

.container {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Deeper shadow for depth */
    max-width: 600px;
    margin: 20px; /* Adds spacing on small screens */
    animation: fadeIn 1s ease-in-out; /* Fade-in animation */
}

h1 {
    color: #2c3e50; /* Dark blue-gray for contrast */
    font-size: 2.5em;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#verse-text {
    font-size: 1.4em;
    line-height: 1.6;
    color: #34495e; /* Slightly lighter dark blue */
    margin: 20px 0;
    quotes: "“" "”"; /* Adds proper quotation marks */
}

#verse-text:before {
    content: open-quote;
    font-size: 1.2em;
}

#verse-text:after {
    content: close-quote;
    font-size: 1.2em;
}

#verse-reference {
    font-style: italic;
    font-size: 1.1em;
    color: #7f8c8d; /* Muted gray for subtlety */
    margin-top: 10px;
}

/* Footer styling, fixed at bottom */
footer {
    font-size: 0.9em;
    color: #34495e; /* Matches verse text color */
    text-align: center;
    padding: 10px;
    position: fixed; /* Fixes footer to bottom */
    bottom: 0; /* Aligns to bottom of viewport */
    width: 100%; /* Full width */
}

footer a {
    color: #2c3e50; /* Darker blue for link */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Slow fading background animation with brown and tan pastel colors */
@keyframes fadeColors {
    0% {
        background-color: #f5e7d4; /* Light tan */
    }
    20% {
        background-color: #e6d5b8; /* Soft beige */
    }
    40% {
        background-color: #d9c2a7; /* Pastel brown */
    }
    60% {
        background-color: #c9b79c; /* Muted taupe */
    }
    80% {
        background-color: #e2d1c3; /* Creamy tan */
    }
    100% {
        background-color: #f5e7d4; /* Back to light tan */
    }
}

/* Fade-in animation for container */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 500px) {
    .container {
        padding: 20px;
        margin: 10px;
    }

    h1 {
        font-size: 2em;
    }

    #verse-text {
        font-size: 1.2em;
    }

    #verse-reference {
        font-size: 1em;
    }

    footer {
        font-size: 0.8em;
        padding: 5px;
    }
}