:root {
  /* colors */
  /* <https://htmlcolorcodes.com/colors/pistachio/>, tetradic */
  --main1: #93C572;
  --main1-darker: #85B167;
  --main2: #72BDC5;
  --main3: #A472C5;
  --main4: #C57A72;
  --gray0: hsl(0, 0%, 15%);
  --gray1: hsl(0, 0%, 20%);
  --gray2: hsl(0, 0%, 35%);
  --gray3: hsl(0, 0%, 50%);
  --gray4: hsl(0, 0%, 65%);
  --gray5: hsl(0, 0%, 80%);
  --gray6: hsl(0, 0%, 90%);
  --gray7: hsl(0, 0%, 95%);
  color-scheme: dark light;
  --dark-main-text: hsl(96, 35%, 90%);
  --light-main-text: hsl(96, 15%, 25%);
}

@font-face {
  font-family: 'Tienne';
  font-style: normal;
  font-weight: normal;
  src: url('/static/fonts/tienne/Tienne-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Tienne';
  font-style: bold;
  font-weight: 700;
  src: url('/static/fonts/tienne/Tienne-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Tienne';
  font-style: bold;
  font-weight: 900;
  src: url('/static/fonts/tienne/Tienne-Black.ttf') format('truetype');
}

html {
  font-size: 24px;
  font-family: Tienne, serif;
	background-color: var(--gray0);
  height: 100vh;
}

body {
  margin: 0 auto;
  min-height: 100%;
  width: 100vw;
	display: grid;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr 150px;
  color: var(--gray6);
}

header {
	grid-area: header;
}

nav {
	border-bottom: 10px solid var(--main4);
	padding-bottom: 20px;

	a {
		color: var(--main4);
		text-decoration: none;
	}
	a:hover {
	 text-decoration: 2px solid var(--main1) underline;
	}

	& > ul {
		text-align: center;
	  list-style-type: none;
		margin: 0;
		padding: 0;

		& > li {
			margin: 0;
			padding: 10px 15px;
			display: inline;
			font-weight: 400;
			font-size: 1.2rem;
		}
	}
}

#site-title {
	margin: 25px 15px 0px 15px;
	text-align: center;

	& > a {
		color: inherit;
		text-decoration: none;
	}
}

#client-chat {
	grid-area: client-chat;
	font-size: .75rem;
	text-align: right;
	margin: 10px 30px 0 0;

	& a {
		text-decoration: none;
		color: inherit;
	}
	& a:hover {
		text-decoration: underline;
	}
}

main {
	background-color: var(--gray1);
	grid-area: main;
	padding: 20px 150px;
	line-height: 1.4;
  color: var(--dark-main-text);
  & a {
  	color: var(--main2);
  }
  & a:hover {
  	color: var(--dark-main-text);
  }
}

.two-column {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	column-gap: 75px;
	row-gap: 25px;

	h2.arrow::after {
		white-space: pre;
		content: "\A ⤍";
		color: var(--main1);
	}
	.decoration {
		text-decoration: 2px solid var(--main1) underline; 
	}

}

footer {
	grid-area: footer;
	padding: 0 150px;
	font-size: 0.75rem;
	border-top: 2px solid var(--main4);
}

h1 {
	text-align: center;
	font-size: 2rem;
	margin-top: 0px;

	&.non-services {
		font-size: 1.5rem;
	}
}

h2 {
	margin-top: 15px;
	color: var(--main4);
}

.right { text-align: right; }
.center { text-align: center; }
.small { font-size: .8rem; }
.smaller { font-size: .6rem; }


/* Responsive layout */
@media (max-width: 915px) {
	body {
		grid-template-rows: auto 1fr auto;
	}

	nav > ul {
		& > li {
			font-size: 1rem;
			border-left: none;
			padding: 5px;
		}
		& > li:last-of-type {
			border-right: none;
		}
	}

	#site-title img {
		width: 90%;
	}

	main {
		padding: 0 20px;
	}

	h1 {
		&::before {
			content: "";
		}
		&::after {
			content: "";
		}
	}
	

	/* two-column becomes single */
	.two-column {
		grid-template-columns: 1fr;
		column-gap: 0px;
		row-gap: 0px;

		h2 {
			text-align: center;
		}

		h2.arrow::after {
			content: "";
		}

		.decoration {
			text-decoration: none;
			border-bottom: 2px solid var(--main4);
			display: block;
		}
	}

	h2 {
		text-align: center;
		margin: 0;
		padding: 0;
	}

	footer {
		padding: 0 25px;
	}
}