/*
* This stylesheet provides the basic styling for your travel blog.
* It sets the background image, font, colors, and improves content readability.
*/

/* ====================================
   Global Body Styling
   ------------------------------------
   This section sets the full-page background image
   and the default font and text color for the entire website.
*/
body {
    /* Sets the world map image as the background. */
    background-image: url('world-map-background.jpg');
    
    /* Zooms the image to cover the entire page without being cropped. */
    background-size: 100vw 100vh;
    
    /* Centers the background image on the page. */
    background-position: center;
    
    background-repeat: no-repeat;
    
    /* Makes the background fixed so the content scrolls on top of it. */
    background-attachment: fixed;
    
    /* Sets the default font and text color for the whole page. */
    font-family: Verdana, sans-serif;
    color: black;
    
    /* This ensures content can scroll normally. */
    position: relative;
    
    /* NEW: Add padding to the top of the body to make space for the fixed header. */
    padding-top: 0px; /* Adjust this value to match the height of your header. */
    
    /* Basic centering to make the page content look good. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* Removes the default body margin. */
    margin: 0;
}

/* ====================================
   Content Container Styling
   ------------------------------------
   This section styles the main content elements like headings, paragraphs,
   and lists. The semi-transparent background has been removed to allow the
   world map background to show through.
*/
h1, h2, p {
    /* The semi-transparent background is gone! */
    background-color: transparent;
    
    /* Adds some space inside the box for padding. */
    padding: 20px;
    
    /* Adds rounded corners for a softer, more modern look. */
    border-radius: 12px;
    
    /* Sets a maximum width to keep the text from stretching too wide on large screens. */
    max-width: 800px;
    
    /* Adds a small margin at the bottom of each element. */
    margin-bottom: 20px;
}

/* ====================================
   Image Styling
   ------------------------------------
   This section makes sure your `neocities.png` image
   is a good size and has a nice style.
*/
img {
    max-width: 100%; /* Ensures the image doesn't overflow its container. */
    height: auto;   /* Maintains the image's aspect ratio. */
    border-radius: 12px; /* Adds rounded corners to the image. */
    margin-top: 20px;
}

/* ====================================
   Postcard Styling
   ------------------------------------
   This section makes your images look like postcards.
*/
.postcard {
    /* Adds a little space between the image and the box edges. */
    padding: 15px 15px 50px 15px;
    
    /* Gives the card a white background, like paper. */
    background-color: white;
    
    /* Creates a drop shadow to make the postcard appear raised. */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    
    /* Adds a smooth transition for hover effects. */
    transition: transform 0.3s ease-in-o