/*styles for mod 4 participation */

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

body {
  background-color: rgb(164, 164, 216);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h1 {
  text-align: center;
  font-weight: normal;
  text-transform: lowercase;
  border-left: 4px solid black;
  border-bottom: 4px solid black;
  margin: 8px 8px 40px 8px;
  padding: 8px;
  transform: rotate(-3deg);
  color: rgb(255, 77, 0);
  background-color: grey;
}

#samples-parent {
display: flex; /*makes it a "flex parent", puts boxes side by side */

flex-flow: row wrap; /*if there is not enough room for them to line up
horizontally, then the figures will wrap to new rows */

justify-content: space-between;
padding: 24px;

}

#samples-parent figure {
  border: 4px solid rgb(146, 102, 146);
  
  aspect-ratio: 1/1; /*makes it so that the figures stay
  3x3 when the page size changes. Keeps shapes regardless of width */
  
  flex-grow: 0;
  
  flex-basis: 30%; /*kinda like width*/
  
  margin-bottom: 16px;
  
  border-radius: 32px 0px 32px 0px; /* upper left, upper right, 
  lower right, lower left */

  position: relative; /* do this so you can position absolute the child */
}
  figure h2 { 
    
    position: absolute;  /* creating headline box for healine 2 */
    
    
    background-color: hsla(0, 2%, 19%, 0.7); /* hue, saturation, light (0black-100white,
    transparency. Can also be written
    background-color: hsl(220 50% 0% / .7); */
    
    color: rgb(198, 81, 22);
    
    width: 110%; /*little bit bigger than the parents width (the figure) */

    text-align: center;

    padding: 4px 0px;

    border-radius: 24px 0 0 0;
  }

  figure figcaption {
    
    position: absolute;
    top: 80%; left: 0;
    width: 100%; height: 20%;
    
    border-radius: 0 0 24px 0;
    
    text-align: center;
    padding: 8px;

    background-color: hsla(0, 2%, 19%, 0.7);
    color: rgb(208, 107, 40);

    text-shadow: 4px 4px 4px black;
    
  }

#samples-parent figure:nth-child(1) {
  border-radius: 50%; /* creates circular figure */
}
  #samples-parent figure:nth-child(1) p {
  padding-top: 100px;
    width: 50%;
  text-align: center;
   margin: 80px auto;  /* play around with width, padding, and
    margin to center */
}

#samples-parent figure:nth-child(2) {
  outline-style: solid;
  outline-width: 5px;
  outline-color: grey;
  font-variant: small-caps;
}
  /*can also be written as "outline: 5px solid grey;" */ 

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

  #samples-parent figure:nth-child(2) p {
    padding-top: 10px;
    clear: left;
    margin: 24px 0px 0px 0px;
  }

#samples-parent figure:nth-child(3) img {
  padding-top: 100px;
}

#samples-parent figure:nth-child(4) {
text-transform: uppercase;
}

#samples-parent figure:nth-child(4) p {
  padding-top: 150px;
}

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

#samples-parent figure:nth-child(5) {
border-color: green;
border-style: dashed;
}

#samples-parent figure:nth-child(5) div {
  width: 50%;
  margin: 100px auto;
  border: 5px solid red;
  aspect-ratio: 1/1;

  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

}


#samples-parent figure:nth-child(6) p {
  padding-top: 100px;
  width: 50%;
text-align: center;
 margin: auto; 

}

#samples-parent figure:nth-child(7) {
overflow: scroll; /* overflow: hidden for only hiding excess */
}

#samples-parent figure:nth-child(8) h2 {
  color: white;
}

#samples-parent figure:nth-child(8) figcaption {
color: white;
}

#samples-parent figure:nth-child(8) img {
  width: 100%; height: 100%;
  border-radius: 24px 0 24px 0;
  object-fit: fill; /*fills object into container nicely */
}

#samples-parent figure:nth-child(9) div {
width: 30%;

aspect-ratio: 1/1; /* height is proportional to width to create square.
auto margin to center horizontally. */

border: 5px solid green;
margin: 100px auto;
background-image: repeating-radial-gradient(red 0px, blue 10px, white 15px, yellow 20px);
}