@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Space+Grotesk&display=swap');

:root{
	/* colors */
	--article3-primary-color:#6ec6f9;

		/* typefaces */
		--font-family-primary:"Space Grotesk",serif;
		--font-family-secondary:"Roboto Mono",monospace; "Space Grotesk",serif;
	
}

/* top nav */
header{
	background: var(--article3-primary-color);
	padding-bottom:2rem;
}

/* HEADINGS */

/* big-heading */
h1{
	font-size:4.5rem;
	line-height:calc(var(--font-size-h1)+1rem);
	margin:var(--spacing-xl);
}

/* section stickies heading */
h2{
	background-color:var(--article3-primary-color);
	color:var(--primary-color);
	border-bottom:0.2rem solid #121212;
}

/* hero blurb */
h5{
	font-family: var(--font-family-primary);
	font-size: 1.2rem;
	line-height: 2rem;
}

p{
	font-family:var(--font-family-primary);
	font-size:1.1rem;
	line-height:1.8rem;
	margin-left:2.25rem;
	margin-right:2.25rem;
}

/* table of content */
aside{
	padding-bottom:var(--spacing-xl);
}

/* blockquote */
blockquote{
	background-color:white;
	border-left:8px solid #0f17ac;
	padding: 0.5rem 0.2rem 0.2rem 0.5rem;
	border-radius:0.5rem;
	max-width:27rem;
}
blockquote p {
	font-size:1rem;
	padding-top:1.2rem;
	padding-bottom:1rem;
}

#written-by, #duration{
	color:var(--accent-color);
	font-size:0.9rem;
}

/* table of content */
.table_of_content{
	padding-bottom:var(--spacing-lg);
}


.article-info{
	padding-top:1.5rem;
	padding-bottom:2rem;
}

#content{
	font-weight:800;
}




.heading-art{
	font-family:'Space Grotesk', serif;
}


/* top nav */
.header{
	font-family: var(--font-family-primary);
	font-size: 1rem;
	padding-top: 2rem;
	margin-left: 2rem;
	margin-right: 2rem;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

/* inside header */
.project{
	font-weight:bolder;
	color: #0f17ac;
	text-decoration:underline;
}

/* NAV BAR */
.nav-container {
	overflow: hidden;
	display: flex;
	position: fixed;
	bottom: 0;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	background-color:white;
	outline-style:solid;
	outline-color:#121212;
	border-radius:0.5rem;
}

.nav-item {
	background-color: white;
	justify-content: center;
	padding:1rem;
	text-align: center;
	font-size:1.3rem;
}


.article-info{
	display: flex;
	flex-direction:row;
	font-family:"nunito",sans-serif;
}

.layout{
	display:flex;
	flex-direction:column;
}
/* table content */
details{ 
	margin:1rem;
	background-color:#0f17ac;
	color:white;
	padding:1rem;
	border-radius:0.5rem;
	font-family:'Space Grotesk', serif;
	margin:1.5rem;
	height: 1.5rem;
} 

.big-quote{
	background-color:beige;
	font-family:'Space Grotesk',serif;
	font-size:2rem;
}

.quote{
	background-color:white;
	/* padding:0.3rem; */
	border-left:8px solid #0f17ac;
	border-radius:0.5rem;
	max-width:30rem;
}

.quotes {
	padding-top: 0;

}

.quote:hover{
	background-color:white;
	padding:0.3rem;
	border-left:8px #0f17ac;
	border-radius:0.5rem;
	transition:0.5s;
	rotate:2deg;
}

.quote p{
	transition:0.5s;
}

.quote p:hover{
	background-color:white;
	color:black;
}

.quote:hover .quote-popup{
	background-color:black;
}
.quotes {
	padding-top: 0;

}

/* next article button */

#button {
	font-family: var(--font-family-primary);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.8rem;
	padding-right: 0.8rem;
	background-color:#6ec6f9;
	color: black;
	border: 2px solid #000000;
	box-shadow: 0px 0px 0px 0px #121212, 3px 3px 0px 0px #121212;
	border-radius: 0.5rem;
	border-radius: 0.8rem;
	margin-left:9rem;
}

#button:hover {
		font-family var(--font-family);
		font-size:1rem;
		background-color: #0f17ac;
		color: white;
}

