@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 300;
  src: url("/fonts/Inter-Light-BETA.woff2") format("woff2"),
       url("/fonts/Inter-Light-BETA.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 300;
  src: url("Inter-LightItalic-BETA.woff2") format("woff2"),
       url("Inter-LightItalic-BETA.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  src: url("/fonts/Inter-Regular.woff2") format("woff2"),
       url("/fonts/Inter-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  src: url("/fonts/Inter-Regular.woff2") format("woff2"),
       url("/fonts/Inter-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  src: url("Inter-Italic.woff2") format("woff2"),
       url("Inter-Italic.woff") format("woff");
}

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  src: url("/fonts/Inter-Bold.woff2") format("woff2"),
       url("/fonts/Inter-Bold.woff") format("woff");
}

p {
	font-size: 18px;
	line-height: 130%;
}

em {
	font-style: italic;
}

strong {
	font-weight: 700;
}

li {
	font-size: 18px;
}

p, li {
	color: #3A403F;
	font-family: Inter, "Helvetica", sans-serif;
	font-weight: 400;
}

h1, h2, h3 {
	font-family: Inter;
	font-weight: 700;
	padding: 0px;
	margin: 0px;
}

h1 {
	color: #44C0AA;
	font-size: 36px;
	margin: 24px 0px 48px 0px;
}

h2 {
	font-size: 24px;
	margin-bottom: 24px;
}

h3 {
	font-size: 18px;
}

a {
	color: #3A403F;	
}

a:hover {
	text-decoration: underline;
	text-decoration-thickness: .125em;
  	text-underline-offset: 3px;
}

body a {
	font-family: Inter;
	font-weight: 700;
	text-decoration: none;
	color: #44C0AA;
}

body {
	margin: auto;
	max-width: 1440px;
}

nav ul li {
	display: inline;
	margin: 16px;
}


nav {
	display: flex;
	max-width: 1280px;
	margin: auto;
	margin: 40px 80px 80px 80px;
}

blockquote {
	border-left: 1px solid #EAEAEA;
	padding: 16px 0px;
	margin: 32px;
}

blockquote p {
	margin-bottom: 0px !important;
	color: #7C8886;
}

hr {
	border: 0.5px solid #EAEAEA;
	margin: 64px 0px;
}

#siteName {
	border-left: 1px solid #EAEAEA;
	padding: 16px 16px 16px 32px;
}

#siteName {
	display: flex;
	align-items: center;
}

#siteName h2, #siteName p {
	margin: 0px;
	padding: 0px;
}

#siteName h2 {
	width: 120px;
	font-size: 28px;
	color: #44C0AA;
}

#siteName p {
	width: 72px;
	margin-left: 32px;
	font-weight: 300;
	color: #7C8886;
}

#navItems {
	margin-left: auto;
	align-self: center;
}

#navItems a {
	color: #7C8886;
}

#navItems a:hover {
	color: #44C0AA;
	text-decoration: none;
}

.activeNavItem {
	color: #44C0AA !important; 
}

#navContact {
	align-self: center;
	margin-left: 24px;
	display: flex;
}

#navContact a {
	margin-left: 8px;
}

footer .icon {
	margin-right: 8px;
}

#homeLink:hover {
	text-decoration: none;
}

.homeGrid {
	height: 100vh;
	margin: auto;
	justify-content: center;
	align-items: center;
}

.homeContainer {
	height: 100vh;
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto auto;
	align-content: center;
}

.container {
	max-width: 840px;
	margin: auto;
	margin-bottom: 160px;
}

.container h1 {
	color: #3A403F;
}

.container h2 {
	color: #3A403F;
	margin: 40px 0px 32px 0px;
	padding: 0px 32px;
	margin-right: 56px;
}

.container h3 {
	color: #7C8886;
	font-weight: 300;
	font-size: 22px;
	margin: 0px 0px 16px 0px;
	padding: 0px 32px;
	margin-right: 56px;	
}

.container p {
	line-height: 180%;
	margin: 0px 0px 32px 0px;
	padding: 0px 32px;
	margin-right: 56px;
}

.container ul {
	margin: 0px 0px 32px 32px;
	padding: 0px 32px;
	margin-right: 56px;
}

.container ol {
	margin: 0px 0px 32px 32px;
	padding: 0px 32px;
	margin-right: 56px;
}

.container li {
	line-height: 180%;		
}

.container img {
	margin: 16px 0px 32px 0px;
	max-width: 840px;
	width: 100%;
}

#bio {
	grid-column: 1;
	grid-row: 1;
	min-width: 200px;
	border-left: 1px solid #EAEAEA;
	padding: 16px 16px 16px 32px;
	margin: 80px;
}

