html {
    background-image: url('bg.jpg'); 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed;

    margin: 0;
    padding: 7.5vh 7.5vw;
    min-height: 100vh;
}
html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    background: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), 
        url('bg.jpg');
    
    background-size: cover;
    background-position: center;
    
    filter: blur(2px); 
    animation: slowMove 20s infinite alternate ease-in-out;
    transform: scale(1.1);
}

html::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* This creates a soft orange/green glow matching your theme */
    background: radial-gradient(circle at 50% 50%, rgba(243, 152, 79, 0.2), transparent 70%);
    animation: pulseGlow 8s infinite alternate ease-in-out;
    pointer-events: none;
}

@keyframes slowMove {
    from {
        transform: scale(1.1) translate(0, 0);
    }
    to {
        /* Increased translation for a more dramatic drift */
        transform: scale(1.3) translate(-50px, -30px); 
    }
}

body {
    margin: 0;
    width: 100%;
    min-height: 85vh;

    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;

    grid-template-areas: 
        "header header"
        "nav main"
        "footer footer";

    gap: 15px;
    padding: 15px;
    box-sizing: border-box;
    font-family: Tahoma, sans-serif;
}

header {
    grid-area: header;
    background-color: rgba(243, 152, 79, 0.5);
    border: 1px solid #81c784;
    padding: 40px 20px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px
}

header h1 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

header h1 img{
    display: block;
    height: 40px;
    width: auto;
}

nav {
    grid-area: nav;
    background-color: rgba(54, 151, 100, 0.5);
    border: 1px solid #ef9a9a;
    padding: 20px;
    line-height: 1.5;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px;

    height: 100%;
    box-sizing: border-box;
}

main {
    grid-area: main;
    background-color: rgba(150, 160, 164, 0.5);
    border: 1px solid #fff59d;
    padding: 20px;
    
    display: flex;
    flex-direction: column;
    gap: 15px;
}

article {
    background-color: rgba(23, 135, 181, 0.5);
    border: 1px solid #9e9e9e;
    padding: 40px 20px;
    text-align: center;
    font-weight: bold;
}

footer {
    grid-area: footer;
    background-color: rgba(195, 160, 67, 0.5);
    border: 1px solid #ce93d8;
    padding: 15px;
    text-align: center;
}

/* 1. The Animation Definition */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(20px); /* Elements slide up slightly */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Apply to all major sections and hide them initially */
header, nav, main, footer, article {
    opacity: 0;
    animation: fadeInSlide 0.8s ease-out forwards;
}

/* 3. The Staggered Timeline (Delays) */
header { 
    animation-delay: 0.1s; 
}

nav { 
    animation-delay: 0.4s; 
}

main { 
    animation-delay: 0.7s; 
}

/* Sequencing the articles inside the main section */
article:nth-child(1) { 
    animation-delay: 0.9s; 
}

article:nth-child(2) { 
    animation-delay: 1.1s; 
}

article:nth-child(3) { 
    animation-delay: 1.3s; 
}

/* The Footer is the final element to appear */
footer { 
    animation-delay: 1.6s; 
}

/* 1. Target all links: standard, visited, and active */
a, a:visited {
    position: relative;
    text-decoration: none;
    color: #d69704; /* GoldSrc Orange */
    transition: color 0.3s ease;
}

/* 2. Create the hidden glowing underline */
a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: #d69704;
    box-shadow: 0 0 10px #d69704, 0 0 5px #d69704; /* Glow intensity */
    transition: all 0.3s ease-in-out;
}

/* 3. Hover state for text and underline */
a:hover {
    color: #ffcc00; /* Brighter gold on hover */
}

a:hover::after {
    width: 100%;
    left: 0;
}

/* This triggers when the screen is smaller than 800 pixels */
@media screen and (max-width: 800px) {
    html {
        padding: 10px; /* Reduce large outer padding on mobile */
    }

    body {
        grid-template-columns: 1fr; /* Change from 2 col to 1 col */
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "footer";
    }

    nav {
        height: auto; /* Let the nav grow with content */
    }
}