/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
	--primary-color: rgb(0, 191, 255);
	--alt-blue: rgb(20, 118, 184);
}

body {
	color: black;
	padding: 0px;
	border: 0px;
	margin: 0px;
	background-color: ghostwhite;
	min-height: 80vh;
	overflow-x: hidden;
}

nav {
	display: flex;
}

.navbar {
	height: 8rem;
}

#desktop-site-title {
	margin-left: 4rem;
}

.footerCont {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: center;
	color: white;
	min-height: 100px;
	background: linear-gradient(25deg, var(--alt-blue), var(--primary-color));
}

.footerCont > h3 {
	margin-bottom: 0 !important;
}

.navbar-toggler {
	border: 1px solid white;
}

.navbar-toggler:hover,
.navbar-toggler:active {
	color: white;
}

.navLine {
	margin: 0 25%;
}

hr {
	color: white;
	border: 0;
	border-top: 1px solid;
	opacity: 0.8;
}

.bottom-navbar {
	overflow: hidden;
	background-color: rgb(212, 212, 212);
	position: fixed;
	bottom: 0;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* Spaces out the Bootstrap nav items */
.nav-item {
	padding: 0 1rem;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	-o-transition: transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s;
	font-family: "Gentium Book Plus", serif;
	font-size: large;
}

.nav-link,
.nav-link:active,
.nav-link:link,
.nav-link:visited {
	color: white;
	border-radius: 0.2rem;
}

.nav-link:hover {
	color: white;
}

.nav-link.active,
.nav-link.active:hover {
	background-color: white;
	color: var(--primary-color);
}

.nav-item:hover {
	-ms-transform: scale(1.2);
	/* IE 9 */
	-webkit-transform: scale(1.2);
	/* Safari 3-8 */
	transform: scale(1.2);
}

a {
	text-decoration: none !important;
}

#headerCont {
	background: linear-gradient(25deg, var(--alt-blue), var(--primary-color));
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
	margin: 0;
}

#site-title {
	text-transform: uppercase;
	color: white;
	font-size: 2.3rem;
	text-align: center;
	margin: 0;
	padding: 3px;
	padding-left: 1rem;
	text-decoration: none;
	font-family: "Gentium Book Plus", serif;
	text-shadow: 2px 2px 2px rgba(60, 60, 60, 0.4);
}

main {
	display: grid;
	grid-template-columns: 1fr 5fr;
}

.content {
	margin-top: 5%;
	margin-left: 10%;
	margin-right: 25%;
	margin-bottom: 10%;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	-ms-flex-line-pack: center;
	align-content: center;
}

.contentInner {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.suggested {
	position: sticky;
	top: 25%;
	left: 100px;
	width: min-content;
	height: 480px;
	padding-right: 2rem;
	overflow-y: auto;
}

.suggested::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.suggested::-webkit-scrollbar-track {
	box-shadow: none;
	border-radius: 10px;
}

/* Handle */
.suggested::-webkit-scrollbar-thumb {
	background: lightgray;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--primary-color);
}

.suggested__mainLink {
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
}

.recommendedBox {
	text-align: center;
}

ul {
	list-style: none;
}

li {
	margin-bottom: 2rem;
}

.nav-item {
	margin-bottom: 0;
}

.content p,
.content li {
	font-size: 1.2rem;
	color: darkslategray;
	margin-bottom: 2rem;
}

.content blockquote {
	font-size: 1.2rem;
	margin-left: 2rem;
	margin-right: 2rem;
	margin-bottom: 2rem;
	color: darkslategray;
}

.first::first-letter {
	/* Prefix required for some browsers, such as Safari */
	initial-letter: 3;
	-webkit-initial-letter: 3;
	margin-right: 0.2rem;
	font-family: archer a, archer b, garamond;
}

.key-quote {
	text-align: center;
	border-left: none;
	border-top: 1px solid #e6e7e8;
	border-bottom: 1px solid #e6e7e8;
	position: relative;
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 1.4rem;
	line-height: 1.1;
	font-weight: 500;
}

.key-quote p {
	text-align: center;
	margin-bottom: 0;
}

.key-quote::before {
	content: "\201C";
	font-family: archer a, archer b, garamond, times, times new roman, serif;
}

.key-quote::after {
	content: "\201D";
	font-family: archer a, archer b, garamond, times, times new roman, serif;
}

.embedded-youtube {
	max-width: 100%;
}

.bullet-list {
	font-size: 1.2rem;
	list-style: circle;
}

.solid-bullet-list {
	font-size: 1.2rem;
	list-style: disc;
}

.post-heading {
	line-height: 1.1;
	text-transform: uppercase;
	font-size: 3rem;
	text-align: center;
	color: darkslategray;
	font-family: "Literata", Georgia;
}

.post-subheading {
	text-transform: uppercase;
	text-align: center;
	color: darkslategray;
	margin: 2em 0;
	/* Adjust for the link */
	margin-left: -30px;
	font-family: "Literata", Georgia;
}