#bio p {
	max-width: 438px;
}

#previews {
	grid-column: 2;
	grid-row: 1;
	margin: 80px 80px 0px 0px;
}

#postsPreview {
	border-left: 1px solid #EAEAEA;
	padding: 16px 16px 16px 32px;
	margin: 0px 16px 16px 16px;
	margin-bottom: 64px;

}


#postsPreview h2 a {
	color: #3A403F;
}


#topicsPreview {
	border-left: 1px solid #EAEAEA;
	padding: 16px 16px 16px 32px;
	margin: 16px;
}


#topicsPreview h2 a {
	color: #3A403F;
}

.articleCardHome {
	display: flex;
	padding: 0px;
	margin-bottom: 16px;
}


.articleCardHome p {
	color: #7C8886;
	margin: 0px;
	font-weight: 400;
}

.articleCardHome h3 {
	width: 260px;
	margin: 0px 16px 0px 0px;
	color: #44C0AA;
}

.articleCard {
	margin-bottom: 32px;
	border-left: 1px solid #EAEAEA;
	margin: 16px 16px 16px 0px;
	padding: 16px 16px 16px 32px;	
}

.testClass {
	border: 1px solid red;
}

.articleCard p {
	color: #7C8886;
	font-size: 13px;
	margin: 0px 0px 16px 0px;
	font-weight: 400;
	padding: 0px;
	line-height: 130%;
}

.articleCard h1 {
	color: #44C0AA;
	padding: 0px;
	margin: 0px 0px 16px 0px;
}

.articleCard h2 {
	margin: 0px 16px 16px 0px;
	padding: 0px;
	color: #44C0AA;
}

.articleCard ul {
	margin: 0px;
	padding: 0px;
}

.articleCard li {
	line-height: 130%;
}

.featureImage {
	margin-bottom: 40px;
}

.topicList {
	list-style: none;
}

.topicList a li {
	display: inline-block;
	background-color: #EAEAEA;
	border-radius: 8px;
	padding: 4px 8px 4px 8px;
	margin: 0px 8px 8px 0px;
	font-weight: 300;
	font-size: 13px;
	color: #3A403F;
}

.topicList a li:hover {
	text-decoration: none;
	background-color: #3A403F;
	color: #EAEAEA;
}

.topicList a {
	text-decoration: none;
}

.topicListing {
	list-style: none;
	margin-left: 0px !important;
}

.topicListing li {
	display: inline;
	float: left;
	clear: left;
	list-style: none;
	background-color: #EAEAEA;
	border-radius: 8px;
	padding: 4px 16px 4px 16px;
	margin-bottom: 16px;
	line-height: 130% !important;
}

.topicListing a {
	font-family: Inter;
	font-weight: 300;
	color: #3A403F;
}

.topic:hover {
	text-decoration: none;
	background-color: #3A403F;
	color: #EAEAEA;
}

ul {
	padding: 0px;
}

.subtitle {
	font-size: 22px;
	line-height: 130%;
	clear: left;
}

#profilePicture {
	float: left;
	border-radius: 100%;
	width: 136px;
	height: 136px;
	margin: 0px 24px 24px 0px;
}

.icon {
	width: 40px;
	height: 40px;
	background-color: #EAEAEA;
	border-radius: 100%;
}

.icon:hover {
	background-color: #7C8886;
}

.icon:hover path, .icon:hover polygon {
	fill: #EAEAEA;
}

.iconPath {
	width: 40px;
	height: 40px;
}

.iconPath path, .iconPath polygon {
	fill: #7C8886;
}

footer {
	display: flex;
	align-items: center;
	grid-column: 1;
	grid-row: 2;
	grid-area: 2 / 1 / 2 / 3;
	margin: 40px 80px 80px 80px;
	border-left: 1px solid #EAEAEA;
	padding: 16px 0px 16px 32px;
}

footer ul {
	display: flex;
	list-style: none;
	margin: 0px;
}

footer li {
	padding: 0px;
	margin: 0px;
}

#cookies {
	margin-left: auto;
}

#cookies a {
	color: #3A403F;
	font-size: 13px;
	font-family: Inter;
	font-weight: 700;
}

