/*
   -----------------------------------
   Global Resets & Variables
   -----------------------------------
*/
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        /* Ensures padding and border are included in element's total width and height */
    }

    :root {
        /* Colors */
        --color-primary-bg: rgb(0, 20, 42);
        --color-secondary-bg: rgba(23, 0, 69, 0.874);
        /* Header background */
        --color-text-light: whitesmoke;
        --color-text-accent: aliceblue;
        --color-btn-learn: lightgreen;
        --color-btn-normal: rgb(0, 61, 0);
        --color-text-dark: black;

        --color-box-light-bg: rgba(119, 134, 228, 0.244);
        --color-box-dark-bg: rgb(119, 133, 228);

        --color-shadow-light: rgb(209, 232, 255);
        --color-shadow-dark: rgb(61, 0, 147);
        --color-shadow-alt: lightslategray;

        /* Spacing */
        --spacing-xxs: 0.25rem;
        /* 4px */
        --spacing-xs: 0.5rem;
        /* 8px */
        --spacing-sm: 0.75rem;
        /* 12px */
        --spacing-md: 1rem;
        /* 16px */
        --spacing-lg: 1.5rem;
        /* 24px */
        --spacing-xl: 2rem;
        /* 32px */
        --spacing-xxl: 3rem;
        /* 48px */

        /* Border Radii */
        --border-radius-sm: 0.25rem;
        --border-radius-md: 0.4rem;
        --border-radius-lg: 0.6rem;
        --border-radius-xl: 1rem;
        /* Used for the 10% radius that translates to ~22px for a 220px box */

        /* Font Families */
        --font-family-base: sans-serif, Verdana, Geneva, Tahoma;
        --font-family-decorative: cursive, var(--font-family-base);
        /* Cursive as fallback */
    }


    /*
   -----------------------------------
   Base Body Styles
   -----------------------------------
*/
    body {
        background-color: var(--color-primary-bg);
        color: var(--color-text-light);
        font-family: var(--font-family-base);
        /* Prefer a reliable sans-serif as primary */
        font-size: 1rem;
        /* Base font size */
        margin: 0;
        min-height: 100vh;
        /* Ensures body takes at least full viewport height */
        display: flex;
        /* Enables flexbox for overall page layout */
        flex-direction: column;
        /* Stacks content vertically */
    }

    /*
   -----------------------------------
   Header & Navigation
   -----------------------------------
*/
    header {
        background-color: var(--color-secondary-bg);
        color: var(--color-text-accent);
        padding: var(--spacing-sm) var(--spacing-md);
        /* Consistent padding top/bottom & left/right */
        display: flex;
        /* Use flexbox for layout of logo and nav */
        align-items: center;
        /* Vertically aligns logo and nav items */
        justify-content: space-between;
        /* Pushes logo to left, nav to right */
    }

    #logo {
        width: 50px;
        height: auto;
        /* Maintain aspect ratio */
        border-radius: var(--border-radius-md);
        margin: -15px 10px -15px 0;
        /* Removed negative margin - flexbox handles positioning better "WHAT?"*/
    }

    header nav {
        display: flex;
        gap: var(--spacing-sm);
        /* Spacing between nav links */
    }

    nav a {
        color: var(--color-text-accent);
        text-decoration: none;
        padding: var(--spacing-xxs) var(--spacing-xs);
        /* Small padding for clickable area */
        transition: color 0.2s ease;
        /* Smooth transition for hover effect */
    }

    nav a:hover,
    nav a:focus {
        /* Add focus for accessibility */
        color: #c0d0ff;
        /* Slightly lighter on hover/focus */
        outline: none;
        /* Remove default outline, add custom focus style if needed */
    }

    /*
   -----------------------------------
   Buttons
   -----------------------------------
*/
    .btn {
        font-family: var(--font-family-base);
        font-size: 1rem;
        border: none;
        border-radius: var(--border-radius-sm);
        /* Default smaller radius */
        cursor: pointer;
        display: inline-flex;
        /* Use flex for internal content alignment if any, allows centering text */
        align-items: center;
        justify-content: center;
        text-decoration: none;
        /* Ensure no underline if applied to an <a> tag */
        transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    }

    .btn:hover,
    .btn:focus {
        transform: translateY(-1px);
        /* Slight lift effect */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        /* Subtle shadow on hover */
        outline: none;
    }

    .btn-primary {
        /* Renamed from .learn_Btn */
        background-color: var(--color-btn-learn);
        color: var(--color-text-dark);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--border-radius-lg);
        /* Larger radius for primary */
    }

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: darken(var(--color-btn-learn), 10%);
        /* Example: would need SASS/LESS for this function, or use filter below */
        filter: brightness(0.9);
        /* A CSS way to slightly darken */
    }

    .btn-secondary {
        /* Renamed from .normal_btn */
        background-color: var(--color-btn-normal);
        color: var(--color-text-light);
        /* Changed to light for better contrast */
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius-md);
        /* Medium radius */
    }

    .btn-secondary:hover,
    .btn-secondary:focus {
        filter: brightness(1.2);
        /* Make it slightly lighter */
    }


    /*
   -----------------------------------
   Containers & Boxes
   -----------------------------------
*/
    .main-content-container {
        /* Renamed from .container */
        display: flex;
        justify-content: center;
        /* Center items if they don't fill space, or spread them */
        align-items: flex-start;
        /* Align items to the top */
        flex-wrap: wrap;
        /* Allows items to wrap to the next line on smaller screens */
        gap: var(--spacing-md);
        /* Consistent spacing between boxes */
        max-width: 1500px;
        /* Limits the overall width of the content area */
        margin: var(--spacing-lg) auto;
        /* Centers the container horizontally and adds top/bottom margin */
        padding: 0 var(--spacing-md);
        /* Adds horizontal padding to prevent content from touching screen edges */
    }

    /* Base style for all 'box' elements */
    .box {
        background-color: var(--color-box-light-bg);
        /* Default background */
        box-shadow: 3px 3px 5px var(--color-shadow-alt), 5px 5px 5px var(--color-shadow-dark);
        border-radius: var(--border-radius-xl);
        /* Applies to all boxes */
        padding: var(--spacing-md);
        /* Internal padding for content */
        display: flex;
        /* Make boxes flex containers to center their content easily */
        flex-direction: column;
        /* Stack content inside vertically */
        justify-content: center;
        align-items: center;
        text-align: center;
        /* For text content inside */
    }

    .box-mid {
        /* Renamed from .mid-box */
        width: 220px;
        height: 220px;
        /* Already has default background and shadow from .box */
    }

    .box-large {
        /* Renamed from .mid-box-b */
        width: 456px;
        height: 210px;
        /* Override default background */
    }

    .box-full-width {
        /* Renamed from .bottom */
        width: 1400px;
        /* Take full width of its parent (.main-content-container) */
        max-width: 1470px;
        /* If original intended this as a hard limit for the box itself */
        height: 100px;
    }

    /*
   -----------------------------------
   Image Styles
   -----------------------------------
*/
    .square-img {
        width: 72%;
        /* Percentage of parent width */
        aspect-ratio: 1/1;
        /* Forces a square shape */
        object-fit: cover;
        /* Fills the square without distorting, cropping as needed */
        display: block;
        /* Removes extra space under image if it's inline */
        /* If parent is .box (which is flex), this will be centered by parent's justify/align */
    }

    /*
   -----------------------------------
   Footer
   -----------------------------------
*/
    footer {
        color: var(--color-text-light);
        /* Consistent text color */
        text-align: center;
        padding: var(--spacing-sm) 0;
        margin-top: auto;
        /* Pushes footer to the bottom of the flex column (body) */
        background: #333;
        /* Specific dark background */
    }

    /*
   -----------------------------------
   Responsive Adjustments (Basic Example)
   -----------------------------------
*/
    @media (max-width: 768px) {
        .main-content-container {
            flex-direction: column;
            /* Stack boxes vertically on smaller screens */
            align-items: center;
            /* Center stacked boxes */
        }

        .box-mid,
        .box-large,
        .box-full-width {
            width: 90%;
            /* Make boxes take more width on smaller screens */
            height: auto;
            /* Let height adjust naturally, or set min-height */
            min-height: 150px;
            /* Ensure a minimum height for smaller boxes */
        }

        .box-full-width {
            max-width: 90%;
            /* Also apply max-width to the full width box */
        }

        header {
            flex-direction: column;
            /* Stack logo and nav vertically */
            align-items: flex-start;
            /* Align to the left */
            padding: var(--spacing-sm);
        }

        header nav {
            width: 100%;
            justify-content: space-around;
            /* Distribute nav links */
            margin-top: var(--spacing-xs);
        }
    }

    @media (max-width: 480px) {
        .btn {
            padding: var(--spacing-xs);
            /* Smaller padding for buttons on very small screens */
            font-size: 0.9rem;
        }
    }