/*--------------------------------------------------
  1. BASE STYLES & FONT FIXES
--------------------------------------------------*/

/* FIX: Changed body font from serif (Times New Roman) to a clean sans-serif stack for better online readability, matching the modern standard used by the instructor. */
body { 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 20px; 
    line-height: 1.5; 
    
    /* Background Image Rules */
    background-image: url('images/background.jpg');
    background-repeat: repeat; 
    background-attachment: fixed;
    background-color: #f0f0f0;
}

h1, h2, h3 { margin-bottom: 5px; }


/*--------------------------------------------------
  2. HEADER FIXES & PROMINENCE
--------------------------------------------------*/

/* PROMINENCE: Your name is large and uses the stylish font. */
h1 { 
    font-size: 40px; 
    font-weight: bold; 
    font-family: 'Rubik Distressed', cursive; 
}

/* FIX: Removes the full-width line beneath the contact information. The border was on the header element itself. */
header { 
    padding-bottom: 10px; 
    margin-bottom: 20px; 
    /* REMOVED: border-bottom: 3px double #333; */
    text-align: center; 
}

/* AESTHETIC: Styles the contact information (<p> inside <header>) to be smaller and slightly muted, providing better visual hierarchy below the prominent name. */
header p {
    font-size: 14px;
    color: #555;
    margin-top: 0;
}


/*--------------------------------------------------
  3. CONTENT LAYOUT & TYPOGRAPHY
--------------------------------------------------*/

/* LAYOUT: Centers and contains the main resume content */
main {
    max-width: 800px; 
    margin: 0 auto; 
    padding: 30px; /* Increased padding for cleaner separation */
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* SECTION HEADERS (H2): Adds top margin to clearly separate sections, similar to the instructor's clean look. */
h2 { 
    font-size: 18px; 
    font-weight: bold;
    padding-top: 10px; /* Space above the line */
    border-bottom: 2px solid #333; /* Thicker, cleaner single line */
    padding-bottom: 3px; 
    margin-top: 20px;
    margin-bottom: 10px;
}

h3 { 
    font-size: 16px; 
    margin-top: 15px; /* Added spacing above job titles */
}

/* LIST CLEANUP: Tightens the list for cleaner bullet points (following professional standard) */
ul {
    margin: 5px 0 10px 0; 
    padding-left: 20px; 
    list-style-type: square; 
}

section { margin-bottom: 20px; }
article { margin-bottom: 15px; }
.job-dates { font-style: italic; font-size: 14px;}

/*--------------------------------------------------
  4. VISITOR COUNTER STYLING
--------------------------------------------------*/

.visitor-stats {
    display: block;      /* Changed to block for centering */
    text-align: center;  /* Centers the text inside */
    margin: 20px auto;   /* Centers the box itself and adds space from the main white box */
    width: fit-content;  /* Ensures the background only wraps the text */
    background: rgba(0, 0, 0, 0.75); 
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    border: 2px solid #333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-size: 16px;
}

#counter {
    color: #007bff; /* Blue accent for the actual number */
    margin-left: 5px;
}