/* css reset rule */

* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body {
	background-color: hsl(150 50% 80% /1);
	font-family: verdana;
}	

h1 {
	text-align: center;
	text-transform: uppercase;
	border-bottom: 2px solid #222;
	margin: 8px;
	padding-bottom: 8px; 
}

section {
	border: 4px solid #700;
	width: 80%;
	margin: 20px auto;
	min-height: 200px;
	border-radius: 8px;
}

h2 { /* Why are all my divs getting this text automatically? 
but if I change the body for example only the heading1 text is affected */
	color: #700; margin: 8px;
	font-family: verdana;
}

.threeboxescontainer {
	min-height: 180px;
	margin: 16px; 
	background-color: hsl(200 50% 100% / .8);
	border-radius: 8px;
	padding: 12px 0px;
	/* text-align: center; only centers if the blocks are inline-block */
	display: flex; /* makes this a flexbox container */
	justify-content: center; /* centers flexbox item */
	flex-wrap: wrap; /* wraps to a new line when needed */
}

.threeboxescontainer > div {
	background-color: hsl(200 50% 60% / 1);
	width: 200px;
	height: 150px;
	margin: 12px;
	border-radius: 8px;
	/* display: inline-block; works really well in many cases */ 
	flex-grow: 1; /* expands the items when there's room */
	position: relative; /* parent=relative child=absolute, kind of gives
						   starting point for element instead of corner of page (if you removed 
						   this line */
}

.disc { 
	background-color: red;
	width: 50px; height: 50px;
	border-radius: 50%;
	text-align: center;
	line-height: 48px; /* hack for veritcal centering 1 line of text */
	position: absolute; /* complete control where the element is placed */
	bottom: -25px;  /* 25 pixels is half of the height of the disc */
	right: 30px;
	/* transform: translateY(50%); the translate function in the transform property.
								  Used to adjust the positioning of an element */ 
}

/* Could you just use the threeboxescontainer css but changed specific things
for the five boxes seciton, like the color? Like inheritance? Maybe by putting it in another div? */
.fiveboxescontainer {
	background-color: #FFC;
	min-height: 180px;
	text-align: center;
	padding: 15px;
	margin: 12px;
	border-radius: 8px;
}

.fiveboxescontainer > div {
	width: 120px; height: 200px;
	background-color: #393;
	display: inline-block;
	transform: skew(5deg) rotate(-5deg);
	margin: 12px 8px;
}