body {
    /* Uses Flexbox to align the main layout */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers all sections and blocks horizontally */
    
    /* Centers text, headings, and inline elements (like your badge images) */
    text-align: center;
    
    /* Removes the default browser margin so things look clean */
    margin: 0;
    
    /* Adds a little breathing room around the edges of the screen */
    padding: 20px; 
}

/* Constrain the width so the text doesn't stretch too far on wide screens */
section {
    max-width: 800px;
    width: 100%;
}

/* Define Tokyo Night colors for the whole document */
:root {
    --tokyo-bg: #1a1b26;       /* Deep dark blue background */
    --tokyo-card: #24283b;     /* Slightly lighter blue for the project cards */
    --tokyo-text: #c0caf5;     /* Soft, readable blue-white text */
    --tokyo-border: #414868;   /* Subtle border color */
    
    --tokyo-purple: #bb9af7;   /* Tokyo Night purple */
    --tokyo-orange: #ff9e64;   /* Tokyo Night orange */
    --tokyo-blue: #7aa2f7;     /* Tokyo Night blue */
	--tokyo-cyan: #7dcfff;     /* For project titles */
    --tokyo-green: #9ece6a;
}

/* Apply the background and text color to the whole page */
body {
    background-color: var(--tokyo-bg);
    color: var(--tokyo-text);
}

/* Card Titles (h3) */
article h3 {
    color: var(--tokyo-cyan); 
}

/* Descriptions (paragraphs) */
article p {
    color: var(--tokyo-text); /* Uses the soft white/blue from the theme */
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Tech Stack list items */
article li {
    color: var(--tokyo-green); /* Tech stack content gets a new color */
    margin-bottom: 10px;
}

/* The bold 'Tech:' label */
article strong {
    color: var(--tokyo-purple);
}
/* Apply purple specifically to h2 titles */
h2 {
    color: var(--tokyo-purple);
}

/* Apply blue to all general links */
a {
    color: var(--tokyo-blue);
    text-decoration: none; /* Keeps it clean without the default underline */
}

a:hover {
    text-decoration: underline; /* Adds the underline back when hovering */
}

ul {
    /* Makes the list wrap tightly around its content instead of stretching across the screen */
    display: inline-block;
    
    /* Aligns the text (and bullets) to the left edge of this tight block */
    text-align: left;
    
    /* Puts the bullets back on the outside so the text aligns perfectly straight */
    list-style-position: outside; 
}

/* ========================================= */
/* Project Card Specific Styling             */
/* ========================================= */

article {
    background-color: var(--tokyo-card);
    border: 1px solid var(--tokyo-border);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    
    /* Adds a very subtle dark shadow to lift the card off the background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Give the paragraph better line height for readability */
article p {
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Make the bold 'Tech:' text stand out more by matching your headers */
article strong {
    color: var(--tokyo-purple);
}

/* Space out list items */
article li {
    margin-bottom: 10px;
}

/* Make your "View Source Code" links pop with the Tokyo Night accent blue and center them */
/* Update this block in your style.css */
article a {
    display: block; /* Forces the link to drop to its own line */
    margin-top: 15px; 
    color: var(--tokyo-blue);
    text-decoration: none;
}

article a:hover {
    text-decoration: underline;
}

/* Color the main greeting title */
h1 {
    color: var(--tokyo-blue);
}

/* Color the 'Tech Stack & Tools' subtitle */
#about h3 {
    color: var(--tokyo-cyan);
}

/* Color the tech stack list items green */
#about li {
    color: var(--tokyo-green);
    margin-bottom: 10px;
}

/* Color the bold labels (Languages, DevOps & Tools, etc.) purple */
#about strong {
    color: var(--tokyo-purple);
}