/*TODO: Add a background color or image to your website*/
html, body {
 background-image: linear-gradient(to bottom right, #D3D3D3 25%, rgb(34, 175, 222));
}
.container {line-height: 1.5; padding: 10px 10px;}
.pro-1 {line-height: 1.5; padding: 10px 25px 10px;border-style:ridge; border-color:#D3D3D3; border-radius: 30px; margin:20px; }
.pro-2 {line-height: 1.5; padding: 10px 25px 10px;border-style:ridge; border-color:#D3D3D3; border-radius: 30px; margin:20px}
.pro-3 {line-height: 1.5; padding: 10px 25px 10px;border-style:ridge; border-color:#D3D3D3; border-radius: 30px; margin:20px}
.pro-4 {line-height: 1.5; padding: 10px 25px 10px;border-style:ridge; border-color:#D3D3D3 ; border-radius: 30px; margin:20px}
.pro-5 {line-height: 1.5; padding: 10px 25px 10px;border-style:ridge; border-color:#D3D3D3; border-radius: 30px; margin:20px}
.pro-6 {line-height: 1.5; padding: 10px 25px 10px;border-style:ridge; border-color:#D3D3D3; border-radius: 30px; margin:20px}
.pro-7 {line-height: 1.5; ;border-style:ridge; border-color:#D3D3D3; border-radius: 30px; margin:20px;justify-content: center; line-height: 1.5; padding: 10px 25px 10px;}
.pro-8 {line-height: 1.5; ;border-style:ridge; border-color:#D3D3D3; border-radius: 30px; margin:20px; justify-content: center; line-height: 1.5; padding: 10px 25px 10px;align-items: row;}
.women-intro {line-height: 1.5;}
.franklin {line-height: 1.5; padding: 10px 25px 10px;}
.p-intro {text-align:center}
.go-back {line-height: 1.5; padding: 10px 25px 10px;border-style:ridge; border-color:purple; border-radius: 30px; margin:20px;}
.the-year-after {line-height: 1.5; padding: 10px 25px 10px;border-style:ridge; border-color:purple; border-radius: 30px; margin:20px}
.container-2 {
  display:flex; 
  justify-content: space-around; 
  /* align-items: row;  */
  /* flex-wrap: wrap;  */
  background: linear-gradient(to bottom left, #D3D3D3 50%, rgb(112, 121, 125) 50%);}
.bass {line-height: 1.5; padding: 10px 25px 10px}
.lovelace {line-height: 1.5; padding: 10px 25px 10px}
p {color: black; text-indent:50px; padding: 10px 10px; font-family: 'Raleway', sans-serif; line-height: 1.5;font-size: 20px}

h1 {
  color: black;text-align:center;font-family: 'Pacifico', cursive; 
}
h2{text-align:center;color:black}
h3{
  text-align: left; color:black; font-size: x-large; padding: 20px;
}
h4{
  text-align: right; color:black; font-size: x-large; padding: 20px;

}

ul{list-style-type: none;}
li{display: inline;}
li a {
  color: #000000; 
  text-decoration: none; 
  text-align: center; 
  font-size: 1.3em;
  border-radius:7px;
  margin-right: 30px;
}
/*TODO: Create a new style rule by the class attribute and style the header section(s) of your website. */
.my-nav{
  display:flex;
  justify-content:space-around;
  padding:30px; 
  color: black;
}
#f-img {display: block;
  margin-left: auto;
  margin-right: auto;
  width: 18%;border-radius: 50%;max-width: 100%; height:auto}
#c-img {display: block;
  margin-left: auto;
  margin-right: auto;
   width: 25%;border-radius: 50%;max-width: 100%; height:auto}
#a-img {display: block;
  margin-left: auto;
  margin-right: auto;
   width: 25%;border-radius: 50%;max-width: 100%; height:auto}
/* #photography {
  align-self: flex-start; max-width:30%; height: auto;
} */
/* #l-beach {width: 10px; height: auto;} */
/* {align-self: flex-start; max-width: 15%;  */
  /* height: auto;} */
#l-backyard {margin-right: auto; max-width: 30%;
  height: auto;object-fit: contain;}
/* #l-euro { align-self: flex-end; max-width: 30%;
  height: auto;} */

#gif {display: block; margin-left: auto; margin-right: auto; padding: 10px 25px 5px;}

#WIS {display:block; margin-left:auto; margin-right:auto; padding: 10px 25px 10px; display: flex;
}
#go-back {display:block; margin-left:auto; margin-right:auto; padding: 10px 25px 10px; display: flex;
}
#the-year-after {display:block; margin-left:auto; margin-right:auto; padding: 10px 25px 10px; display: flex;
}
#guitar-img {display:flex; justify-content: center; align-items: center; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; border-radius: 20%;}


#spam {
  height: 100%; 
  width: 100%; 
  /* border: 0; */
  /* margin-left: auto;
  margin-right: auto; */
  justify-content: center;
  object-fit: contain;
  align-items: center;
  margin: auto;
}

#hammer {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 18%;border-radius: 5%;max-width: 100%; height:auto
}
#robot {
  width: 35%;
  /* display: block; */
  margin-right: auto;
  border-radius:10%; 
  object-fit: contain;
  /* display:flex;
  float:right; */
  padding: 20px;

}
#ripe_reaction_video{
  max-width: 40%;
  /* display: block; */
  margin-right: auto;
  border-radius:10%; 
  object-fit: contain;
  /* display:flex;
  float:right; */

}
#hardware{
  /* display: block; */
  margin-left: auto;
  width: 44%;
  border-radius: 10%;
  height:auto;
  object-fit:contain;
  /* display:flex;
  float:left; */
  padding: 20px
}
#circuits {
  /* display: block; */
  margin-left: auto;
  width: 53%;
  border-radius: 10%;
  height:auto;
  object-fit:contain;
  /* display:flex;
  float:left; */
  padding: 20px
}
.robot {
  padding: 10px;
}
.ripe_reaction {
  /* padding: 10px; */
  display: flex;
}

hr.solid {
  border-top: 3px solid rgb(244, 248, 250);
}
/*TODO: Use the * selector to reset the margin and padding to 0px*/


/*TODO: Add styling rules for the text and images on your website.*/




/*TODO: Style the Nav Bar by selecting the u1, li, and li a elements*/




/*TODO: Create a Flexbox to create a responsive layout. Use the property display: flex;/