html,
body
{
	/* font-family: 'Noto Sans', sans-serif; */
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 0.4cm;
	margin: 0;
	background-color: white;
	color: rgb(30, 30, 30);
	height: 100%;
	scroll-padding-top: 3rem; /* added july 2022 to leave space between top of the page and nav-bar */
}

.central-column
{
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 960px;
	margin: 0px auto;
	border: 4px none yellow;
	box-sizing: border-box;
	text-align: left;
}

/* index page */

/*******/

.category-table
{
	display: table-row;
}

.category-table-cell
{
	display: table-cell; 
	border: 1px none blue;
	width: 100%; 
}

.category-name
{
	/* see .lesson-row's comment */
	display: block;
	width: 100%;
	border: 1px none green;
	font-size: 2.5rem;
	font-weight: 700;
	margin: 4rem 0 0rem 0;
}

.category-long-summary
{
	/* see .lesson-row's comment */
	display: block;
	width: 100%;
	border: 1px none red;
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0.5rem 0 0.5rem 0;
	flex: 1;
}

.lesson-col
{
	display: flex;
	flex-direction: column;
	flex: 1;
	box-sizing: border-box;
	border: 1px none green;
}
.lesson-row
{
	/* Don't change that. Don't change to flex more specifically
	   I had tons of problems trying to figure out why the rendering
	   of the font size on Android is not the same than on Desktop.
	   It seems to be related to something called text-size-adjust
	   but I can't get this to work. Somehow I don't have the problem
	   with block.
	*/
	display: block;
	width: 100%;
	border: 4px none yellow;
	box-sizing: border-box;
	font-size: 1.25rem;
	font-weight: 400;
	padding: 0.15rem 0;
}

.inactive-lesson
{
	color: rgb(100, 100, 100);
}

.lesson-row a
{
	text-decoration: none;
	color: #1565C0;
	/* font-weight: 400; */
}

/** INDEX PAGE **/

.full-page
{
	/*
	position: relative;
	*/
	margin: 0; 
	padding: 0;
	width: 100%; 
	border: 4px none yellow;
	color: white;
}

.cursive
{
	display: inline-block;
	text-align: center; 
	font-size: 4rem; 
	line-height: 4rem;
	font-family: 'Gloria Hallelujah', cursive;
	border: 1px none red;
}

.testimonials
{
	font-size: 2rem;
	font-weight: 300;
	font-style: italic;
	text-align: center;
	border: 1px none red;
	width: 60%;
	margin: 2rem auto;
}

.full-page-info
{
	font-size: 2rem;
	text-align: center;
	margin: 1rem auto;
	border: 1px none green;
}

.center-arrow
{
	border: 1px none orange; 
	position: absolute; 
	left: 0; 
	right: 0; 
	bottom: 0;
	margin-left: auto; 
	margin-right: auto; 
	padding: 0;
	width: 100px;
	color: white;
	text-align: center;
}

/*** footer ***/

.footer
{
	display: flex;
	flex-direction: column;
	font-size: 1em;
	background-color: rgb(33, 150, 243); /* #2196F3; #1565C0; */
	color: white; 
	box-sizing: border-box;
	margin-top: 4rem;
	padding: 2rem 0 2rem 0; 
	border: 1px none black; 
}

.footer	a
{
	color: white;
}

.link-footer
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	border: 1px none red;
	text-align: center;
	margin: 1rem;
}

.footer-copyright-notice 
{
	display: flex;
	flex-direction: column;
	border: 1px none green;
}