html {
  font-size: 18px;
  background-color: black;
  font-family: Helvetica, sans-serif;
}

/* HEADER */

header {
  background-color: black;
  width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  top: 0;

}
header img {
  height: 1.5rem;
  margin-right: 1rem;
  margin-left: 0.5rem;

}
header span {
  color: white;
  font-family: Helvetica;
  font-size: 1rem;
  padding-top: .66rem;
  padding-bottom: .66rem;
}

/* Motorcyle Image - New Arrival */

#motorcycle {
  background-image: url("../images/moto.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 25rem;
  width: 960px;
  margin: 0 auto;
  display: flex;
}
#arrival-box {
  margin-top: 9rem;
  margin-bottom: auto;
  width: 20rem;
  background-color: black;
  color: white;
  padding: 2rem 3rem;
}
h1 {
  font-size: 2rem;
}
h4 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}
h1, h4 {
  font-weight: bold;
}
#arrival-box img {
  display: none;
}

/* Navigation section */

.desktop {
  display: flex;
  width: 960px;
  background-color: firebrick;
  margin: 0 auto;
  justify-content: space-around;
  align-items: center;
}
.desktop a {
  color: white;
  text-decoration: none;
  margin-top: .75rem;
  margin-bottom: .75rem;
  display: block;
}
.desktop a:hover {
  color: firebrick;
  background-color: white;
  border: 1px solid black;
  padding: 1px;
}
.mobile {
  display: none;
}

/*Merchandise and Location/Hours */

.merchbox {
  width: 960px;
  margin: 0 auto;
  background-color: white;
}
.merchandise {
  display: flex;
  justify-content: space-between;
  padding: 3rem 0;
}
.products {
  width: 30%;
}
.merchpic {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid black;
  height: 13rem;
}
.merchpic img {
  max-height: 9rem;
  max-width: auto;
  padding: 2rem 0rem;
  overflow: hidden;
}
#glasses img {
  width: 144px;
  height: auto;
}
.products span {
  background-color: black;
  color: white;
  display: block;
  padding: 0.5rem 0rem;
  text-align: center;
}
.business {
  padding-bottom: 4rem;
  display: flex;
  justify-content: space-between;
}
.location {
  background-color: black;
  color: white;
  display: block;
  padding: 1rem 0rem 1rem 2rem;
  margin-bottom: 0.25rem;
}
.details {
  width: 35%;
}
.details a {
  color: black;
  text-decoration: none;
}
.details a:hover {
  color: white;
  background-color: firebrick;
  text-decoration: underline;
}

/* Footer-Copyright */

footer {
  margin: 0 auto;
  height: 5rem;
  width: 960px;
  background-color: black;
  color: white;
  text-align: left;
  display: flex;
  align-items: center;
}

/* Media Queries */

/* Tablet */

@media only screen and (max-width: 1024px) {

  html {
    width: 100%;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: flex;
    width: 960px;
    background-color: firebrick;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
  }
  .mobile a {
    color: white;
    text-decoration: none;
    margin-top: .75rem;
    margin-bottom: .75rem;
    display: block;
  }
  .mobile a:hover {
    color: firebrick;
    background-color: white;
    border: 1px solid black;
    padding: 1px;
  }
  #glasses-mobile {
    display: none;
  }
  .products {
    width: 47%;
  }
 }

/* Mobile less than 470px */

 @media only screen and (max-width: 470px) {


   header, #motorcycle, nav, .merchbox, footer {
     width: 100%;
   }
   #motorcycle {
     height: 15rem;
     width: 100%;
     margin: 0 auto;
     display: flex;
   }
   #arrival-box {
     margin-top: 10rem;
     margin-bottom: auto;
     width: 100%;
     background-color: black;
     color: white;
     padding: 1rem 2rem;
   }
   h1 {
     font-size: 1rem;
   }
   h4 {
     margin-bottom: 0.25rem;
     font-size: 0.77rem;
   }
   .desktop {
     display: none;
   }
   .mobile {
     display: flex;
     width: 100%;
     background-color: firebrick;
     margin: 0 auto;
     justify-content: center;
     align-items: center;
   }
   .mobile a {
     color: white;
     text-decoration: none;
     margin-top: .75rem;
     margin-bottom: .75rem;
     display: block;
   }
   .mobile a:hover {
     color: firebrick;
     background-color: white;
     border: 1px solid black;
     padding: 1px;
   }
   .merchbox {
     width: 100%;
   }
   .merchandise {
     display: flex;
     justify-content: center;
   }
   #glasses-mobile {
     display: none;
   }
   #watch {
     display: none;
   }
   .products {
     width: 90%;
   }
   .business {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
   }
   .details {
     width: 90%;
   }
   #locmobile {
     margin-bottom: 0.5rem;
   }
   footer {
     margin: 0 auto;
     height: 5rem;
     width: 100%;
     background-color: black;
     color: white;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 }