@media screen and (max-width: 600px) {
	.main {
		/* make it bigger on small screens */
		width: 80%;
		padding: 18px;
		/* allow word wrap? */
		word-wrap: break-word;
	}

	.title {
		font-size: 28pt;
	}

	.sectionTitle {
		font-size: 14pt;
	}

	.subtitle {
		font-size: 18pt;
	}

	.columns {
		/* make 2 columns */
		display: flex;
		justify-content: space-between;
		/* change to vertical stacking if screen is small */
		flex-direction: column-reverse;
	}

	.nav--desktop {
		display: none;
	}

	.nav--mobile {
		display: flex;
		flex-direction: row;
	}

	.nav__mobileMenu {
		/* make the menu items vertical and centered */
		display: none;
		flex-direction: column;
		padding: 12px;
		text-align: center;

		/* on its own row in the flexbox */
		width: 100%;
	}

}

@media screen and (min-width: 600px) {
	.main {
		/* normal size */
		width: 60%;
		padding: 48px;
	}

	.title {
		font-size: 42pt;
	}

	.sectionTitle {
		/* font */
		font-size: 18pt;
	}

	.subtitle {
		/* font */
		font-size: 24pt;
	}

	.columns {
		/* make 2 columns */
		display: flex;
		justify-content: space-between;
		flex-direction: row;

		/* space in between columns */
		column-gap: 24px;
	}
	
	.columns__col {
		max-width: 30rem;
	}

	.nav--desktop{
		/* responsive display */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.nav__mobileWrap {
		display: none;
	}

	.nav__mobileMenu {
		display: none;
	}
}

.site {
	/* font across all pages */
	font-family: "Roboto Mono", monospace;
	font-weight: 400;
	font-style: normal;

	margin: 0;
}

.main {
	/* margins, center align */
	margin: 0px auto;

	/* take up the entire page so footer stays at the bottom */
	min-height: 80%;
}

.site {
	/* background across regular pages */
	background-color: #f4f0f8;
}

.siteIcon--medium {
	/* resize icon */
	width: 24px;
}

.title {
	/* font */
	font-family: "Roboto Slab", serif;
	font-weight: 400;
	font-style: normal;
}

.sectionTitle {
	/* font */
	font-family: "Roboto Slab", serif;
}

.sectionTitle--collapsible {
	/* change pointer to indicate accordion */
	cursor: pointer;
	text-decoration: underline;
}

.sectionBody {
	/* font */
	font-size: 12pt;
}

.nav {
	/* leave space around content */
	padding: 16px;
	margin: 0;

	/* dividing border */
	border-bottom: 2px solid #7d7585;
}

.nav__left {
	/* keep links to the very right */
	flex-grow: 1;
}

.nav__right {
	/* links also flexbox */
	display: flex;
	
}

.nav__siteIcon {
	padding-left: 12px;
	padding-right: 12px;
}

.nav__hamburger,
.nav__close {
	/* make icon larger */
	color: #000000;
	font-size: 14pt;
	padding: 4px 8px;
}

.navTab {
	/* pad links in navigation */
	padding-left: 12px;
	padding-right: 12px;
}

.navTab--home {
	/* site title is bigger */
	font-size: 14pt;

	/* icon and title also flexbox */
	display: flex;

	/* make it not look like a link */
	color: #000000;
	text-decoration: none;
}

.navTab--mobile {
	/* add padding and margin to mobile menu items */
	padding: 8px;
	margin: 0px auto;

	/* make text same size as home icon */
	font-size: 14pt
}

.footer {
	/* border */
	border-top: 2px solid #7d7585;

	/* spacing and centre */
	margin: 0;
	padding: 12px;
	text-align: center;
}

.copyright {
	/* small text */
	font-size: 9pt;
}

.construction {
	/* border */
	border: solid #e6c317 2px;
	border-radius: 10px;

	/* background */
	background-color: #eee3ae;

	/* flex display */
	display: flex;
	flex-direction: row;
	align-items: center;

	/* make it only be as wide as it needs */
	padding: 8px;
	max-width: fit-content;
}

.construction__icon {
	/* make it big */
	font-size: 48px;

	/* spacing */
	margin: 12px;
}

.construction__text {
	/* spacing */
	margin: 12px;
}

.img--me {
	/* resize */
	width: 200px;

	/* round it */
	border-radius: 50%;

	/* align top with text */
	/* margin-top: 48px; */
}

.img--jeff {
	/* resize */
	width: 200px;

	/* centre on page */
	margin: 24px 0px;
}

.project {
	/* dashed border */
	border: dashed 2px #693d94;
	border-radius: 10px;

	/* padding and margin */
	padding: 24px;
	margin-top: 12px;
	margin-bottom: 24px;

	/* make it the size of the main part */
	max-width: inherit;
}

.projectTitle {
	/* remove spacing */
	margin: 0px;
}

.projectImg {
	/* keep it half the size of the section */
	max-width: 50%;
}

.projectLinks {
	/* add spacing */
	margin: 8px 0px;
}

.projectTools {
	/* make it small */
	font-size: 10pt;
	font-style: italic;

	/* closer to title than description */
	margin-top: 4px;
}

.link {
	/* make links purple */
	color: #693d94;
}

.linkList {
	display: none;
}

.linkList__item {
	line-height: 1.5em;
}

.links__item {
	/* make list item icon and text aligned */
	display: flex;
	align-items: center;

	/* space out a bit */
	padding: 2px 0px;
}