:root
{
	--max-width: 960px;
	
	--dsk-font-size0: 0.8em; /* 16 px */
	--dsk-font-size1: 1em; /* 16 px */
	--dsk-font-size2: 1.5em;
	--dsk-font-size3: 2.5em;
	
	--mob-font-size3: 1.55em; /* 62% reduction */
	
	--var-primary-rgb: rgb(33, 150, 243);
	--var-secondary-rgb: rgb(0, 105, 192); /* rgb(21, 101, 192); */ /* 1565c0 */
	--var-secondary-rgba: rgba(0, 105, 192, 0.5); 
	
	--var-padding-index-mobile: 0.75rem;
	
	--var-debug-border: none;
}

html,body
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: var(--dsk-font-size1);
	line-height: 1.5rem;
	margin: 0;
	padding: 0;
	color: rgb(30, 30, 30);
	box-sizing: border-box;
}

section
{
	display: flex; 
	flex: 1 1 0; 
	flex-direction: row;
	justify-content: center; 
	align-items: center; 
	border: 1px var(--var-debug-border) red;
}

section > div
{
	display: flex; 
	flex: 1 1 0; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	max-width: var(--max-width); 
	border: 1px var(--var-debug-border) yellow;
	box-sizing: border-box;
}

.index-heading-wrapper
{
	box-sizing: border-box;
	padding: 3rem var(--var-padding-index-mobile);
	color: white;
}

.heading-h1, .heading-h2, .heading-testimonial
{
	display: flex; 
	flex-direction: column; 
	border: 1px var(--var-debug-border) red;
	font-weight: 600;
	margin: 1rem 0;
	text-align: center;
}

.heading-h1
{
	font-weight: 700;
	font-size: var(--dsk-font-size3);
	line-height: 1.35em;
}

.heading-testimonial
{
	font-style: italic;
}

.content-lesson-wrapper
{
	align-items: stretch; /* not using flex-start here because it has strange behaviour on mobile -- 2 lines bug */
	margin-bottom: 2rem;
	box-sizing: border-box;
}

.content-category
{
	font-size: var(--dsk-font-size3);
	font-weight: 600;
	padding: 2rem 0 0 0;
	line-height: 2rem;
	border: 1px var(--var-debug-border) red;
	box-sizing: border-box;
}

.content-category-desc
{
	font-weight: 600;
	padding: 1rem 0;
	border: 1px var(--var-debug-border) red;
	box-sizing: border-box;
}

.content-lesson
{
	margin: 0.15rem 0;
	border: 1px var(--var-debug-border) green;
}

.content-lesson > a
{
	text-decoration: none;
	color: var(--var-secondary-rgb);
}

.greyed
{
	color: rgb(100, 100, 100);
}

@media only screen and (max-width: 900px)
{
	section > div
	{
		/* This affects the heading section. Putting all elements to the left
           when in mobile mode. Not sure though what effects it has on the content
		   section but by the time it reaches 900px the div should be aligned to
           left anyway since the max-width is 960 pixels.
		*/
		justify-content: stretch;
		align-items: stretch;
	}

	.index-heading-wrapper
	{
		padding-bottom: 2rem;
	}

	.heading-h1
	{
		font-size: var(--mob-font-size3);
	}

	.heading-testimonial, .heading-h1, .heading-h2
	{
		text-align: left;
		border: 1px var(--var-debug-border) yellow;
	}
	
	.content-lesson-wrapper
	{
		padding-left: var(--var-padding-index-mobile);
		padding-right: var(--var-padding-index-mobile);
		box-sizing: border-box;
	}
	
	.content-category
	{
		font-size: var(--dsk-font-size2);
	}
}