@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
	font-size: 104%;
	line-height: 120%;
	--spacing: 2rem;
	--white: rgb(255, 255, 255);
	--darkblue: #687eb4;
	--accent: #b3c7f7;
	--accent2: #dfe8fd;
	--lightblue: #b9e192;
	--darkgreen: #89ce00;
	--black:#000000;
	--pink: #cebef6;
	--darkpink:#957cd4;
	--printspacing: 0.85in;
}

body {
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	background: #ffffff;
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgb(210, 210, 210) 100%);
}

h1 {
	line-height: 2.2rem;
	font-family: "Nunito", sans-serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: -0.09rem;
	font-size: 2.2rem;
}

p {
	margin-block-end: calc(1.5 * var(--spacing));
	line-height: 1.4rem;
}

header p{
	font-size: 2.2rem;
	line-height: 2.2rem;
	font-family: "Nunito", sans-serif;
	font-weight: 700;
	letter-spacing: -0.02rem;
}

#top {
	border: 0.2rem solid var(--darkblue);
	border-radius: 0.4rem;
	padding-block-end: calc(1.5 * var(--spacing));
	margin-block-start: calc(1.5 * var(--spacing));
	margin-inline: calc(var(--spacing) /2);
}

blockquote {
	font-family: "Nunito", sans-serif; 
	font-size: 1.3rem;
	font-weight: 200;
	border: 0.2rem solid var(--darkpink);
	border-radius: 0.4rem;
	margin-block-start: calc(var(--spacing) * 3);
	margin-block-end: calc(var(--spacing) * 3);
	padding-block-end: calc(var(--spacing)/2);
	line-height: 1.8rem;
	margin-inline: calc(var(--spacing) /2);
}

blockquote p {
	font-style: italic;
	padding-inline: var(--spacing);
	margin-block: 0;
}

#top, blockquote {
	background-color: var(--white);
}

.quoteheader {
	font-weight: 700;
	font-style: normal;
	font-size: 1.5rem;
	margin-block-end: calc(var(--spacing) / 2);
	width: 100%;
	background-color: var(--pink);
	padding-block: calc(var(--spacing)/5);
	padding-inline: var(--spacing);
}

#top .quoteheader {
	background-color: var(--accent);
	margin-block-end: calc(1.5 * var(--spacing));
}

a {
	min-height: 1.4rem;
	border-radius: 0.4rem;
	font-family: "Nunito", sans-serif;
	color: var(--black);
	align-items: center;
	padding-inline: calc(var(--spacing) / 3);
	justify-content: center;
	text-align: center;
	border-style: solid;
	border-width: 0.1rem;
	border-color: var(--darkgreen);
	background: var(--lightblue);
	transition: 75ms ease-in-out;
}

.linkbutton, .activelinkbutton {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: calc(var(--spacing) / 3);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 0.8rem;
	border-width: 0;
	border-radius: 0rem 0rem 0rem 0rem;
	background-color: var(--accent2);
	border: 0.2rem solid var(--darkblue);
	border-bottom-width: 0;
	flex: 1;
	width: auto;
	height: 4rem;
}

.activelinkbutton {
	background-color: var(--accent);
	border-style: solid
}

/* inner shadow code obtained from https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */
a:hover {
	/* box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.718); */
	background-color: var(--darkgreen);
	transition: 75ms ease-in-out;
	border-style: solid;
}

.linkbutton:hover {
	border-block-end: 0.0rem solid var(--black);
	background-color: var(--accent);
	border-style: solid;
}

.activelinkbutton:hover {
	border-block-end: 0.0rem solid var(--black);
	background-color: var(--accent);
	border-style: solid;
}


.linkbutton {
	border-block-end: 0.2rem solid var(--darkblue);
}

.topbutton {
	position: fixed;
	inset-inline-end: var(--spacing);
	inset-block-end: var(--spacing);
	width: 25%;
	min-height: 2rem;
}

article {
	margin-inline: calc(var(--spacing) /2);
}

section {
	background-color: var(--accent);
	border-radius: 0rem 0rem 0.4rem 0.4rem;
	border-block-end: 0.2rem solid var(--darkblue);
	border-inline: 0.2rem solid var(--darkblue);
	padding-block-end: var(--spacing);
	padding-block-start: calc(2 *var(--spacing));
}

article p {
	padding-inline: var(--spacing);
	max-width: 64ch;
}

h1 {
	padding-inline: var(--spacing);
	}


.links {
	height: auto;
	flex-direction: column;
	display: flex;
	margin-block-start: calc(3 * var(--spacing)); 
	padding-block-start: var(--spacing); 
}


