/* style.css */
body {
	background-color: #000;  /* black background */
  	color: #fff;             /* white text */
  	font-family: Arial, sans-serif;
  	margin: 0;               /* remove default browser margins */
  	padding: 0;
}

footer {
  	border-top: 1px solid #fff;  /* white line across full width */
  	margin-top: 40px;
  	padding-top: 20px;
  	text-align: center;
  	font-size: 0.9em;
}

h1 {
	margin: 0;               /* no extra space above */
  	padding: 20px;           /* space inside the top */
  	text-align: center;      /* keep text centered horizontally */
  	font-size: 2em;
	border-bottom: 1px solid #fff;
	width: 75%;                     /* 75% of the page */
  	margin-left: auto;               /* center it */
  	margin-right: auto;
}

p {
  	text-align: center;
}

/* Home card – scoped so nothing else changes */
.project-highlight {
  max-width: 720px;          /* centers & prevents full-width monster image */
  margin: 28px auto;         /* centers the block */
  padding: 16px;
  border: 1px solid #333;
  border-radius: 10px;
  background: #0a0a0a;
  text-align: left;          /* nicer reading inside the card */
}

.project-highlight a {
  display: block;
  color: inherit;            /* keep text your site color */
  text-decoration: none;     /* kill default blue underline */
}

.project-highlight img {
  display: block;
  width: 100%;               /* fill the card width */
  max-width: 640px;          /* but never exceed 640px */
  height: auto;              /* preserve aspect ratio (no distortion) */
  margin: 0 auto 12px;       /* center image inside the card */
  border-radius: 8px;
}

.project-highlight h2 { 
  margin: 0 0 6px; 
  font-size: 1.4em; 
  text-align: center;   /* ensure heading is centered */
}

.project-highlight p  { 
  margin: 0; 
  color: #bbb; 
  text-align: center;   /* ensure subtext is centered */
}

@media (max-width: 600px) {
  .project-highlight { padding: 12px; }
  .project-highlight img { max-width: 100%; } /* full card width on phones */
}