@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Source+Sans+3:wght@300;400;600&display=swap');
--text-secondary: #9898a6;
--accent-dim: rgba(0, 194, 255, 0.15);
--accent-glow: rgba(0, 194, 255, 0.4);
--font-heading: 'Syne', sans-serif;
--font-body: 'Source Sans 3', sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
background-color: rgba(9, 9, 15, 0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
color: var(--text-secondary);
font-family: var(--font-heading);
text-transform: uppercase;
transition: color 0.3s ease;
font-family: var(--font-heading);
color: var(--text-primary);
font-family: var(--font-heading);
background: linear-gradient(135deg, var(--accent), #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--text-secondary);
background-color: var(--accent);
color: var(--bg-primary);
font-family: var(--font-heading);
transition: box-shadow 0.3s ease, transform 0.2s ease;
box-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-dim);
transform: translateY(-2px);
border-left: 3px solid var(--accent);
color: var(--text-secondary);
background-color: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.06);
color: var(--text-secondary);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
transition: border-color 0.3s ease;
border-color: var(--accent-dim);
background-color: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: transform 0.2s ease, box-shadow 0.3s ease;
#site-sections article:hover {
transform: translateY(-3px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
font-family: var(--font-heading);
color: var(--text-secondary);
text-decoration: underline;
color: var(--text-secondary);
border-top: 1px solid rgba(255, 255, 255, 0.06);
@media (max-width: 700px) {
Explanation: This is my CSS file that covers the full homepage styling. I choose a dark theme with a cyan accent and used CSS variables throughout in case I decide on swapping colors around later. I established a fixed navbar that stays visible as the user scrolls through the website. The stats section uses the flex-wrap property so the cards stack on smaller screens. Other touches I included were gradient and glowing effects on text and buttons. Media queries were also included for smaller screens. I used AI to refine the CSS I wrote out. It gave me suggested design choices for things like colors and text sizes and also helped me debug some styling issues that came up (say, things like overflow issues). In my next project, I plan on including a link to the website so the HTML and linked CSS become visible. I also plan on working out the other site pages.