/*Import Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');


html{
	/*global variables*/
	--c1: #6b6bd6;
	--c2: #e74f4f;
	--c3: #fc921f;
	--c4: #149ece;
	--c5: #50ff00;
	--c6: yellow;
	--c7: black;
	--c8: white;
	--c9: silver;
	--c10: gold;
	/*Per each figure, not all "figures"*/
	--graph-width: 325px;
}

/****************************************************/
/***********************  BODY  *********************/
/****************************************************/
body{
	display:grid;
	grid-template-columns: auto;
	background: lightgoldenrodyellow;
	margin: 0;
}


/**********************************************/
/****************  2 - Figures  ***************/
/**********************************************/
h1{
	margin: 20px auto;
	font-family: system-ui, sans-serif;
}

.figures{
	display: flex;
	justify-content: center;
	flex-flow: wrap;
	gap: 2rem;
	max-width: max(350px, 100vw);
}

/**********************************************/
/****************  2.1 - Graphs  **************/
/**********************************************/
#graph1{
	width: var(--graph-width);
	max-width: var(--graph-width);
	/*makes a square as a opposed to a rectangle*/
	aspect-ratio: 1;
	border-radius: 50%;
	/*Radial gradient generates concentric circles.
	  Three are done here w/ the outer & inner circles
	  the same color as the background & the middle circle
	  set to transparent (this allows the background 
	  'conic-gradient to show through).*/
	background-image: radial-gradient(lightgoldenrodyellow 0 40%, 
		                              transparent 40% 70%, 
		                              lightgoldenrodyellow 70%), 
	                  /*Conic gradient varies as you go 360 
	                    degrees around a center point*/
	                  conic-gradient(from 30deg, 
	                  	             var(--c1) 0% 30%, 
	                  	             var(--c2) 30% 55%, 
	                  	             var(--c3) 55% 70%, 
	                  	             var(--c4) 70% 90%,
	                  	             var(--c5) 90% 100%,
	                  	             var(--c6) 100% 100%,
	                  	             var(--c7) 100% 100%,
	                  	             var(--c8) 100% 100%,
	                  	             var(--c9) 100% 100%,
	                  	             var(--c10) 100% 100%);
}

#graph2{
	width: var(--graph-width);
	max-width: var(--graph-width);
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(lightgoldenrodyellow 0 40%, 
		                              transparent 40% 70%, 
		                              lightgoldenrodyellow 70%), 
	                  conic-gradient(from 30deg, 
	                  	             var(--c1) 0% 37%, 
	                  	             var(--c2) 37% 88%, 
	                  	             var(--c3) 88% 100%);
}

#graph3{
	width: var(--graph-width);
	max-width: var(--graph-width);
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(lightgoldenrodyellow 0 40%, 
		                              transparent 40% 70%, 
		                              lightgoldenrodyellow 70%), 
	                  conic-gradient(from 30deg, 
	                  	             var(--c1) 0% 25%, 
	                  	             var(--c2) 25% 50%, 
	                  	             var(--c3) 50% 75%,
	                  	             var(--c4) 75% 95%,
	                  	             var(--c5) 95% 100%,
	                  	             var(--c6) 100% 100%,
	                  	             var(--c7) 100% 100%);
}

/**********************************************/
/****************  2.2 - Legend  **************/
/**********************************************/
.legend{
	max-width: 300px;
	font-size: 0.9rem;
	gap: 1rem;
	font-family: system-ui, sans-serif;
	font-size: 1rem;
	margin-top: 1rem;
}

/**********************************************/
/************  2.2.1 - Legend Word  ***********/
/**********************************************/
.legend span{
	position: relative;
	/*padding to the left of the span
	  which in this case is a word/key*/
	padding-inline-start: 1.25rem;

}


/**********************************************/
/***********  2.2.2 - Legend Circle  **********/
/**********************************************/

/*"before" pseudo element (notice the circles appear
  right before the legend text.*/
.legend span::before{
	/*absolute is relative to its parent*/
	position: absolute;
	top: 0.2rem;
	left: 0;
	/*adds content*/
	content: '';
	width: 0.8rem;
	aspect-ratio: 1;
	border-radius: 50%;
}

.legend span:nth-child(1)::before{
	background-color: var(--c1);
}

.legend span:nth-child(2)::before{
	background-color: var(--c2);
}

.legend span:nth-child(3)::before{
	background-color: var(--c3);
}

.legend span:nth-child(4)::before{
	background-color: var(--c4);
}

.legend span:nth-child(5)::before{
	background-color: var(--c5);
}

.legend span:nth-child(6)::before{
	background-color: var(--c6);
}

.legend span:nth-child(7)::before{
	background-color: var(--c7);
}

.legend span:nth-child(8)::before{
	background-color: var(--c8);
}

.legend span:nth-child(9)::before{
	background-color: var(--c9);
}

.legend span:nth-child(10)::before{
	background-color: var(--c10);
}

/**********************************************/
/****************  3 - Article  ***************/
/**********************************************/

article{
  background-color: white;
  border-radius: 10px;
  width: max(96%, 340px);
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

article h2, p{
  margin-left: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
}

article p{
  font-size: 18px;
  margin-right: 10px;
  margin-bottom: 12px;
}

article ul{
	margin-top: 0px;
}

article ul li{
	margin-left: 10px;
	margin-bottom: 4px;
}

hr{
	margin-left: 10px;
	margin-right: 10px;
}