h3 {
	font-size: 1.5rem;
	text-align: left;
	font-family: "Literata", Georgia;
	margin-bottom: 2rem !important;
}

h5 {
	font-weight: 300;
}

.content a,
.content a:visited {
	text-decoration: none;
	color: rgb(0, 191, 255);
}

.content a:active,
.content a:hover {
	text-decoration: none;
	color: goldenrod;
}

.home__container {
	background-color: #111;
	min-height: 90vh;
}

/* ########## */
/* ## Grid ## */

.grid-container {
	display: -ms-grid;
	display: grid;
	padding: 3rem;
	margin: 1.5rem auto;
	gap: 2.5rem;
	max-width: 1300px;
	-ms-grid-columns: 1fr 2.5rem 1fr;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: min-content;
	justify-content: center;
}

/* Layout for each grid box */
.grid-box {
	padding: 1rem;
	border: 3px solid var(--primary-color);
	border-radius: 0.5em;
	background-color: white;
	font-family: "Literata", Garamond;
	color: black;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	-o-transition: transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s;
	z-index: 1;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/* #political-box {
	grid-column: 2;
} */

.grid-box:hover {
	-ms-transform: scale(1.05);
	/* IE 9 */
	-webkit-transform: scale(1.05);
	/* Safari 3-8 */
	transform: scale(1.05);
}

.article-link-button {
	align-self: flex-end;
	display: inline-block;
	padding: 0.4rem;
	font-size: 1.1rem;
	line-height: 1.1rem;
	font-family: "Literata", Garamond;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid var(--primary-color);
	border-radius: 0.2rem;
	color: white;
	background-color: var(--primary-color);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out;
}

.article-link-button:hover {
	border-color: rgb(10, 126, 198);
	color: white;
	background-color: rgb(10, 126, 198);
}

/* Grid image box */
.imagebox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/* Grid image */
#grid-image {
	width: 100%;
	height: 200px;
	-o-object-fit: cover;
	object-fit: cover;
	margin: auto;
}

.grid-title {
	color: #111;
	margin-top: 1rem;
	text-align: center;
	font-weight: 700;
	font-family: Garamond, sans-serif;
}

.grid-box p {
	font-family: "Montserrat", sans-serif;
	text-align: justify;
	color: darkslategray;
}

.btn {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	-ms-flex-item-align: end;
	align-self: flex-end;
}

/* ############# */
/* Modal */

.modalNavbar {
	background-color: rgba(100, 100, 100, 0.4);
	overflow: hidden;
	position: fixed;
	bottom: 0;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

#myBtn {
	border-radius: 0.3rem;
	border: none;
	margin: 0.35rem;
	background-color: rgb(0, 191, 255);
	color: white;
	font-size: x-large;
	font-family: "Crimson Pro", sans-serif;
}

.empty-span {
	width: 5.3rem;
}

.top-bottom-links {
	margin-right: 1rem;
	width: 4.3rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 0.3rem;
}

.go-to-top,
.go-to-bottom,
.go-to-top:active,
.go-to-bottom:active {
	font-size: 1.5rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: var(--primary-color);
	color: white;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
}

.go-to-bottom:hover,
.go-to-top:hover {
	color: gold;
	scale: 1.05;
}

/* The Modal (background) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/ opacity */
}

/* Modal Content/Box */
.modalContent {
	background-color: var(--alt-blue);
	margin: 3rem auto;
	/* 15% from the top and centered */
	border: 1px solid #888;
	border-radius: 1rem;
	width: 35%;
	-webkit-animation-name: animatetop;
	animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	position: relative;
}

/* Modal Header */
.modalHeader {
	padding: 0 0.6rem;
	width: 100%;
	margin: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: space-between;
}

.modalHeader > h3 {
	text-transform: uppercase;
	padding-top: 0.6rem;
	padding-left: 1rem;
	margin-bottom: 0 !important;
	color: white;
}

.modalInner {
	/* Padding the children and providing a footer */
	padding: 1rem 1rem;
	margin-bottom: 2rem;
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
}

.modalInner ul {
	text-indent: 0%;
	margin: 0;
	padding: 0;
	font-size: 1.7em;
	text-align: center;
}

.post-image {
	width: 100%;
	height: auto;
	margin: auto;
}

/* The links in the modal */
.sectionLink {
	border-left: 6px solid lightblue;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	-o-transition: transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s;
	margin: 0.5rem;
	background-color: rgb(16 101 159);
	border-radius: 0.5rem;
	padding: 0.5rem;
	font-size: 2rem;
}

.sectionLink:hover {
	-ms-transform: scale(1.1);
	/* IE 9 */
	-webkit-transform: scale(1.1);
	/* Safari 3-8 */
	transform: scale(1.1);
}

.link1 {
	padding-top: 0;
}

.modalLink {
	color: white;
	text-align: center;
	font-weight: 700;
	font-family: Garamond, sans-serif;
}

.modalLink:hover {
	text-decoration: none;
	color: white;
}