@media only screen and (max-width: 1120px) {

	.container p {
		margin-right: 0px;
	}

	.homeContainer {
		height: auto;
		margin: auto;
		width: auto;
		display: grid;
		grid-template-rows: auto auto auto;
		grid-template-columns: auto;
	}

	#bio {
		grid-column: 1;
		grid-row: 1;
		min-width: 200px;
		border-left: 1px solid #EAEAEA;
		padding: 16px 16px 16px 32px;
		margin: 80px 80px 40px 80px;
	}

	#bio p {
		max-width: 720px;
	}

	#previews {
		grid-column: 1;
		grid-row: 2;
		margin: 0px 80px;
	}

	.container h1 {
		margin-left: 32px;
	}

	.container ul {
		margin-right: 0px;
	}

	.articleCard h1 {
		margin-left: 0px;
	}

	#postsPreview {
		border-left: 1px solid #EAEAEA;
		padding: 16px 16px 16px 32px;
		margin: 0px;
		margin-bottom: 40px;
		max-width: 480px;
	}

	#topicsPreview {
		border-left: 1px solid #EAEAEA;
		padding: 16px 16px 16px 32px;
		margin: 0px;
		width: auto;
	}



	.articleCardHome p {
		margin-left: auto;
	}

	footer {
		display: flex;
		align-items: center;
		grid-column: 1;
		grid-row: 3;
		margin: 80px;
		border-left: 1px solid #EAEAEA;
		padding: 16px 0px 16px 32px;
		width: auto;
	}

@media only screen and (min-width: 601px) and (max-width: 1000px) {


	.container {
		margin: auto;
	}

	#siteName {
		display: block;
		padding: 16px;
	}

	#siteName h2 {
		width: 100%;
		font-size: 22px;
	}

	#siteName p {
		width: 100%;
		margin: 4px 0px 0px 0px;
	}

	nav {
		max-width: 1280px;
		margin: 40px 32px 48px 32px;
	}

	nav p {
		font-size: 13px;
	}

	nav ul li {
		margin: 8px;
	}

	nav li {
		font-size: 16px;
	}

	#navContact {
		margin-left: 0px;
	}

	.articleCard {
		margin-left: 32px ;
		margin-right: 32px;
	}

}


@media only screen and (max-width: 600px) {
	
	#bio {
		grid-column: 1;
		grid-row: 1;
		min-width: 200px;
		padding: 8px 16px 8px 16px;
		margin: 40px 24px 40px 24px;
	}

	#profilePicture {
		display: none;
	}

	h1 {
		color: #44C0AA;
		font-size: 28px;
		margin: 8px 0px 16px 0px;
	}

	h2 {
		font-size: 22px;
		margin-bottom: 24px;
	}

	h3 {
		font-size: 16px;
	}

	p {
		font-size: 16px;
	}

	li {
		font-size: 16px;
	}

	.subtitle {
		font-size: 18px;
	}

	.container h1 {
		margin: 8px 0px 16px 16px;
	}

	.container h2, .container h3, .container ul, .container ol {
		padding: 0px 16px;
	}

	.container p {
		line-height: 160%;
		padding: 0px 16px;
		margin: 0px 0px 16px 0px;
	}

	.container ul, .container ol {
		margin-right: 0px;
	}

	.container ul li, .container ol li {
		line-height: 130%;
		margin-bottom: 16px;
	}

	#previews {
		grid-column: 1;
		grid-row: 2;
		margin: 0px 24px;
	}

	#postsPreview {
		padding-left: 16px;
	}

	.articleCardHome {
		display: block;
	}

	.articleCardHome h3 {
		width: auto;
		margin: 0px;
	}

	.articleCardHome p {
		margin: 8px 0px 0px 0px;
		font-size: 14px;
	}

	.articleCard {
		margin: 16px 16px 32px 16px;
		padding-left: 16px;
	}

	.articleCard h1 {
		margin: 8px 0px 16px 0px;

	}

	.articleCard h2 {
		margin: 8px 0px 16px 0px;
		padding: 0px;
	}

	.articleCard p {
		padding: 0px;
	}

	#topicsPreview {
		padding-left: 16px;
	}

	.topicList {
		padding: 0px !important;
	}

	.topicListing li {
		padding: 4px 8px 4px 8px;
	}

	#navItems {
		display: none;
	}

	#navContact {
		display: none;
	}

	#siteName {
		display: block;
		padding: 16px;
	}

	#siteName h2 {
		width: 100%;
		font-size: 22px;
	}

	#siteName p {
		width: 100%;
		margin: 4px 0px 0px 0px;
	}

	nav {
		max-width: 1280px;
		margin: 16px 16px 32px 16px;
	}

	nav p {
		font-size: 14px;
	}

	footer {
		display: block;
		margin: 80px 24px 40px 24px;
		border-left: 1px solid #EAEAEA;
		padding: 16px 0px 16px 16px;
		width: auto;
	}

	footer ul {
		display: flex;
	}

	#cookies p {
		margin-bottom: 0px;
	}

}