/*	SiteNotation styles for ancillary pages (Privacy Policy, etc.) */


/*	----------------------------------------------------------------------------------------------

	Custom Properties (Variables)	

	----------------------------------------------------------------------------------------------	
*/


:root {
	
	/*	Colors */
	--action-orange: hsl(25 73% 52%);
	--action-orange-faded: hsl(25 73% 90%);
	--action-orange-hover: hsl(25 85% 60%);
	--cool-blue: hsl(220 50% 50%);
	--cool-blue-hover: hsl(220 95% 50%);
	--cool-blue-faded: hsl(220 50% 90%);
	--cool-blue-extra-faded: hsl(220 50% 95%);
	--cool-blue-almost-white: hsl(220 100% 99%);
	--dark-grey-for-darkened-pane: hsl(220 5% 30%); /* #333; */
	--dark-grey-with-green-tint: hsl(112 5% 45%);
	--dark-grey-with-green-tint-hover: hsl(254 5% 35%);
	--ivory: hsl(40 31% 94%); /* found in a Reddit post */
	--green: hsl(100 50% 50%);
	--green-hover: hsl(100 75% 50%);
	--light-grey-with-blue-tint: hsl(192 15% 98%);
	--neutral-grey: hsl(0 0% 80%);
	--red: hsl(0 90% 33%);
	--red-hover: hsl(0 100% 40%);
	--red-toned-down: hsl(0 50% 40%);
	--yellow-gold: hsl(44 80% 50%);
	--yellow-gold-hover: hsl(44 90% 40%);
	
	/*	Drop shadow (box shadow) */
	--drop-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
	
	/*	Fonts */
	--header-font: "Shippori Antique";
}


/*	----------------------------------------------------------------------------------------------
	
	HTML Elements
	
	----------------------------------------------------------------------------------------------
*/

body {
	margin: 0;
	padding: 0;
}

div {
	box-sizing: border-box;
}

form {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-font), Arial, sans-serif;
}

:is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

/*	----------------------------------------------------------------------------------------------

	Miscellaneous Styles (IDs and Classes)

	----------------------------------------------------------------------------------------------	
*/

#about-page {
	font-size: 24px;
}

#about-page .ivory-background {
	background-color: var(--ivory);
}

#about-page :is(ul, ol) li {
	margin-bottom: 1em;
}

#about-page .panel {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px;	
}

#about-page .white-background {
	background-color: white;
}

#about-page .white-pane {
	background-color: white;
}

#about-page .white-pane > * {
	padding: 50px;
}

.centered {
	text-align: center;
}

.flex-parent-horizontal {
	display: flex;
	flex-direction: row;
	overflow-x: hidden;
}

#footer {
	margin-top: 50px;
}

#privacy-policy {
	margin: 50px;
}

#privacy-policy-page {
	max-width: 1200px;
	margin: 0 auto;
	font-family: var(--header-font), Arial, sans-serif;
	font-size: 24px;
}

.top-navigation-menu-for-ancillary-page {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	padding-right: 50px;
	font-size: 24px;
}

.top-navigation-menu-for-ancillary-page ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: flex;
	flex-direction: row;
	font-family: var(--header-font);
}

.top-navigation-menu-for-ancillary-page li {
	flex: none;
	margin-left: 1em;
	margin-right: 1em;
	padding-bottom: 5px;
	border-bottom: 3px solid transparent;
}

.top-navigation-menu-for-ancillary-page li.selected {
	border-bottom: 3px solid var(--cool-blue);
}

.top-navigation-menu-for-ancillary-page li a {
	text-decoration: none;
	color: black;
	padding-bottom: 5px;
}

.top-navigation-menu-for-ancillary-page li:hover:not(.selected) {
	border-bottom: 3px solid var(--action-orange);
}

.top-navigation-menu-for-ancillary-page li:first-child {
	margin-left: 0;
}

.top-navigation-menu-for-ancillary-page li:last-child {
	margin-right: 0;
}