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

body {
    background-color: darkblue;
    color: limegreen;
}

h1 {
    text-align: center;
    font-weight: normal;
    text-transform: lowercase;
    border-left: 4px solid green;
    border-bottom: 4px solid green;
    margin: 8px 8px 40px 8px;
    padding: 8px;
}

#samples-parent{
    display: flex;           /* makes flex parent */
    flex-flow:row wrap;
    justify-content: space-between;
    padding: 24px;
    
}

#samples-parent figure{
    border: 4px solid green;
    aspect-ratio: 2/1.5;    /* keeps proportions regardless of width ( 1/1 = square)*/
    flex-grow:inherit;
    flex-basis: 30%;        /* cuts into 3rds without margin set (think of width) */
    border-radius: 8px 0px 8px 0px;/* can use four values to curve only certain areas(starts with top left)*/
    position:relative;      /* use this in parent so child position:relative works*/
    justify-content:space-around;
    }
                           
                            /* descendant uses just a space, child uses >*/
figure h2{
    position: absolute;     /* parent muse be position relative*/
    top: 0;
    left: 0;
    background-color: hsla(220,50%,0%,.5);
    /* hsla is hue, saturation, light, and alpha  the last number gives you transparency*/
    width: 110%;
    text-align: center;
    padding: 4px 0;
    border-radius: 8px 0px 8px 0px;;
    
}

figure figcaption{
    position: absolute;
    top: 70%;
    height: 30%;
    width: 100%;            /* use % to keep size when viewing windows changes size */
    left: 0;
    text-align:left;
    background-color: hsla(200,60%,20%, .6);
    padding: 4px;

}
                            /* use nth-child to select specific areas in group */
#samples-parent figure:nth-child(1){
    border-radius: 40% 40% 40% 40%;

}

#samples-parent figure:nth-child(2){
    overflow: hidden;
}

#samples-parent figure:nth-child(3){
    
}
figure img{
    object-fit:inherit;
   
    
}

#samples-parent figure:nth-child(4) div{
    width: 50%;
    aspect-ratio: 1/1;
    margin: 30px auto; /* first is top and bottom second is left and right */

    background-image:repeating-radial-gradient(red 0px, red 10px, orange 10px, orange 20px);
}

#samples-parent figure:nth-child(5) div{
    width: 50%;
    aspect-ratio: 1/1;
    margin: 30px auto;
    background-image:conic-gradient(red 0%,red 20%,orange 20% , orange 40%,
    yellow  40%, yellow 60% ,purple 60%, purple 80%, blue 80%, blue 100%);
    border-radius: 50%;
}

#samples-parent figure:nth-child(6){
    padding-top: 80px;
    

}
#samples-parent figure:nth-child(6) img{
    float:left;
}
#samples-parent figure:nth-child(6) h3{
    clear:left;             /* this will clear the floating object */
}

#samples-parent figure:nth-child(7) h3{
    text-shadow: -3px 4px 5px red; /* left/right up/down blurry color */
    margin: 80px auto;
    text-align: center;
    font-size:4em;
}
#samples-parent figure:nth-child(8) h3{
    margin: 80px auto;
    text-align:center;
    font-size: 4em;
    transform:skewy(10deg);
}
#samples-parent figure:nth-child(9) {
    background-color:yellowgreen;
    transition:background-color .6s linear; /* changes transition hover action */
}
#samples-parent figure:nth-child(9):hover{ /* changes what happens when mouse hovers over*/
    background-color:orange;
}