/* reset rule for my styles
    set all elements to a base of zero 
    for margin and padding */
* {
    margin: 0; padding: 0;
}

body {
    background-image: url(../images/tree.jpg);
    background-size: cover;
    font-family: verdana;
    padding-bottom: 400px;
}

header {
    background-color: hsla(200, 100%, 20%, 0.7);
    color: hsla(320, 100%, 20%, 1); /* complimentary color is opposite the color wheel */
    padding: 40px; margin: 20px auto;
    text-align: center;
    border-radius: 20px;
    text-shadow: 0px 0px 3px #FFF, 3px 4px 3px #000;
    box-shadow: -3px 4px 0px #000;
    width: 70vw;
}

.cool-examples {
    border: 4px solid yellow;
    margin: 20px;
    border-radius: 20px;
}

.cool-examples ul {
    margin-left: 40px;
    list-style-type: square;
}

.cool-examples ul li::marker {
    color: orange; font-size: 20px;
}

.cool-examples li {
    margin-bottom: 20px;
}

.cool-examples li a {
    color: #FFF; text-decoration: none;
    text-shadow: 2px 2px 3px #000;
}

article {
    width: 90%; margin: 40px auto;
    background-color: hsla(320, 100%, 100%, .8)
}

article > h2 {
    font-weight: normal;
    text-align: center;
    text-shadow: 0px 0px 2px hsl(320,100%,20%);
    color: transparent;
    margin: 10px 0px 40px 0px;
}

article > .flex_parent {
    border: 4px solid yellow;
    min-height: 200px;
    display: flex; /* make a flex parent */
    flex-flow: row wrap; /* creates a row that can wrap */
    justify-content: center; /* controls alignment */
}

article .flex_child {
    border: 4px solid purple;
    min-height: 220px;
    margin: 8px;
    flex: 0 0 200px; /* grow, shrink, and the basis */
}

.flex_child h2 {
    background-color: #222; text-align: center;
    color: #FFC; font-weight: normal;
    font-size: 10pt;
}

.flex_child:nth-child(1) {
    background-color: green;
    background-image: url(../images/mittens.jpg), url(../images/woman-wht-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -100px 0px, 20px 0px;
}

.flex_child:nth-child(2) {
    background-image: linear-gradient(120deg, red, white 20%, blue 40%);
}

.flex_child:nth-child(3) {
    background-image: repeating-linear-gradient(90deg, darkgreen 0px, darkgreen 20px, yellow 20px, yellow 40px);
}

.flex_child:nth-child(4) {
    background-image: conic-gradient(green,yellow, orange, black);
}

.flex_child:nth-child(5) {
    background-image: radial-gradient(green,yellow, orange, black);
}