/*my_css.css*/

* {
  font-family: Arial, Helvetica, sans-serif;
}

.quote {
  font-size: 0.85em;
  font-style: italic;
}
  
.homePageImage {
  width: 100%;
}

.body {
  max-width: 750px;
}

div.bestseller, div.pick, div.arrival {
  padding: 10px;
  transition: all 0.5s;
}

h4 {
  font-style: oblique;
  font-weight: 400;
  color:rgb(42, 69, 81);
}

div.bestseller:hover, div.pick:hover, div.arrival:hover {
  background-color: rgba(178, 137, 160, 0.554);
}

a:hover {
  color: rgb(42, 69, 81);
}

.middlecolor {
  background-color: rgb(216, 192, 202);
}

.backcolor {
  background-color: rgba(195, 149, 171, 0.766);
}

.mySlides {
  width:100%;
}

/*valid required inputs are green*/
input:required:valid, textarea:required:valid {
  background-color: rgba(209, 248, 209, 0.555);
  outline: 1px solid darkgreen;
}

/*invalid phone number stays white*/
input[name="phone"]:not(:valid) {
  background-color: white;
}

/*valid inputs that are not required are green*/
input[name="phone"]:valid {
  background-color: rgba(209, 248, 209, 0.555);
  outline: 1px solid darkgreen;
} 

select[name="salutation"] {
  background-color: rgb(58, 114, 132);
  border: none;
  color: white;
  font-family: Arial;
}