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

body {
    background-color: hsl(355, 90%, 80%);
    font-family: verdana;
    color: hsl(200, 90%, 40%);
    /*margin: 8px; Why did i use a container that one time instead of just using the body as a container*/
}


h1 {
    display: flex; /* converts to flex parent */
} 

h1 span {
    flex: 1 0 auto; /* grow, shrink, basis */
    padding: 12px 0;
    text-align: center;
    font-size: 5em;
    background-color: rgba(255, 255, 255, .4);
    margin: 8px;
}

p.subtitle {
    text-align: center;
    font-size: 4em;
    font-variant: small-caps;
    background-color: rgba(255, 255, 255, .4);
    padding: 12px;
    margin: 0 8px; 
}

section.examples {
    margin: 8px;
    min-height: 200px;
    background-color: rgba(255, 255, 255, .6);
    padding: 4px 0px; /* top/bottom and left/right */ /*still different than side margin but more balanced atleast*/
    display: flex; /* converts to a flexbox container, makes side by side */ 
    flex-flow: row wrap; /* displays in a row, warps when needed */
    justify-content: center; /* center the flex items */
}

.examples div { /* divs are block elements */
    border: 4px solid #345;
    margin: 8px;
    flex: 0 0 28%; /* 20% wouldn't be able to fit 5 boxes because of the margin but couldn't the page have a scrollbar? Or is it in a container or box that can't go beyond the width of the page? */
    aspect-ratio: 16 / 9; /* preserve the aspect ratio */
	min-width: 300px; /* min width for phones */
	position: relative; /* pos relative for the parent */
}


.examples > div > p { /* direct child selector */
	position: absolute; /* use abs position in a relative pos parent */
	top: 30px; left: 0px; 
	background-color: hsl(200, 90%, 40%);
	color: white;
	font-size: 1.5em;
	transform: rotate(-5deg);
	margin: -10px;
	padding: 4px 20px 4px 4px; /* top right bottom left */
}

div.example1 { /* border-radius */
	width: 240px; height: 240px;
	min-width: 240px; max-width: 240px; /* make ex1 different */
	border-radius: 50%; /* make this block a circle */
}

div.example2 { /* repeating-linear-gradient */
	background-image: repeating-linear-gradient(to bottom right, #FF69B4 0px, #FF69FB 20px, #FFFF00 21px, #FFFF23 60px, #FF69FB 61px);
}

div.example3 { /* color transition */
	background-color: #FF69FB;	
	transition: background-color .4s ease-in;
}

div.example3:hover {
	background-color: #FFFF23;
}

div.example4 { /* background-image */
    background-image: url(../images/mewithtoby.jpg);
    background-size: cover;
	background-position: 0px -120px;
}

div.example5 { /* drop-shadow */
	filter: drop-shadow(0px 0px 4px black);
}

div.example6 { /* blur filter */
	filter: blur(2px);
	background-color: orange;
}