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

body {
    background-color: hsl(240, 69%, 29%);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: hsl(60, 100%, 50%);
}

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

h1 span {
    flex: 1 0 auto; /* grow, shrink, basis */
    padding: 12px 0;
    text-align: center; 
    font-size: 5em;
    background-color: hsla(200 100% 100% /.4); /* also rgba(255,255,255, .4) is the same */
    margin: 8px;
}
p.subtitle {
    background-color: rgba(255,255,255,.4);
    text-align: center;
    padding: 12px;
    margin: 0 8px;
    font-size: 2em;
    font-variant: small-caps;
    color: hsl(60, 100%, 50%);
}

section.examples {
    margin: 8px;
    min-height: 200px;
    background-color: rgba(255,255,255,.6);
    padding: 4px 0; /* top/bottom and left/right */
    display: flex; /* converts to a flexbox container/ side by side */
    flex-flow: row wrap; /* displays in a row, wraps when needed*/
    justify-content: center;
}
.examples div { /* divs are bock elements */
    border: 4px solid red;
    margin: 8px;
    flex: 0 0 30%;
    aspect-ratio: 16/9; /* preserve aspect-ratio with changing width*/
    min-width: 300px; /* min-width for phones */
    position: relative; /* pos relative for the parent */
    font-size: 2em;
    text-align: center;
}


/*direct child selector */
.examples > div> p {
    position: absolute; /* use abs position in a relative position parent */
    top: 0px; left: 0px; width: 100%;
}

div.example1 { /* border-radius */
    width: 240px; height: 240px;
    min-width: 240px; max-width: 240px; /* make ex1 different */
    border-radius: 50%; /* makes this block a circle.  1=corner starts to round til you get to 50=circle*/
}

div.example2 { /* stripes out of gradients */
    background-image: repeating-linear-gradient(to bottom right, yellow 0px,yellow 20px,purple 21px,purple 40px,purple 41px); /* 0-20px = yellow 20-40px =purple*/
    color: black;
}

div.example3 { /* transition color on hover */
    background-color: yellow;
    transition: background-color 0.4s ease-in;
    color: purple;
}
    div.example3:hover {
    background-color: purple;
    color: yellow;
}

div.example4 { /* box-shadow */
    box-shadow: purple -5px 5px 5px 5px;
    
}

div.example5 {
    background-image: url( "../images/monkey-coding.jpg");
    background-size: 300px 240px;
    flex-basis: auto;
}

div.example6 {
    background-image: repeating-radial-gradient(yellow 0px,yellow 20px,purple 21px,purple 40px,purple 41px); /* 0-20px = yellow 20-40px =purple*/
    color: black;
}