@charset "UTF-8";


h1, h2{
	overflow: auto;
	
	font-weight: normal;
}

h2{
	font-size: 1.75rem;
	
}


.section-header{
	font-size: 1rem;
}


/*
 HERO SECTION
*/

div.content>div.hero>h1{
	font-size: 2.5rem;
	margin-block: 2rem;
}

div.content>div.hero>h2{
	font-weight: normal;
	font-size: 1.5rem;
	
	margin-block: 0.5rem;
}

.content>div.hero>.cta, div.cta {
	display: flex;
	justify-content: center;
	margin-block: 5rem;
	
}

.hero>p{
	max-width: 60rem;
	
	margin-block: 3rem;
}




/*

*/

.content > ul {
	padding-inline: 1rem;
	
	display: grid;
	
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	
	margin-block: 2rem;
}

.content >  ul > li{
	font-size: 1.25rem;
	
	list-style: none;
}

.content > ul > li > p{
	font-size: 1rem;
}

p.cta-text{
	font-size: 1.5rem;
	text-align: center;
}

/*
TODO: make it so header does not break, and is clamped based on size maybe
*/



/*
animations 
*/

.fade-text {
  animation: fadeInOut 4s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}


@media screen and (max-width: 1000px) {

	.content > ul {
		grid-template-columns: 1fr;
	}
	
}