/*my_css.css*/

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

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

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

/*used in the forms as labels*/
h4 {
  font-weight: 400;
  color:rgb(42, 69, 81);
}

/*used as page subtitles*/
h3 {
  font-style: oblique;
  font-weight: 600;
  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(89, 147, 172);
}

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

/*invalid non-required inputs stay white*/
input[name="phone"]:not(:valid), input[name="middleInitial"]:not(:valid) {
  background-color: white;
}

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

select {
  background-color: rgb(58, 114, 132);
  border: none;
  color: white;
  padding: 5px;
}

input {
  border: solid 0.5px rgb(42, 69, 81);
}

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

.body {
  max-width: 750px;
}

/*Important band found in login form*/
.importantBand {
  background-color: rgba(130, 81, 109, 0.554);
  color: rgb(255, 255, 255);
}

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

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

.mySlides {
  width:100%;
}