@charset "utf-8";

/*
	New Perspectives on HTML5 and CSS3, 8th Edition
	Chapter 5
	Chapter Work

	Author: Chris LaFleur
	Date: 10/13/23  

	Filename: tf_flex.css

	This file contains the flex styles used in the Trusted Friends
	Pre-K Classes page.

*/


/* 	================
	Base Flex Styles
	================
*/

body{
	display: flex;
	flex-flow: row wrap;
}

header, footer{
	width: 100%;
}

aside{
	flex: 1 1 120px;
}

section#main{
	flex: 3 1 361px;
}

section#topics{
	display: flex;
	flex-flow: row wrap;
}

section#topics article{
	flex: 1 1 200px;
}



/* 	=========================
	Mobile Styles: 0 to 480px 
	=========================
*/

@media only screen and (max-width: 480px) {
	aside{
		order: 99;
	}
	
	footer{
		order: 100;
	}
}



/* ============================================
   Tablet and Desktop Styles: 481px and greater 
   ============================================
*/

@media only screen and (min-width: 481px) {
	nav.horizontal ul{
		display: flex;
		flex-flow: row nowrap;
	}
	
	nav.horizontal li{
		flex: 1 1 auto;
	}
}