@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root{
	--title-font-family: 'figtree';
	--body-font-family: 'albert sans';
	--margin: 1.25rem;

	--background-color: white;

	font-size: 16px;
}

body{
	margin: var(--margin);
	font-family: var(--body-font-family);
	font-size: 1.125rem;
	line-height: 1.6;
	background-color: var(--background-color);
}

h1{
	font-family: var(--title-font-family);
	font-weight: bold;
	font-size: 4.5rem;
	line-height: 5rem;
}

nav{
	font-family: var(--title-font-family);
	font-size: 1.25rem;
	font-weight: 500;
	display: flex;
	justify-content: center;
	position: sticky;
	z-index: 1000;
	top:0;
	background-color: var(--background-color);
	border-bottom: 1px solid black;
	text-align: left;
	margin: -1.25rem;
	padding: .8rem 0;
}

nav ul{
	list-style: none;
	display:flex;
}

nav ul li{
	margin: 0 18px;
}

nav a{
	text-decoration: none;
	padding: 10px;
	text-align: left;
}

header{
	font-family: var(--title-font-family);
	margin: -1.25rem;
	margin-top: var(--margin);
	padding: 2rem 1.25rem;
	z-index: 10;
	position: relative;
}

header p{
	font-family: var(--body-font-family);
	font-size: 1.5rem;
	font-weight: 450;
	line-height: 2rem;
	max-width: 90%;
	padding: 2rem 0;

	max-width: 43rem;
}

section p{
	padding-bottom: 1.5rem;
	/* max-width: 43rem; */

	max-width: 41.5rem;
}

#heading-number{
	padding-bottom: .5rem;
}

.author-info p{
	font-size: 1rem;
	padding: 0;
}

.author-info{
	padding-bottom: 1rem;
}

em{
	font-weight: bold;
	text-decoration: underline;
}

#first-h2{
	margin-top: 1rem;
	padding-top: 2.5rem;
	position: sticky;
	top: -1.6rem;
}


h2{
	font-family: var(--title-font-family);
	font-size: 2rem;
	font-weight: bold;
	line-height: 2.4rem;
	padding: 1.2rem 0 1.2rem 0;
}

h3{
	font-family: var(--title-font-family);
	font-size: 1.6rem;
	font-weight: bold;
	padding: 1rem 0;
}

blockquote{
	font-size: 1.25rem;
	padding: 2% 7% 6% 6%;
	max-width: 44rem;
	color: #999999;
}

footer{
	font-family: var(--title-font-family);
	font-size: 1.25rem;
	font-weight: 450;
	/* margin: 2.5rem -1.25rem -1.25rem; */
	padding: 2rem 1.25rem;
	padding-left: 5%;
}

html{
	scroll-behavior: smooth;
}

#top{
	padding: .5rem 1rem;
	border-radius: 50%;
	position: fixed;
	right: 4vw;
	bottom: 4.5vh;
}

@media (min-width: 425px){

	nav{
		justify-content: flex-start;
	}

}

@media (min-width: 768px){

	nav{
		justify-content: flex-start;
		padding-left: 3%;
	}

	nav ul li:nth-child(1) a:hover{
		font-weight: bold;
	}

	nav ul li:nth-child(2) a:hover{
		background-color: #adbffd;
		border-radius: 50%;
		padding: .52rem .62rem;
		font-weight: bold;
	}

	nav ul li:nth-child(3) a:hover{
		background-color: #d0ff71;
		border-radius: 50%;
		padding: .62rem .62rem;
		font-weight: bold;
	}

	nav ul li:nth-child(4) a:hover{
		background-color: #ff6735;
		border-radius: 50%;
		padding: .62rem .62rem;
		font-weight: bold;
	}

	body{font-size: 1.25rem;}

	header{
		padding: 5%;
	}

	h2{	padding-left: 3%;}

	h3{	padding-left: 3%;}

	section p{	
		padding-left: 3%;
	}

	blockquote{
		font-size: 1.5rem;
	}

}