/* The Close Button */
.close {
	color: white;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: rgb(0, 191, 255);
	text-decoration: none;
	cursor: pointer;
}

.references-button {
	background-color: rgb(0, 191, 255);
	color: white;
	padding: 10px;
	cursor: pointer;
	border: 2px solid black;
}

.revealed-references {
	max-height: 0px;
	transition: max-height 0.4s ease-in-out;
	margin: 1rem;
	visibility: hidden;
	overflow: hidden;
	font-size: 1.2rem;
}

.revealed-references.active {
	max-height: 500px;
	opacity: 1;
	visibility: visible;
}

.reference-divider {
	border-top: 1px solid darkslategray;
}

.copy-to-clipboard-link {
	border: none;
	background-color: transparent;
	cursor: pointer;
	font-size: x-large;
	color: var(--primary-color);
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

.suggested__mobile {
	display: none;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: lightblue;
	border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--primary-color);
}

/* Tooltip container */
.toolTip {
	position: relative;
	border-bottom: 1px dotted black;
	/* If you want dots under the hoverable text */
}

/* Tooltip text */
.toolTip .toolTipText {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;

	/* Position the toolTip text */
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;

	/* Fade in toolTip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.toolTip .toolTipText::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

/* Show the toolTip text when you mouse over the toolTip container */
.toolTip:hover .toolTipText {
	visibility: visible;
	opacity: 1;
}

.toolTip:hover {
	border-bottom: 1px solid var(--primary-color);
}

.toolTip > sup {
	color: var(--primary-color);
}

.fn > li {
	color: var(--primary-color);
	margin-bottom: 0;
}

.fn {
	color: var(--primary-color);
	cursor: pointer;
}

/* ############# */
/* ############# */

/* Media Queries */
@media only screen and (max-width: 1480px) {
	.navbar {
		height: 4rem;
	}
	#desktop-site-title {
		margin-left: 0;
	}

	.grid-box {
		padding: 1rem;
	}

	#political-box {
		grid-column: auto;
	}
}

@media only screen and (max-width: 1290px) {
	.content {
		margin: 5% 15%;
	}

	.modalContent {
		width: 50%;
	}

	.grid-image {
		height: 200px;
	}
}

@media only screen and (max-width: 1080px) {
	main {
		display: block;
	}

	.grid-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.content {
		margin: 5% 20%;
	}

	.suggested {
		display: none;
	}

	.suggested__mobile {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 95%;
		padding: 1rem;
		margin: auto auto;
	}

	.recommendedBox {
		width: max-content;
		box-shadow: 0 0 4px var(--alt-blue);
		margin-bottom: 1rem;
		padding: 1rem;
	}

	.recommendedBox h2 {
		padding-top: 1rem;
		color: darkslategray;
	}
}

@media only screen and (max-width: 766px) {
	.content {
		margin: 2rem;
	}

	.copy-to-clipboard-link {
		font-size: large;
	}

	.headerCont {
		background: url(../images/hahae-cliffs.jpg);
		background-size: cover;
		background-position-y: -150px;
		background-blend-mode: lighten;
	}

	.grid-container {
		padding: 2%;
		gap: 1rem;
		justify-items: center;
		-ms-grid-columns: 1fr;
		grid-auto-rows: -webkit-min-content;
		grid-auto-rows: min-content;
		margin: auto;
	}

	.grid-box {
		max-width: -webkit-max-content;
		max-width: -moz-max-content;
		max-width: max-content;
	}

	.modalContent {
		width: 70%;
	}
}

@media only screen and (max-width: 670px) {
	.content p,
	.content blockquote,
	.bullet-list,
	.content li {
		font-size: 1.1rem;
	}

	.key-quote {
		font-size: 1.2rem;
	}
}

@media only screen and (max-width: 576px) {
	.grid-container {
		grid-template-columns: repeat(1, 1fr);
	}

	.top-bottom-links {
		margin-right: 0.5rem;
	}

	#grid-image {
		height: 200px;
	}

	.pdf-viewer {
		display: none;
	}

	.navbar-toggler {
		color: white;
	}

	#site-title {
		font-size: 2rem;
	}

	.navbar {
		margin: 0 0.6rem;
	}

	.navbar-nav {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.bottom-navbar {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.nav-item {
		padding: 0px;
		margin: 0px;
		width: 100%;
		text-align: center;
	}

	#bottom-navbar1 {
		display: none;
	}

	.btn {
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}

	.modalContent {
		margin: 2rem auto;
		width: 95%;
	}

	.modalInner ul {
		font-size: 1.5em;
	}
}

@media only screen and (max-width: 480px) {
	.grid-box p {
		font-size: small;
	}

	.grid-container {
		padding-top: 3rem;
		padding-bottom: 4rem;
	}
}

@media only screen and (max-width: 400px) {
	.content p,
	.content blockquote,
	.bullet-list,
	.content li {
		font-size: 1rem;
	}
}

@media only screen and (max-width: 330px) {
	.grid-box p {
		text-align: center;
	}
}