/* Explain: Base reset, typography, site-wide background, and subtle glow animation. */
* {
    box-sizing: border-box;
}

html {
    color: var(--text-color);
    overflow-x: hidden;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background-image: url('https://files.cdn-files-a.com/uploads/12319002/normal_6a8185bd28c8d.png?format=avif');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000;
}

img {
    display: block;
    max-width: 100%;
}

@keyframes slowGlow {
    0%, 100% { opacity: 0.75; text-shadow: 0 0 4px rgba(197, 160, 89, 0.3); }
    50% { opacity: 1; text-shadow: 0 0 12px rgba(197, 160, 89, 0.9); }
}
.animate-slow-glow {
    animation: slowGlow 4s ease-in-out infinite;
}

/* Subtly increase main body text readability on tablets and laptops */
@media (min-width: 768px) {
    main .text-lg:not([class*="md:text-"]):not([class*="lg:text-"]):not([class*="xl:text-"]) {
        font-size: 1.25rem; /* ~20px (equivalent to text-xl) */
        line-height: 1.8;
    }
    main .text-base:not([class*="md:text-"]):not([class*="lg:text-"]):not([class*="xl:text-"]) {
        font-size: 1.125rem; /* ~18px (equivalent to text-lg) */
        line-height: 1.75;
    }
}