:root {
	--darkBlue: #233048;
	--mediumBlue: #466ea6;
	--lightBlue: #addcf8;
	--whiteBlue: #d6f0ff;
	--yellow: #e9d693;
	--orange: #dda11b;
	--error: #ae3636;
	--poppins: "Poppins", Helvetica, Arial, sans-serif;
	--fraunces: "Fraunces", 'Times New Roman', serif;
}

/*------ general settings ------*/
body {
	text-align: center;
	color: var(--darkBlue);
	font-family: var(--fraunces);
	background: var(--darkBlue);
}

h2 {
	margin-top: 0;
}

a, a:active, a:visited {
	color: var(--mediumBlue);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p {
	margin: 0 0 1em;
	line-height: 1.25em;

	&:last-child {
		margin-bottom: 0;
	}

	&.centered {
		text-align: center;
	}
}

input,
textarea {
	padding: .5em;
	font-size: 1em;
	font-family: var(--fraunces);
	margin: 0 .75em .75em 0;
	border: 1px solid var(--whiteBlue);
	background: var(--whiteBlue);
	box-sizing: border-box;

	&.error {
		border: 1px solid var(--error);
	}
}

textarea {
	resize: none;
}

button {
	background: var(--whiteBlue);
	color: var(--darkBlue);
	font-weight: bold;
	font-family: var(--fraunces);
	border: 3px solid var(--darkBlue);
	font-size: 1.5em;
	padding: .2em .6em;
	display: block;
	cursor: pointer;
}

/*------ site level stuff ------*/
#greg {
	text-decoration: none;
	font-family: var(--poppins);
	font-size: 2.75em;
	font-weight: normal;
	line-height: 1em;

	span {
		background: linear-gradient(0deg, #f0e0a7, #b98207);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
}

#nav {
	display: none;
	position: relative;
	color: var(--yellow);
	font-family: var(--poppins);
	font-size: 1.5em;
	padding: 0;
	margin: .25em 0 0;
	transition: height .2s ease-in;
	height: 35px;
	overflow: hidden;

	.selected,
	a:active,
	a:hover {
		border-bottom: 1px solid var(--orange);
	}

	a,
	a:visited {
		color: var(--yellow);
		text-decoration: none;
	}

	a:active,
	a:hover {
		color: var(--orange);
	}
}

#burgertime {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23466ea6' d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E");
}

#closingtime {
	display: none;
	position: absolute;
	top: -3px;
	right: 0;
	width: 40px;
	height: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23466ea6' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

@media only screen and (min-width: 650px) {
	#nav {
		display: flex;
		justify-content: center;
		margin-top: 1.15em;
		height: auto;

		.nav_option {
			&:after {
				content: " \00a0 \2022 \00a0 \00a0 ";
				color: var(--orange);
			}
			&:last-child:after {
				content: "";
			}
		}
	}

	#burgertime {
		display: none;
	}
}

#main {
	background: var(--lightBlue);
	border: 5px solid var(--darkBlue);
	box-shadow: 0 0 0 2px var(--lightBlue);
	box-sizing: border-box;
	max-width: 850px;
	margin: 1em auto;
	padding: 1.5em;
	font-size: 1.1em;
	text-align: left;
}

h2.dek {
	font-size: 2em;
	color: var(--mediumBlue);
	margin-bottom: .25em;
	letter-spacing: -.05em;
	line-height: 1em;

	&:not(:first-child) {
		margin-top: .75em;
	}
}

#footer {
	margin: 0 auto;
}

#instagreg {
	display: inline-block;
	margin-right: 1em;
	width: 40px;
	height: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23466ea6' d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3'/%3E%3C/svg%3E");
}

#gregelope {
	display: inline-block;
	margin-bottom: -1px;
	width: 42px;
	height: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24' color='%23466ea6'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 8-10 5L2 8'/%3E%3C/g%3E%3C/svg%3E");
}


/***** BIO.HTML ******/
#portrait_block {
	margin-bottom: 1rem;
	font-size: .6em;
	font-family: var(--poppins);
	line-height: 1.2em;
}

#bio_portrait {
	width: 100%;
	height: auto;
}

@media only screen and (min-width: 650px) {
	#portrait_block {
		float: right;
		margin: 0 0 1rem 1rem;
	}

	#bio_portrait {
		max-width: 350px;
	}
}

/***** BOOK.HTML ******/
.book_block {
	h2.dek {
		text-align: center;
		margin: 0 0 .5em;
	}

	ul {
		list-style: inside;
		margin-top: .25em;
	}
}

.book_award {
	font-size: 1.1em;
}

.book_cover {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}

#praise_hed {
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: -1px;
	clear: both;
	margin-bottom: 1rem;
}

.blurb_block {
	clear: both;
	margin-bottom: 1em;
	font-size: .9em;
}

.blurber {
	margin-top: .3em;
	text-align: right;

	a {
		font-weight: bold;
	}

	a,
	a:hover,
	a:active,
	a:visited {
		color: var(--darkBlue);
		text-decoration: none;
	}
}

@media only screen and (min-width: 700px) {
	.book_block {
		h2.dek {
			text-align: left;
		}

		.book_cover {
			width: 100%;
			height: auto;
			max-width: 380px;
		}

		&.left {
			.book_cover {
				float: left;
				margin: 0 1em 1em 0;
			}
		}

		&.right {
			.book_cover {
				float: right;
				margin: 0 0 1em 1em;
			}
		}
	}
}

/***** POEMS.HTML ******/
.poem_block {
	margin-bottom: .75em;

	a {
		font-size: 1.25em;
	}
}

.published {
	margin-right: .1em;
	white-space: nowrap;
}


/***** NEWS_EVENTS.HTML ******/
#news {
	margin: 0 0 1.5em;

	li {
		margin-bottom: .25em;
	}
}

.reading_block {
	margin-bottom: 1em;
}

.reading_date {
	font-size: 2em;
	color: var(--orange);
}

.reading_location {
	a {
		font-size: 1.3em;
		font-weight: 600;
		padding-right: .2em;
	}
}


/***** CONTACT.HTML ******/
#contact_greg {
	margin: 0 auto;
	text-align: center;

	button {
		margin: auto;
	}
}

#first_name,
#last_name,
#email,
#message {
	width: 100%;
	max-width: 600px;
}

#error_message {
	color: var(--error);
	font-size: .75em;
	margin-bottom: 1em;

	&.error {
		display: block;
	}
}

#success_message {
	text-align: center;
	padding: 0 0 1em;
	font-size: 1.5em;
}

#fail_message {
	text-align: center;
	padding: 0 0 1em;
	color: var(--error);
}

@media only screen and (min-width: 700px) {
	#first_name,
	#last_name {
		width: 292px;
	}
}