/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Primary Navy (Near Black): #0A1420
Text Light (Scholarly Cream): #F0F0E0
Highlight/Accent (Muted Blue-Gray): #6A8D9F
*/

body {
    /* Academic Font: Garamond (or a suitable serif fallback) */
    font-family: Garamond, 'Palatino Linotype', Palatino, serif;
    background-color: #0A1420;
    color: #F0F0E0;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-size: 18px;
}

/* -- Background Texture (Extremely Subtle) -- */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.02; /* Almost invisible */
    /* Subtle dark grid for structural feeling */
    background-image: repeating-linear-gradient(
        45deg, 
        transparent, 
        transparent 1px, 
        #112340 1px, 
        #112340 3px
    );
    background-size: 60px 60px;
}

/* -- CONTENT BOXES (The Academic Folder) -- */
.window-box {
    border: 1px solid #6A8D9F; /* Muted Blue-Gray outline */
    border-left: 6px solid #6A8D9F; /* Subtle institutional emphasis */
    background-color: rgba(15, 25, 40, 0.95); /* Slightly lighter content area */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* -- THE "COMPLEX PLAY" MECHANIC FOR LINKS -- */

/* Flicker animation for hover */
@keyframes flicker-play {
    0%, 19.9% { opacity: 1; transform: translate(0, 0); }
    20%, 21% { opacity: 0.8; transform: translate(0.5px, -0.5px); }
    22%, 24% { opacity: 1; transform: translate(-0.5px, 0.5px); }
    25% { opacity: 0.9; transform: translate(1px, 0); }
    26%, 100% { opacity: 1; transform: translate(0, 0); }
}

a {
    color: #AAAAAA; /* Subtle gray link color */
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: color 0.2s, transform 0s; /* Transform transition removed for quick jitter */
    border-bottom: 1px solid #1B355A; /* Dark underline for structure */
}

a:hover {
    color: #F0F0E0; /* Highlight to cream */
    border-bottom: 1px solid #6A8D9F;
    /* Apply complex jitter/flicker */
    animation: flicker-play 0.3s infinite step-end; 
}

h1, h2, h3 {
    font-weight: 700;
    text-transform: uppercase;
}

/* Subtle divider */
hr.divider {
    border-top: 1px dotted #404040;
    margin: 2rem 0;
}

/* Styling the header for a professional feel */
header {
    border-bottom: 5px double #6A8D9F;
}