.beginning{
	margin-block-start: calc(-0.25 *var(--spacing));
}


footer {
	display: flex;
	flex-direction: column;
	justify-content: start;
	row-gap: calc(var(--spacing) / 2);
	background-color: var(--pink);
	padding-block: var(--spacing);
	padding-inline: calc(var(--spacing) /1.5);
	height: auto;
	font-size: 0.75rem;
	font-weight: 700;
	font-family: "Nunito", sans-serif;
	text-align: left;
	border-block-start: 0.2rem solid var(--darkpink);
	color: var(--black);
}

footer p {
	line-height: 0.75rem;
	padding: 0;
	margin: 0;
}

/* reviewed attribute selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors */
.links a[href="#intro"] {
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
}

.notice {
	display: none;
}

@media (width > 580px) {
	:root {
		font-size: 135%;
}

	.links {
		flex-direction: row;
		height: 4rem;
		margin-block-start: calc(6 * var(--spacing)); 
}

	header p{
		font-family: "Nunito", sans-serif;
		font-weight: 700;
		font-size: 2.5rem;
		letter-spacing: -0.02rem;
		line-height: 2.2rem;
		margin-block-start: var(--spacing);
}

	#top p {
		margin-block-start: 0;
}


	.activelinkbutton {
		border-style: outset;
		border-radius: 0.4rem 0.4rem 0rem 0rem;
}

	.linkbutton{
		border-radius: 0.4rem 0.4rem 0rem 0rem;
}

	a:hover {
		border-style: inset;
}

/* Inset and outset CSS style obtained from https://www.w3schools.com/css/css_border.asp */
	.linkbutton:hover {
		border-style: outset;
}

	.activelinkbutton:hover {
		border-style: outset;
}

	.beginning{
		margin-block-start: calc(-0.25 *var(--spacing));
}
}

@media (width > 1000px) {
	:root {
		font-size: 150%;
}

	blockquote {
		margin-inline-start: 33.7%;
}

	h1 {
		font-size: 3.8rem;
		line-height: 3.9rem;
}

	footer {
		flex-direction: row;
		justify-content: space-between;
}
}

@media print {

	:root {
		font-size: 12pt;
	}

	body {
		background: none !important;
		background-color: white !important;
		padding-inline: calc(var(--printspacing) / 4);
	}

/* figured out how to prioritize print colors here https://developer.mozilla.org/en-US/docs/Web/CSS/important */
	#top, section, blockquote {
		border-color: black;
	}

	#top{
		margin-block-start: 0;
	}

	#top .quoteheader {
		background: none !important;
		background-color: white !important;
}

	section {
		border: none;
		border-inline-start: 0.2rem solid black;
		border-radius: 0;
		padding-block: 0;
		margin-block-end: var(--printspacing);
		background-color: white;
	}	
	
	.beginning{
		margin-block-start:0;
	}

	.links {
		display: none;
	}

	blockquote{
		margin-block: var(--printspacing);
		font-weight: 350;
	}

	article p{
		max-width: 1000ch;
		margin-block-end: calc(var(--printspacing) / 3);
	}

	a{
		border: none;
		text-decoration: none;
		padding-inline: 0;
		background-color: white;
	}

	.quoteheader{
		border-block-end: 0.2rem solid black;
		background-color: white;
		/* padding-inline: 0;
		margin-inline: var(--spacing); */
	}

	footer{
		border-color: black;
		flex-direction: row;
		justify-content: space-between;
		padding-inline: 0;
		background-color: white;
		padding-block-end: 0;
		padding-block-start: calc(var(--printspacing) / 5)
	}
}

@page {
	margin-block: var(--printspacing);
}

@media (prefers-contrast: no-preference) {

	.blur1 {
		filter: blur(1px);
	}

	.blur2 {
		filter: blur(2px);
	}

	.blur3 {
		filter: blur(3px);
	}
	
	.blur4 {
		filter: blur(4px);
	}

	.blur5 {
		filter: blur(5px);
	}

	.blur6 {
		filter: blur(6px);
	}

	.blur7 {
		filter: blur(7px);
	}

	.blur8 {
		filter: blur(8px);
	}

	.blur9 {
		filter: blur(9px);
	}

	.notice {
		position: fixed;
		inset-block-end: calc(var(--spacing) * -1);
		display: block;
		text-align: center;
		width: 100%;
		z-index: 100;
		font-family: "Nunito", sans-serif;
		font-weight: 700;
		font-style: normal;
		font-size: 1rem;
}
}