/* sticky-aside */
.sticky-aside {
	background-color: white;
	color: black;
	position: sticky;
	max-width: 20rem;
	margin-left: 2rem;
	margin-right: 2rem;
	border-radius:0.5rem;
	border: solid 2px #121212;
	z-index:-100;
}

#intro{
	background-color: #ffffff;
	color: black;
	outline: 0.2rem solid #121212;
	border-radius: 1rem;
	padding: 1rem;
	margin-left: 2rem;
	margin-bottom:4rem;
}

.box-categories {
	font-family:var(--font-family-primary);
	font-size:1.5rem;
	display: grid;
	grid-template-columns: repeat(1, 0.5fr);
	grid-template-rows: repeat(1, 0.5fr);
	/* grid-column-gap: 0px; */
	grid-row-gap:20px;
	margin-left:2rem;
}

.decorative-01 {
	/* adjust to control the size */
	width:4.2rem; /* adjust to control the size */
		aspect-ratio: 1;
		--g:/23.606% 23.606% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
		mask: 100% 50% var(--g),90.451% 79.389% var(--g),65.451% 97.553% var(--g),34.549% 97.553% var(--g),9.549% 79.389% var(--g),0% 50% var(--g),9.549% 20.611% var(--g),34.549% 2.447% var(--g),65.451% 2.447% var(--g),90.451% 20.611% var(--g),radial-gradient(100% 100%,#000 36.327%,#0000 calc(36.327% + 1px));
		background:#121212;
		position:absolute;
		top:31rem;
		left:21rem;
		
}

.decorative-02 {
	display:inline-block;
	/* modified info in homepapge.css */
	width:4rem; /* adjust to control the size */
		aspect-ratio: 1;
		--g:/23.606% 23.606% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
		mask: 100% 50% var(--g),90.451% 79.389% var(--g),65.451% 97.553% var(--g),34.549% 97.553% var(--g),9.549% 79.389% var(--g),0% 50% var(--g),9.549% 20.611% var(--g),34.549% 2.447% var(--g),65.451% 2.447% var(--g),90.451% 20.611% var(--g),radial-gradient(100% 100%,#000 36.327%,#0000 calc(36.327% + 1px));
		background: radial-gradient(#92fa31, #c8f63f 50%, #c8f63f 75%, #c8f63f 75%, #c8f63f  50%);
		position:absolute;
		top:31.2rem;
		left:20.8rem;
}

/* .div1 { 
	background-color:white;
	outline: solid 2px black;
	border-radius:0.5rem 0 0 0;
}
.div2 {
	background-color:white;
	outline: solid 2px black;
	border-radius: 0 0.5rem 0 0;
}

.div3 {
	background-color:white;
	outline: solid 2px black;
	border-radius: 0 0 0 0.5rem ;
}

.div4 {
	background-color:white;
	outline: solid 2px black;
	border-radius: 0 0 0.5rem 0;
} */

.div1 { 
	background-color:#BDE662;
	outline: solid 2px black;
	border-radius:1rem;
}
.div2 {
	background-color:#F5A3DE;
	outline: solid 2px black;
	border-radius:1rem;
}

.div3 {
	background-color:#6ec6f9;
	outline: solid 2px black;
	border-radius: 1rem;
}

.div4 {
	background-color:white;
	outline: solid 2px black;
	border-radius:1rem;
}

.four-categories{
	font-family:var(--font-family-primary);
	font-size:2rem;
	max-width:15rem;
}

.bold-text{
	font-family:var(--font-family-primary);
	font-weight:bold;
	font-size:1.2rem;
}

.empty-sticky { display:none;}

/* section heading */
.sticky-header {
	max-width:55rem;
	margin: auto;
	position:sticky;
	top:0rem;
	z-index:300;
}

@media (min-width:770px){
	h1{
		font-size:9.5rem;
		line-height:9rem;	
	}
}

@media (min-width:1280px){

#title-art{
	font-size:12rem;
	line-height:9rem;
	color:white;
}
	.decorative-01 {
		/* adjust to control the size */
		width:4.2rem; /* adjust to control the size */
			aspect-ratio: 1;
			--g:/23.606% 23.606% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
			mask: 100% 50% var(--g),90.451% 79.389% var(--g),65.451% 97.553% var(--g),34.549% 97.553% var(--g),9.549% 79.389% var(--g),0% 50% var(--g),9.549% 20.611% var(--g),34.549% 2.447% var(--g),65.451% 2.447% var(--g),90.451% 20.611% var(--g),radial-gradient(100% 100%,#000 36.327%,#0000 calc(36.327% + 1px));
			background:radial-gradient(#92fa31, #c8f63f 50%, #c8f63f 75%, #c8f63f 75%, #c8f63f  50%);
			position:absolute;
			top:28rem;
			left:48.5rem;
	}

	.decorative-02{
		display:none;
	}


	#mobile-footer{display:none}

	.empty-sticky {display:block;}

	.empty-sticky{
	background-color:#fafaee;
	height:2.4rem;
	position:sticky;
	top:0;
	z-index:200;
	max-width:55rem;
	margin: auto;
	margin-bottom:0.5rem;
	}

	/* big article heading */
	h1{
		color:black;
		font-size:10rem;
		line-height:10rem;	
		border-bottom:2rem;
	}

	/* table of content */
	aside {
		grid-column: 1;
		position: relative;
		width: 25rem;
	}

	article {
		grid-column:2;
		margin-right:2rem;
	}

	/* blockquote */
	p, blockquote {
		max-width:48rem;
		}

	blockquote{
		border-left:8px solid #121212;
		outline:solid 2px #121212;
		padding:0.2rem;
		border-radius:0.5rem;
		max-width:30rem;
		margin-left:20rem;
	}

	blockquote:hover{
		border-left:8px solid #121212;
		padding:0.2rem;
		border-radius:0.5rem;
		max-width:30rem;
		margin-left:20rem;
		transition:0.5s;
		rotate:1deg;
	}

	blockquote p{
		transition:0.5s;
	}

	blockquote p:hover{
		background-color:white;
		color:black;
	}

	blockquote:hover .quote-popup{
		background-color:black;
	}

	/* linking */
	a{
		text-decoration: none;
		color:#121212;
	}

	a:hover{
		color:black;
		font-size:1.15rem;
		font-weight:bold;
		text-decoration:underline;
		content:"article";
	}

/* CLASS-stylings */



	/* section heading */
	.sticky-header {
		max-width:55rem;
		margin: auto;
		position:sticky;
		top:2.54rem;
		z-index:200;
		margin-bottom:3rem;
	}

/* IDs stylings */
	#hover-title:hover{
		color:#0f17ac;
	}
	
	.intro{
		color: #ffffff;
		outline-style:solid;
		outline-color: 2px #121212;
		border-radius:0.5rem;
		padding:1.7rem;
		z-index:1;
		margin-bottom:6rem;
	}

	/* h1 styling */
	#hover-title:hover{
		color: var(--article3-primary-color);
	}

	/* next buttons */
	#button {
		margin-left: 30rem;
	}

	#button {
		font-family:var(--font-family);
		font-size:1rem;
		padding-top:0.5rem;
		padding-bottom:0.5rem;
		padding-left:0.8rem;
		padding-right:0.8rem;
		background-color: #ffffff;
		color: black; 
		border: 2px solid #000000;
		border-radius:0.5rem;
		margin-left:68rem;
	}

	#button:hover {
		font-family var(--font-family);
		font-size:1rem;
		background-color: #0f17ac;
		color:white; 
		padding-top:0.5rem;
		padding-bottom:0.5rem;
		padding-left:0.8rem;
		padding-right:0.8rem;
		border: 2px solid #000000;
		border-radius:0.5rem;
		margin-left:72rem;
	}

	/* citation in footer */
	#citation{
		font-size:0.9rem;
	}

@media (min-width:1440px){
}

#question{
	font-weight:bold;
	color:rgba(218, 102, 123, 1);
}

.speech-bubble {
	position: relative;
	padding:1.2rem;
	background: #fefefe;
	outline: 0.2rem solid #6ec6f9;
	border-radius:2rem;
	max-width:28rem;
	z-index:-200;
}



.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 16px solid transparent;	
	border-top-color: #6ec6f9;
	border-bottom: 0;
	margin-left: -16px;
	margin-bottom: -16px;
}