/* Styles for Module 4 Participation */

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

body {
    background-color: hsl(28, 87%, 85%);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
    text-align: center;
    font-weight: normal;
    text-transform: lowercase;
    border-left: 4px solid #456;
    border-bottom: 4px solid #456;
    margin: 8px 8px 40px 8px;
    padding: 8px;
    transform: rotate(-3deg);
    border-radius: 0 0  0 32px; /* only rounds lower left corner of square */


}

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

}

#samples-parent figure {
    border: 4px solid hwb(300 30% 45%);
    aspect-ratio: 2/1.5; /* instead of width and height, keeps the size ratio in proportion*/
                       /* keeps the proportion regardless of the width */
    flex-grow: 0;
    flex-basis: 30%;  /* kinda like width */
    margin-bottom: 16px;
    border-radius: 32px 0px 32px 0px;
    position: relative; /* do this so I can position absolute the child */

}
/* descendent selector */
figure h2 {
    position: absolute;
    top: 12px; left: -5%; /* pushes away from the left */
    background-color: hsl(220 50% 50% / .7);
    color: black;
    width: 110%; /* a little bigger than the parent's width */
    text-align: center;
    padding: 4px 0;
    transition: top .7s ease-in-out;

}

figure figcaption {
    position: absolute;
    top: 80%; left: 0;
    width: 100%; height: 20%;
    background-color: hsl(220 50% 40% /.7);
    color: #EEE;
    border-radius: 0 0 24px 0;
    text-align: left;
    padding: 8px;

     
 /* position: absolute;
    bottom: 0px;
    background-color: rgb(92, 120, 220);
    color: white;
    width: 100%;
    text-align: left;
    padding: 4px 0;
    border-radius: 0px 0px 29px 0px; * these were my guesses for what he did */
}

#samples-parent figure:nth-child(1) {
    border-radius: 40% 40% 40px 0;
    border: 16px solid rebeccapurple;

}

#samples-parent figure:nth-child(2) {
   overflow: hidden; /* hides the excess; scroll is nice too */

}

/*
#samples-parent figure:nth-child(3) {
    
  
 }

 #samples-parent figure:nth-child(3) #cover {
      object-fit: cover;
 } */
    


 #samples-parent figure:nth-child(3) div {
    width: 30%; 
    aspect-ratio: 1/1;
    margin: 80px auto;
    border: 4px solid red;
    background-image: conic-gradient(green 0%, green 10%, orange 10%, orange 40%, gray 40%, gray 65%, blue 65%, blue 85%, hotpink 85%, hotpink 100%);

 }


#samples-parent figure:nth-child(4) div {
    width: 30%; 
    aspect-ratio: 1/1;
    margin: 80px auto;
    border: 4px solid red;
    background-image: repeating-radial-gradient(red,red 10px, blue 10px, blue 20px);

  
 }

 #samples-parent figure:nth-child(5) {
    padding-top: 80px;
   
 }
 #samples-parent figure:nth-child(5) img {
    float: left;
 }

 #samples-parent figure:nth-child(5) h3 {
    clear: left;
 }


 #samples-parent figure:nth-child(6) h3 {
    text-shadow: -3px 4px 6px orangered;
    margin: 80px auto;
    text-align: center;
    font-size: 4em;

   
 }

 #samples-parent figure:nth-child(7) h3 {
    margin: 80px auto;
    text-align: center;
    font-size: 4em;
    width: 80%;
    border: 2px solid red;
    transform: rotate(180deg) skewY(5deg);


    
 
 }

 #samples-parent figure:nth-child(8) {
    background-color: yellowgreen;
    transition: background-color .6s linear;
  
 }


 #samples-parent figure:nth-child(8):hover {
    background-color: orangered;

}

#samples-parent figure:nth-child(8):hover h2{
    top: 100px;

}
/* Partial code from W3Schools */
#samples-parent figure:nth-child(9) div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        background: hsl(73, 89%, 11%);
        position: relative;
        animation: mymove 4s infinite;
      }
      
      @keyframes mymove {
        from {top: 40px;}
        to {top: 175px;}
      }
    
#samples-parent figure:nth-child(9) div img {
        
 

}