@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

/********** Global **********/

:root {
  --darkText: #333;
  --whiteColor: #fff;
  --grayBkgColor: #e4e5e7;
  --darkBkgColor: #1c1e23;
  --borderRadius: 10px;
  --oneRem: 1rem;
}

* {
  box-sizing: border-box;
}

html {
  font: 16px 'PT Sans', sans-serif;
  margin: 0 auto;
}

body {
  margin: 0 auto;
  max-width: 1400px;
}

#wrapper {
  margin: 0 auto;
  width: 90%;
}

h1 {
  font-size: 40px;
  font-weight: 100;
}

#header-first {
  background-color: var(--darkBkgColor);
  color: var(--whiteColor);
}

#cart,
#header-first button,
form,
span,
#bestSellers h2,
footer {
  letter-spacing: 2px;
  text-transform: uppercase;
}

img {
  height: auto; 
  max-width: 100%;
}

/********** Top Content - Logo, Nav, Cart **********/

#top-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0;
  margin-top: 2rem;
}

#top-content nav {
  background-color: var(--darkBkgColor);
  border-radius: var(--borderRadius);
}

#top-content nav ul {
  display: flex;
  list-style: none;
  margin: 10px;
  padding: 0;
}

#top-content nav li {
  justify-content: space-evenly;
  margin: 0;
  padding: 0;
  text-align: center;
}

#top-content nav a {
  color: var(--whiteColor);
  padding: 0 10px;
  text-decoration: none;
}

#top-content #cart {
  align-items: center;
  color: var(--darkText);
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0;
  text-decoration: none;
}

#top-content #cart img,
#top-content #cart p {
  margin: 0 5px;
}

#cart button {
  background-color: var(--grayBkgColor);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 25%;
  width: 25%;
}

#nav-trigger {
  background-color: #000;
  color: #fff;
  cursor: pointer;
  display: block;
  padding: 0.5rem;
  text-align: center;
}

#nav-trigger,
#nav-checkbox {
  display: none;
}

/*********** First Header **********/

#header-first {
  align-items: center;
  display: flex;
  margin-top: 2rem;
}

#header-first section {
  padding-left: 12rem;
  padding-right: 7rem;
}

#header-first h1 {
  margin-bottom: var(--oneRem);
  margin-top: 2rem; 
}

#header-first img {
  margin-right: 20rem;
}

#header-first button {
  background-color: #0149ff;
  border-radius: 50px;
  border: none;
  color: var(--whiteColor);
  cursor: pointer;
  margin: 5rem 0;
  padding: 10px 30px;
}

/*********** Main **********/

main {
  background-color: var(--grayBkgColor);
  color: var(--darkText);
  display: grid;
  grid-gap: 30px;
  margin: 0 auto;
  padding: 3rem 7rem;
}

main section {
  border-radius: 5px;
}

/********** Form **********/

form {
  align-items: center;
  background-color: var(--whiteColor);
  display: flex;
  justify-content: center;
}

form section {
  align-items: center;
  display: flex;
}

form section p,
form section label {
  padding: 0 10px;
}

form select {
  text-transform: uppercase;
}

form section textarea {
  background-color: #f0f8ff;
  border: .1px solid #e3e7ed;
  border-radius: 20px;
  padding: 0 3rem;
  resize: none;
}

form textarea:focus {
  background: rgba(255, 255, 255, .8) url(../images/search.png) no-repeat 10px;
  border: none;
  font-size: .9rem;
  margin: 0;
  padding-left: 35px;
  padding-top: 15px;
}

form #slider {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

#sortBy {
  width: 110px;
}

#shipTo {
  width: 50px;
}

/********** Products **********/

#products {
  border-radius: 5px;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

#products > section:not(#JBL):not(#JBL section) {
  align-items: center;
  background-color: var(--whiteColor);
  display: grid;
  height: auto;
  justify-items: center;
  padding: 2rem 1rem;
  text-align: center; 
} 

#products section div:not(#JBL div) {
  margin: 0;
  padding: 0;
}

#products section h2,
#products section span,
#products section p {
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
}

#products section div p {
  padding-top: 5px;
}

/*********** JBL Product ***********/

#JBL {
  display: grid;
  grid-column: span 2;
  position: relative;
}

#JBL section {
  align-items: center;
  background-color: var(--whiteColor);
  display: flex;
  justify-content: space-between;
}

#JBL section div:first-of-type {
  align-items: flex-start; 
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-bottom: 10px;
  padding: 5px 2rem;
}

#JBL section div:last-child span {
  padding: 0 2rem;
}

#JBL h2 {
  margin: 5px;
  margin-left: 0;
}

#JBL p {
  background: var(--darkBkgColor);
  border-radius: 5px;
  color: var(--whiteColor);
  left: 10px;
  letter-spacing: 1px;
  padding: 5px;
  position: absolute;
  top: 10px;
}

#JBL img {
  height: auto;
  width: 100%;
}

/********** Pages **********/

#pages {
  background-color: var(--whiteColor);
  display: flex;
  justify-content: space-around;
  padding: var(--oneRem);
}

#pages section {
  padding: var(--oneRem);
}

#pages a {
  background-color: var(--whiteColor);
  color: var(--darkText);
  padding: 15px 20px;
  text-decoration: none;
}

