/*
  1. Centering and Base Styles
*/
body {
    /* Use Flexbox for easy centering */
    display: flex;
    /* Center horizontally */
    justify-content: center;
    /* Center vertically */
    align-items: center;
    /* Ensure body takes up the full viewport height */
    min-height: 100vh;
    /* Remove default margin/padding */
    margin: 0;
    /* Default background color (Light Mode) */
    background-color: #ffffff; 
    /* Enable smooth transitions (optional, but nice) */
    transition: background-color 0.3s ease;
    /* Tells the browser this page supports both light and dark modes */
    color-scheme: light dark;
}

/* 2. Image Container Sizing 
*/
picture, 
img {
    /* Ensure the image is responsive and doesn't exceed the viewport */
    max-width: 90vw;
    max-height: 90vh;
    height: auto;
    display: block; /* Removes any extra space below the image */
}

a {
    /* Ensure the link container doesn't affect positioning */
    display: block;
}

/*
  3. Dark Mode Overrides (Background Color Only)
*/
@media (prefers-color-scheme: dark) {
    body {
        /* Change background for dark mode */
        background-color: #121212; 
    }
}

/*
  4. Custom Navigation Link Styles (REVISED SECTION for Alignment)
*/

/* The image is contained inside an <a> tag. We need its width. */
.container > a {
    /* Set the <a> tag to be a block element so it respects width and margin */
    display: block;
}

.link-container {
    /* Use Flexbox to manage the alignment of the child links */
    display: flex;
    
    /* Pushes the first item (About) to the start and the last item (Contact) to the end */
    justify-content: space-between; 
    
    /* Ensure the link container is the same width as the logo image */
    max-width: 90vw;
    max-height: 90vh;
    height: auto; 
    width: auto; /* Allow it to shrink/grow with the image */
    
    margin-top: 15px; /* Space between logo and links */
    
    /* Inherit the positioning of the image's container */
    align-self: center; 
    
    font-family: Arial, sans-serif;
    font-size: 16px;
}

.link-container a {
    color: #999999;
    text-decoration: none;
    /* Remove the old margin since space-between handles the separation now */
    margin: 0; 
}

.link-container a:hover {
    text-decoration: underline;
    color: #999999;
}