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

:root {
  background-color: white;
}

body {
  font-family: 'QueulatCndSoft', 'Georgia', serif;
  font-kerning: normal;
  font-size: 100%;
  font-variant-ligatures: common-ligatures;
  line-height: 1.444;
  margin: 0 auto;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[tabindex="-1"]:focus {
  outline: 0;
}


h1 {
	/* color: rgb(235,29,37); */
	color: rgb(255,120,0);
	font-family: 'QueulatCndSoft', Georgia, serif;
	font-size: 3rem;
	font-style: italic;
	font-weight: 100;
}

h1 {
	line-height: 1;
}

h2 {
	font-size: 1.5rem;
	font-weight: 400;
	margin: 0;
}

h3, h4 {
	font-size: 1rem;
	font-weight: 500;
	margin: 0;
}

#portfolio h2 {
	font-size: 2rem;
	font-style: italic;
	font-weight: 100;
}

#portfolio h2:nth-of-type(2) {
	margin-top: 2rem;
}

#portfolio h3 {
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 100;
}

h3 .daterange, h4 .daterange {
	font-weight: 400;
}

details > summary {
	cursor: pointer;
}

details h3, details h4 {
	display: inline;
}

/*details > summary::-webkit-details-marker {
	display: none;
}*/

a, li.active a:hover {
	color: #111;
}
a:hover {
	/*color: rgb(235,29,37); */
	color: rgb(255,120,0);
	text-decoration: none;
}
a.highlight {
	color: rgb(255,120,0);
}
li.active a {
	text-decoration: none;
}
li.active a:hover {
	cursor: default;
}


p {
	margin: 0 0 1.5rem;
}
p.media {
	margin-bottom: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.positions {
	margin: 0;
}
ul.links {
	margin-top: 1rem;
}
nav li {
	display: inline;
	margin: 0 1rem 0.25rem 0;
}
#archive li {
	display: block;
	margin: 0 0 0.25rem;
}
#archive nav {
	margin-bottom: 1.25rem;
}
nav li {
	font-size: 1.25rem;
}

.positions li {
	font-style: italic;
}
.daterange::before {
	content: "• ";
}

footer {
	font-size: 0.75rem;
	line-height: 2;
}

.portfolioItem {
	border: 1px solid #efefef;
	border-radius: 10px;
	margin-bottom: 1rem;
	overflow: hidden;
}

/*.portfolioItem:last-child {
	border: none;
	border-radius: 0px;
}*/

.portfolioItem p {
	margin: 0 0 0.5rem;
}
.portfolioItem span {
	display: block;
	padding: 0 0.5rem;
}

#portfolio img, #portfolio video {
	height: auto;
	max-width: 100%;
}

#portfolio img.poster {
	border: 1px solid #efefef;
	border-radius: 10px;
}

[aria-hidden="true"] {
	display: none;
}


@media screen {
	body > * {
    	margin-bottom: 1rem;
    	max-width: 65ch;
    }
	body > header {
		grid-area: header;
	}
	body > h2 {
		grid-area: pageTitle;
	}
	body > nav {
		grid-area: navigation;
	}
	body > main {
		grid-area: main;
	}

	body > footer {
		grid-area: footer;
	}
	.resumeSection > h2 {
		grid-area: sectionHeader;
	}
	.resumeSetion > .resumeContent {
		grid-area: sectionContent;
	}
	#aboutDescription {
		grid-area: aboutDescription;
	}
	#personalSites {
		grid-area: personalSites;	
	}
	#otherProjects {
		grid-area: otherProjects;	
	}
	body > #resume {
		max-width: 90ch
	}

	body {
		color: black;
		display: grid;
		grid-gap: 1rem;
		gap: 1rem;
		grid-template-columns: 1fr; 
		max-width: 65ch;
		padding: 0 2rem 1rem;
	}
	body {
		grid-template-areas:
			"header"
			"navigation"
			"main"
			"footer";
	}
	body#archive main {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"aboutDescription"
			"personalSites"
			"otherProjects";
	}
	body .resumeSection {
		display: grid;
		grid-gap: 1rem;
		gap: 1rem;
		grid-template-columns: 1fr;
		grid-template-areas:
			"sectionHeader"
			"sectionContent"
	}
	body > header {
		max-width: 100%;
	}
}

@supports (display: grid) {
	body {
		max-width: 100%;
	}
}

@media (min-width: 600px) {
	body#portfolioIndex main {
		display: grid;
		grid-gap: 1rem;
		gap: 1rem;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			". .";
	}
	body#archive main {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"aboutDescription aboutDescription"
			"personalSites otherProjects";
	}
	.portfolioItem {
		margin-bottom: 0;
	}
	#portfolio h2 {
		grid-column: 1 / span 2;
	}
	#archive li {
		display: block;
		margin: 0 0 0.25rem;
	}
    /*h1 {
		font-size: 3.25rem;
	}*/
}

@media (min-width: 800px) {
	body {
		grid-template-areas:
			"header header"
			"main navigation"
			"footer footer";
		grid-template-columns: 9fr 3fr;
		max-width: 80%;
	}
}

@media (min-width: 1000px) {
    body {
		grid-template-areas:
			"header header"
			"main navigation"
			"footer footer";
		grid-template-columns: 9fr 3fr;
		max-width: 70%;
    }
    body#portfolioIndex main {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			". . .";
		max-width: 100%;
	}
	body#archive main {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"aboutDescription aboutDescription"
			"personalSites otherProjects";
	}
	#portfolio h2 {
		grid-column: 1 / span 3;
	}
	#resume .resumeSection {
		display: grid;
		grid-gap: 1rem;
		gap: 1rem;
		grid-template-columns: 20% 1fr;
		grid-template-areas:
			"sectionHeader sectionContent";
	}
    #resume h2 {
	    font-size: 1rem;
	    margin: 0;
    }
    
	#aboutLink a::before {
		content: "Learn more ";
	}
	#portfolioLink a::before {
		content: "Check out my ";
	}
	
	#resumeLink a::before {
		content: "Read my ";
	}
	#linkedInLink a::before {
		content: "Find me on ";
	}
	li.active {
		display: none;
	}
	
	nav li {
		display: block;
		margin: 0 0 0.25rem;
	}
	/*nav ul:first-child {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}*/
	nav li {
		font-size: 1rem;
	}
	.nav li {
		text-transform: lowercase;
	}
	.nav li::first-letter {
		text-transform: capitalize;
	}
	nav li::after {
		content: ".";
	}
	#archive nav li::after {
		content: "";
	}
	/*
	.nav li:first-child::first-letter {
		text-transform: capitalize;
	}
	.nav li:first-child::after {
		content: ", or "
	}
	nav li:last-child::after {
		content: ".";
	}
	*/
	#portfolio img.thirds {
	width: 32%;
	}
	#portfolio img.halves {
		width: 49%;
	}
	
}

@media print {
  body {
    color: hsl(0, 0%, 0%);
    font-size: 10pt;
  }

  a {
    color: inherit;
  }

  a[href^="http"]::after {
    color: hsl(0, 0%, 40%);
    content: " <" attr(href) ">";
  }

  a[href^="/"]::after {
    color: hsl(0, 0%, 40%);
    content: " <http://timothymills.net" attr(href) ">";
  }

  h2 {
    page-break-after: avoid;
  }

  li {
    page-break-inside: avoid;
  }

  #fb-root {
    display: none;
  }
}

@page {
  size: 8.5in 11in;
  margin: .5in;
}