#pages button {
  background-color: var(--whiteColor);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

#page-4 {
  border-radius: 50%;
  box-shadow: 0 15px 25px 0 #c2cce6;
}

/************ Best Sellers ***********/

#bestSellers {
  align-items: baseline;
  background-color: var(--whiteColor);
  color: var(--darkText);
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(4, auto);
  justify-items: center;
  padding: 5px 1rem;
}

#bestSellers h2 {
  grid-column: 1 / -1;
}

#bestSellers h3 {
  margin-bottom: 10px;
}

#bestSellers a {
  background-color: var(--whiteColor);
  color: var(--darkText);
  display: grid;
  justify-items: center;
  text-decoration: none;
}

#bestSellers a div {
  display: flex;
}

#bestSellers p {
  margin-top: 10px;
  padding: 0 10px;
}

/*********** Testimonials **********/

#testimonials {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 5rem;
  padding: 0 12rem;
}

#testimonials header {
  align-items: center;
  display: grid;
  grid-column: 1 / -1;
  justify-items: center;
  margin: 50px 0 10px;
}

#testimonials header h1,
#testimonials header p {
  grid-column: 1 / -1;
  margin: 5px;
}

#testimonials div {
  align-items: center;
  display: flex;
}

#testimonials img {
  margin-right: 20px;
}

#testimonials blockquote {
  margin: 0;
}

#testimonials section {
  padding: 0 15px;
}

/*********** Footer **********/

footer {
  background-color: var(--darkBkgColor);
  color: var(--whiteColor);
  padding: 3rem 10rem;
}

#footerHeader {
  border-bottom: 1px solid #2b2b2b;
  justify-content: space-between;
  padding-bottom: 3rem;
}

footer section {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

footer nav ul {
  display: flex;
  list-style: none;
  margin: 10px;
  padding: 0;
}

footer nav li {
  justify-content: space-evenly;
  margin: 0;
  padding: 0;
  text-align: center;
}

footer nav a {
  color: var(--whiteColor);
  padding: 0 10px;
  text-decoration: none;
}

#socials {
  gap: 20px;
}

#terms div {
  display: flex;
  gap: 50px;
  padding: 2rem 0 0 40rem;
}

/******************** Media Queries *********************/

/*********** 1370px ***********/

@media screen and (max-width: 1370px) {
  footer section {
    align-items: center;
    justify-content: center;
  }

  #terms div {
    display: inline-block;
    padding: 0;
    text-align: center;
  }

  #JBL section div:last-of-type {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}

/*********** 1335px ***********/

@media screen and (max-width: 1335px) {
  form {
    flex-direction: column;
  }

  form section {
    padding: 5px 0;
  }

  form section textarea {
    padding: 0;
  }
} 

/*********** 1316px **********/

@media screen and (max-width: 1316px) {
  #header-first {
    display: flex;
    flex-direction: column-reverse;
  }

  #header-first section {
    margin: 0 auto;
    text-align: center;
  }

  #header-first section p {
    padding: 0 10rem;
  }

  #header-first section,
  #header-first img {
    margin: 0;
    padding: 0;
  }
}

/********* 1170px **********/

@media screen and (max-width: 1170px) {
  #bestSellers {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  #testimonials {
    display: flex;
    flex-direction: column;
    padding: var(--oneRem);
  }

  #testimonials header {
    text-align: center;
  }

  #testimonials section {
    padding: var(--oneRem);
  }

  #testimonials section div {
    justify-content: center;
  }

  #testimonials blockquote {
    text-align: center;
  }

  footer nav ul {
    padding: var(--oneRem);
  }

  #footerHeader {
    flex-direction: column;
  }
}

/********** 980px **********/

@media screen and (max-width: 980px) {
  #products {
    display: flex;
    flex-direction: column;
  }

  #pages a:not(#page-4) {
    display: none;
  }
}

/*********** 800px **********/

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

  #top-content {
    flex-direction: column;
  }

  #top-content img {
    margin-bottom: var(--oneRem);
  }

  #cart {
    padding-bottom: 0;
    padding-top: var(--oneRem);
  }

  #top-content nav {
    width: 100%;
  }

  #nav-trigger,
  #nav-checkbox:checked + ul,
  #top-content nav li {
    display: block;
  }

  #top-content nav ul {
    display: none;
    width: 100%;
  }

  #top-content nav a {
    border-bottom: #000 solid 2px;
    display: block;
    min-height: 45px;
  }

  #pages a {
    padding: var(--oneRem);
    margin: 0;
  }

  footer {
    display: block;
    flex-direction: column;
    margin: var(--oneRem);
    padding: 2rem;
  }

  footer nav ul {
    flex-direction: column;
    margin: 2rem;
  }
}

/********** 785px **********/

@media screen and (max-width: 785px) {
  #JBL section {
    flex-direction: column;
  }

  #JBL section div:first-of-type,
  #JBL section div:last-of-type {
    align-items: center;
  }
}

/*********** 700px ***********/

@media screen and (max-width: 700px) {
  #header-first section p {
    padding: 0 4rem;
  }

  main,
  #products {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  form {
   align-items: flex-start;
  }

  #JBL {
    justify-content: center;
  }

  h2 {
    text-align: center;
  }
}