* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            
            /*
            
            
            
            /* Base Body Styles */
            body {
                font-family: Arial, Helvetica, sans-serif;
                /* 
                    FONT STACKS:
                    This is a "font stack" - the browser tries each font in order:
                    1. Arial (if available)
                    2. Helvetica (if Arial isn't available)
                    3. Any sans-serif font (fallback)
                    
                    You can customize this! Examples:
                    - font-family: 'Georgia', 'Times New Roman', serif; (serif fonts)
                    - font-family: 'Courier New', monospace; (monospace for code)
                */
                
                line-height: 1.6;
                /* 
                
                */
                
                color: #333;
                /* 
                
                */
            }
            
            /* 
                ========================================
                HEADER STYLES
                ========================================
                
                The header typically contains site branding (title, logo) and
                sometimes navigation. It's usually at the top of every page.
            */
            header {
                background-color: #2563eb;
                /* 
                
                    BACKGROUND COLOR:
                    #2563eb is a blue color. You can change this to:
                    - Any hex color: #ff5733 (orange), #28a745 (green), etc.
                    - Named colors: blue, green, purple, etc.
                    - rgb/rgba: rgb(37, 99, 235) or rgba(37, 99, 235, 0.9)
                    TIP: Use a color picker tool or browser DevTools to find colors you like!
                */
                
                color: white;
                /* Text color - white works well on dark backgrounds */
                
                padding: 2rem 0;
                /* 
                    PADDING:
                    2rem = 2 times the base font size (usually 32px)
                    The "0" means no left/right padding
                    You can adjust: 1rem (small), 3rem (large), etc.
                */
                
                text-align: center;
                /* Centers all text inside the header */
            }
            
            header h1 {
                margin-bottom: 0.5rem;
                /* Adds small space below the heading */
            }
            
            /* 
                ========================================
                NAVIGATION STYLES
                ========================================
                
                Navigation should be easy to use and clearly visible.
                Good navigation helps users find what they're looking for.
            */
            nav {
                background-color: #1e40af;
                /* Slightly darker blue than header for visual distinction */
                
                padding: 1rem 0;
                /* Vertical padding for the navigation bar */
            }
            
            nav ul {
                list-style: none;
                /* Removes default bullet points from list */
                
                display: flex;
                /* 
                    FLEXBOX:
                    Makes the list items arrange horizontally (in a row).
                    Without flexbox, list items stack vertically.
                */
                
                justify-content: center;
                /* Centers the navigation items */
                
                gap: 2rem;
                /* 
                    GAP:
                    Creates consistent spacing between navigation items.
                    Much easier than using margins! Only works with flexbox/grid.
                */
            }
            
            nav a {
                color: white;
                text-decoration: none;
                /* Removes the default underline from links */
                
                padding: 0.5rem 1rem;
                /* 
                    CLICKABLE AREA:
                    Padding creates a larger clickable area around each link.
                    This is especially important for mobile devices - bigger
                    targets are easier to tap!
                */
            }
            
            nav a:hover {
                background-color: rgba(255, 255, 255, 0.1);
                /* 
                    HOVER EFFECT:
                    When users move their mouse over a link, it gets a
                    semi-transparent white background. This provides visual
                    feedback that the link is interactive.
                    
                    rgba(255, 255, 255, 0.1) means:
                    - Red: 255, Green: 255, Blue: 255 (white)
                    - Alpha: 0.1 (10% opacity - mostly transparent)
                */
            }
            
            /* 
                ========================================
                MAIN CONTENT AREA
                ========================================
                
                The main element contains the primary content of the page.
                This is where your actual content (articles, sections, etc.) goes.
            */
            main {
                max-width: 1200px;
                
                
                
                
                margin: 0 auto;
                /* 
                    CENTERING:
                    margin: 0 auto is a common CSS trick to center elements:
                    - 0 = no top/bottom margin
                    - auto = equal left/right margins (centers it!)
                    
                    This only works when the element has a defined width (or max-width).
                */
                
                padding: 2rem;
                /* Adds space inside the main container */
            }
            
            /* Section Spacing */
            section {
                margin: 2rem 0;
                /* 
                    SPACING BETWEEN SECTIONS:
                    Creates consistent vertical spacing. The format is:
                    margin: [top/bottom] [left/right]
                    
                    You could also write:
                    - margin-top: 2rem; margin-bottom: 2rem;
                    - margin: 3rem 0; (more space)
                    - margin: 1rem 0; (less space)
                */
            }
            
            /* Section Headings */
            h2 {
                color: #2563eb;
                /* Matches the header color for consistency */
                
                margin-bottom: 1rem;
                /* Space below the heading before content starts */
            }
            
            /* Paragraphs */
            p {
                margin-bottom: 1rem;
                /* 
            
                */
            }
            img {
                width: 250px;
                height: auto;
                display: block;
            }

            /* 
                ========================================
                FOOTER STYLES
                ========================================
                
                The footer typically appears at the bottom of every page and contains:
                - Copyright information
                - Contact details
                - Additional navigation links
                - Social media links
            */
            footer {
                background-color: #1f2937;
                /* Dark gray/charcoal color for contrast */
                
                color: white;
                /* White text on dark background */
                
                text-align: center;
                padding: 2rem 0;
                margin-top: 3rem;
                /* Pushes footer away from main content */
            }
            
            /* 
                ========================================
                RESPONSIVE DESIGN (MOBILE-FIRST)
                ========================================
                
                Media queries let you change styles based on screen size.
                This is essential for making your site work on phones and tablets!
            */
            @media (max-width: 768px) {
                /* 
                    WHEN DO THESE STYLES APPLY?
                    When the screen width is 768 pixels or less (typically phones/tablets).
                    
                    Common breakpoints:
                    - 768px (tablets in portrait)
                    - 480px (small phones)
                    - 1024px (tablets in landscape)
                    
                    You can test this by resizing your browser window!
                */
                
                nav ul {
                    flex-direction: column;
                    /* 
                        VERTICAL NAVIGATION:
                        Changes navigation from horizontal (row) to vertical (column).
                        Stacking links vertically makes them easier to tap on mobile.
                    */
                    
                    gap: 0.5rem;
                    /* Smaller gap between links on mobile */
                }
                
                main {
                    padding: 1rem;
                    /* 
                */
            }
        }          
           table {
                  width: 100%;
             border-collapse: collapse;
                        margin-top: 20px;
                      }

           th, td {
             border: 1px solid #ccc;
             padding: 10px;
           }

           th {
             background-color: #222;
             color: white;
           }

           tr:nth-child(even) {
  background-color: #f2f2f2;
}