*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
 * CSS is just selectors and styles
 * You can target it using one of its CSS classes
 *     .class1 { }
 * or both classes!
 *     .class1.class2 { }
 * or its name
 *     div { }
 * or its id
 *     #anID { }
*/


/* CSS variables. Defined once here, used everywhere */
:root {
	--bg: #fff;
	--fg: #111;
	--muted: #999;
	--gap: 2rem;
}

/* for all in main as otherwise it would break the header img link */
main img {
  pointer-events: none;
}

/*
 * --------------------------------------------------
 * index.html
 * --------------------------------------------------
 */
header img {
  height: 10rem;
  width: auto;
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: 'Georgia', serif;
	padding: 2rem;
}

header {
	padding: 0rem;
	margin-bottom: 4rem;
	/* margin: 0 auto on a block has no effect (already 100% width)
	 * use text-align to center the content inside the block 
	 *
	 * to center a block use margin
	 * to center content inside a block use text-align */
	text-align: center;
}

header a {
  color: var(--fg);
  text-decoration: none; /* removes the link blue */
  font-size: 1rem;
  letter-spacing: 0.02em;
}

header a:hover {
  color: var(--muted);
}

main#grid {
  columns: 3;
  column-gap: var(--gap);
}

.project-thumb {
	display: block; /* not sure about this */
	text-decoration: none;
	color: var(--fg);
	break-inside: avoid; /* not sure about this */
	margin-bottom: var(--gap);
}

.project-thumb img {
  width: 100%; /* 100 pct of the column */
  display: block;
}

.project-thumb span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.project-thumb:hover span {
  color: var(--muted);
}

/*
 * --------------------------------------------------
 * project.html
 * --------------------------------------------------
 */
#project-header {
	padding: 0 2rem 2rem 2rem;
}

#project-header h1 {
	font-size: 1.1rem;
	font-weight: normal;
	letter-spacing: 0.02em;
}

#content {
	max-width: 60%;
	margin: 0 auto; /* 0=top,bottom; auto=left,right*/
}

.description {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--muted);
	max-width: 500px;
	line-height: 1.6;
}

.year {
	font-size: 0.85rem;
	color: var(--muted);
}

main#images {
	columns: 3;
	column-gap: 1rem;
	padding: 0 2rem;
}

main#images img {
	width: 100%;
	display: block; /* what does this mean? */
	margin-bottom: 1rem;
	break-inside: avoid; /* what does this mean? */
}