/* 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/england.jpg);
    background-size: cover;
    padding-bottom: 400px;
}

header {
    background-color: hsla(200, 100%, 20%, .7);
    color: hsla(20, 100%, 40%, 1); /* complimentary color is opposite color wheel. add or subtract 180 */
    padding: 40px; margin: 20px auto;
    text-align: center;
    border-radius: 20px;
    text-shadow: 0px 0px 3px #fff, 3px 4px 3px #000;
    box-shadow: -2px 4px 0px #000;
    width: 70%;
}

.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: 80%; 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;
}

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

.flex_child:nth-child(2) {
    background-image: linear-gradient(to bottom right, red, white, blue);
}

.flex_child:nth-child(3) {
    background-image: repeating-linear-gradient(90deg, darkgreen, 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);
}