body {
    font-family: 'Mada', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; 
    color: #333; 
    
    /* --- ADD THIS LINE --- */
    line-height: 1.6; /* Adds space BETWEEN lines in a paragraph */
}

.container {
    max-width: 800px; 
    margin: 40px auto; 
    padding: 20px;
    background-color: #ffffff; 
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    /* --- NEW: Add our fade-in animation --- */
    animation: fadeIn 0.5s ease-in-out;
}

header {
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

header h1 {
    margin: 0;
    color: #1B365D; 
}

main h2 {
    /* --- CHANGED: Fix the "blending" --- */
    /* Make the heading dark blue, not light blue */
    color: #1B365D; 
}

footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #777;
    text-align: center;
}

/* --- ADD THIS NEW CODE ---
  This targets all paragraphs in your main content
*/
main p {
    margin-bottom: 20px; /* Adds a 20px space AFTER each paragraph */
}

/* --- THIS IS THE MISSING CODE --- 
  It styles all links inside your main paragraphs
*/
main a {
    color: #3A7ECB; /* Our light blue */
    text-decoration: none; /* THIS REMOVES THE UNDERLINE */
    font-weight: bold;
    transition: color 0.2s ease;
}

main a:hover {
    color: #1B365D; /* Dark blue on hover */
    text-decoration: underline; /* Add underline on hover */
}

/* --- NEW: Navigation Bar --- */
nav {
    background-color: #f8f8f8; /* A very light gray background */
    padding: 10px 0;
    border-radius: 5px;
    margin-bottom: 20px;
}

nav ul {
    list-style: none; /* THIS REMOVES THE BULLETS */
    padding: 0;
    margin: 0;
    text-align: center; /* Centers the links */
}

nav ul li {
    display: inline-block; /* Makes links sit side-by-side */
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none; /* THIS REMOVES THE UNDERLINE */
    font-weight: bold;
    color: #3A7ECB; /* Light blue */
    font-size: 1.1em;
    transition: color 0.2s ease;
}

nav ul li a:hover {
    color: #1B365D; /* Dark blue */
}

/* --- POST LIST STYLING --- */
#post-list {
    list-style: none;
    padding: 0;
}

#post-list li {
    margin-bottom: 10px;
}

#post-list a {
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    color: #3A7ECB; /* Keep links light blue */
    
    /* --- NEW: Add a smooth transition --- */
    transition: color 0.2s ease, transform 0.2s ease;
}

#post-list a:hover {
    text-decoration: underline;
    
    /* --- NEW: Make the hover effect cooler --- */
    color: #1B365D; /* Change to dark blue */
    transform: translateX(5px); /* Nudge it to the right */
}

/* --- NEW: KEYFRAME ANIMATION ---
  This defines the 'fadeIn' animation
*/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* Start 10px lower */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* End at normal position */
    }
}

/* --- NEW: Image Styling --- */
main img {
    width: 100%; /* <-- THIS IS THE FIX */
    height: auto;    /* Keeps the aspect ratio correct */
    border-radius: 8px; 
    margin-top: 20px;
    margin-bottom: 20px;
}

/* --- NEW: For Tinkercad Embeds --- */
.tinkercad-embed {
    /* This sets the aspect ratio (725 / 453) */
    aspect-ratio: 1.6 / 1;
    width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: matches your site style */
    overflow: hidden;   /* Keeps the corners rounded */
}

/* --- NEW: Post Preview on Homepage --- */
.post-preview {
    /* Creates a nice separator line between posts */
    border-bottom: 2px solid #eee; 
    padding-bottom: 20px; /* Space between text and the line */
    margin-bottom: 20px;  /* Space after the line */
}

/* Make the post title big */
.post-preview h3 {
    margin-top: 0;
    margin-bottom: 5px; /* Puts the date right under it */
}

/* Style the post title link */
.post-preview h3 a {
    color: #333; /* Dark, not purple */
    text-decoration: none;
    font-size: 1.5rem; /* Make the title bigger */
}
/* Make it light up with your theme color on hover */
.post-preview h3 a:hover {
    color: #8a2be2; 
    text-decoration: underline;
}

/* Style the date text */
.post-preview small {
    display: block; /* Gives it its own line */
    color: #777; /* Make it grey and less important */
    margin-bottom: 10px;
}

/* Style the preview text */
.post-preview p {
    line-height: 1.5;
    margin-bottom: 5px; /* Not as much space as a normal paragraph */
}