/* --- 1. THE BACKGROUND --- */
body {
    background-image: url(bkgrnd.png);
    background-attachment: fixed; /* This creates the parallax 'window' effect */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

/* Update the grid areas to include 'prof' */
.main-wrapper {
    display: grid !important;
    grid-template-columns: 200px 600px;
    grid-template-areas: 
        "prof banner"   /* Profile is now at the top of the left column */
        "dir content"   /* Directory moves down to the second row */
        "upd content";  /* Updates/Changelog stays at the bottom */
    gap: 20px;
    margin: 50px auto; 
    max-width: 820px;
    position: relative;
    z-index: 10;
}

.tile-thoughts-wrapper {
    display: grid !important;
    grid-template-columns: 200px 600px;
    grid-template-areas: 
        "prof banner"   /* Profile is now at the top of the left column */
        "dir content"   /* Directory moves down to the second row */
        "upd content";  /* Updates/Changelog stays at the bottom */
    gap: 20px;
    margin: 50px auto; 
    max-width: 820px;
    position: relative;
    z-index: 10;
}
/* Assign the profile to the new 'prof' area */
.tile-profile {
    grid-area: prof; 
    background: white;
    border: 1px solid #ff00ff;
    box-shadow: 8px 8px 0px #00ffff;
    padding: 8px;
}

.tile-content {
    grid-area: content;
    margin-top: -235px; /* Moves ONLY the content box up towards the banner */
    z-index: 5;        /* Ensures it stays behind the banner if they touch */
}

/* Update Directory to sit in its assigned 'dir' area only (don't span rows) */
.tile-directory {
    grid-area: dir;
}

/* Ensure Updates stays in the 'upd' area */
.tile-updates {
    grid-area: upd;
}

.thoughts-wrapper {
    grid-area: content;
}

/* Global styling for the boxes so they look like 'Tiles' */
.tile-directory, .tile-banner, .tile-content, .tile-updates, .title-profile, .thoughts-wrapper {
    background: white;
    border: 1px solid #ff00ff;
    box-shadow: 8px 8px 0px #00ffff;
    padding: 8px;
    color: #333;
}

.tile-banner {
    grid-area: banner;
    background: #ff91e4;  
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    font-size: 20px;
    border: 2px solid #00ffff;
}


.section-title {
    display: inline-block;
    text-decoration: none;
    border-bottom: 2px solid #ff00ff;
    padding-bottom: 2px;
    margin-bottom: 10px;
    font-family: 'Jua', sans-serif;
}

.neon-title {
    color: white;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 
        0 0 5px #ff00ff, 
        0 0 10px #ff00ff, 
        2px 2px 0px #000000;
}

.retro-sparkle {
    position: fixed;
    width: 20px; 
    height: 20px;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0; 
    animation-fill-mode: backwards;
    
    /* 1. The Main Cross (Slightly softer color) */
    background: 
        linear-gradient(90deg, transparent 40%, #fffedb 40%, #fffedb 60%, transparent 60%),
        linear-gradient(transparent 40%, #fffedb 40%, #fffedb 60%, transparent 60%);
    background-size: 100% 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;

    /* 2. ADDING BLUR & A SOFT GLOW*/
    filter: blur(0px) drop-shadow(0 0 4px #fffedb); 
    
    /* 3. Slow Fade & Rotate Animation */
    animation: glowRotationFlicker 3s infinite ease-in-out;
}

.retro-sparkle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    
    /* 4. Dashed Diagonal Pattern */
    background-image: 
        repeating-linear-gradient(45deg, #fffedb 0px, #fffedb 2px, transparent 2px, transparent 4px),
        repeating-linear-gradient(-45deg, #fffedb 0px, #fffedb 2px, transparent 2px, transparent 4px);
    background-size: 100% 100%;
    
    transform: rotate(45deg); 
    opacity: 0.6; /* Softer for depth */
}

/* --- THE UPDATED ANIMATION (SLOW FADE & SLOW ROTATE) --- */
@keyframes glowRotationFlicker {
    0%   { opacity: 0; transform: rotate(0deg); }
    30%  { opacity: 1; transform: rotate(100deg); } /* Smooth fade-in + rotation */
    70%  { opacity: 1; transform: rotate(260deg); } /* Hold glow + rotation */
    100% { opacity: 0; transform: rotate(360deg); } /* Smooth fade-out + rotation */
    
}