/* Flexbox Part 1 */

#flex-section1 ul {
	list-style-type: none;
	display: flex;
	justify-content: space-evenly;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
}

/* end Flexbox Part 1 */


/* Flexbox Part 2 */

#flex-section2 ul {
	list-style-type: none;
	display: flex;
	justify-content: space-evenly;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
}

#flex-section2 li {
	display: flex;
	flex-basis: 0;
	flex-grow: 1;
}

#flex-section2 .item1 {
	
}

#flex-section2 .item2 {
	order: 3;
}

#flex-section2 .item3 {

}

/* end Flexbox Part 2 */


/* Flexbox Part 3 */

#flex-section3 .box {
	display: flex;
	justify-content: center;
	align-items: center;
}

#flex-section3 .tags ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	margin: 0px 0px;
	padding: 0px 0px 0px 0px;
}

/* end Flexbox Part 3 */


/* Grid Part 1 */

#grid-section1 .grid {
	display: grid;
	grid-template-columns: auto auto auto auto;
	gap: 20px;
	grid-template-rows: 100px 100px;
}

/* end Grid Part 1 */


/* Grid Part 2 */

#grid-section2 .gridboxblue {
	
	grid-row: 1 / span 3;
	grid-column: 2 / span 3;
	z-index: 1;
}

#grid-section2 .gridboxred {
	grid-row: 2 / 2;
	grid-column: 1 / span 2;
}

/* end Grid Part 2 */


/* Grid Part 3 */

#grid-section3 .grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 100px 300px 100px; 
	gap: 10px;
}

#grid-section3 .box1 {
	grid-column: 1 / span 2;
	order: 1;
}

#grid-section3 .box2 {
	order: 3;
}

#grid-section3 .box3 {
	order: 2;
}

#grid-section3 .box4 {
	grid-column: 1 / span 2;
	order: 4;
}

/* end Grid Part 3 */


/* Transition Part */

#transition-section .box a {
	display: inline-block;
	background-color: #ccc;
	color: #000;
	padding: 20px;
	text-decoration: none;
	transition-duration: 3s;
}

#transition-section .box a:hover {
	background-color: #cc0000;
	color: #fff;
	transition-duration: 0.5s;
}

/* end Transition Part */