/* Adds text stroke (outline) to h1 tags and provides fallback color for unsupported browsers */
h1 {
  -webkit-text-fill-color: #FE0000;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: black;
  color: #FE0000;
  text-align: center;
  font-family: "serif", serif, serif, sans-serif;
}

h3 {
  -webkit-text-fill-color: #FE0000;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  color: #FE0000;
  text-align: center;
  font-family: "serif", serif, serif, sans-serif;
}

/* Specifies font family and text align for p text */
p {
  text-align: center;
  font-family: "serif", serif, serif, sans-serif;
}

/* Specifies font size, shadow, and opacity for navBar */
nav {
  font-size: 18px;
  font-family: "serif", serif, serif, sans-serif;
  font-weight: bolder;
  color: #FE0000;
  background-color: #E1D5D5;
  box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
}

#brandName {
  color: #FE0000;
}

#link {
  color: #FE0000;
}

#mainDescription {
  color: white;
}

#contact {
  color: white;
}

#headerlogo {
  width: 5%;
  height: auto;
}

/* Creates background image and specifies size, position, and attachment */
#main {
  background-image: url("../images/albuquerque.jpg");
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100vw auto;
  background-size: cover;
  background-attachment: fixed;

}

/* Button to navigate to top of page */
#myBtn {
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  display: none;
  position: fixed;
  bottom: 15%;
  right: 10%;
  font-size: 18px;
  border: none;
  outline: none;
  color: black;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  background-color: #FE0000;
  opacity: .9;
  box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
}

#myBtn:hover {
  background-color: #555;
}

/* Carousel Controls */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* Suppliers Section shadows, background color, and opacity */
#suppliers {
  background-color: #E1D5D5;
  box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
}

/* Footer section shadows, background color, and opacity */
#footerRow {
  background-color: #E1D5D5;
  color: #555;
  box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: -1px 0px 5px 4px rgba(0, 0, 0, 0.18);
}

#footerLink {
  color: #FE0000;
  font-weight: bolder;
}