body {
  background-color : #24332A;
}

#title {
  font-size : 24px!important;
  letter-spacing: normal;
  width : auto;
  height : auto;
  padding : 0;
  line-height: normal;
  margin : 0 0 30px 0!important;
}

.shop-button {
  height : 70px!important;
  width : 70px!important;
  display : flex;
  align-items : center;
  justify-content : center;
  position : absolute!important;
  top : 2vw;
  border-radius : 50px;
  background-color : #304235;
  z-index : 99!important;
}

#cart-button {
  right : 2vw;
}

#back-button {
  left : 2vw;
}

.shop-button > svg {
  fill : white!important;
  height : 30px!important;
  width : 30px!important;
}

#description {
  text-transform :capitalize;
}

#product-container {
  display : flex;
  align-items : center;
  justify-content : center;
  flex-direction : row;
  width : 80%;
  height : auto;
  left : 10vw;
  position : relative;
  margin : 0;
  padding : 20px 0 0 0;
}

#product-container > * {
  width : 50%;
  display : flex;
  flex-direction : column;
  align-items : flex-start;
  justify-content : space-around;
  padding : 20px;
}

#product-info-container {
  width : 45%;
  display : flex;
  align-items : flex-start;
  justify-content : center;
  flex-direction : column;
}

#product-info-container > * {
  margin : 5px 0;
  text-align : left;
}

#product-info-container > span {
  display : flex;
  align-items : flex-start;
  justify-content : center;
  flex-direction : row;
}

#product-info-container > * {
  color : white;
  font-size : 20px;
}

#product-info-container:nth-child(3) {

}

p:has(#price) {
  font-weight: bold;
}


#product-image-container {
  display : flex;
  flex-direction : row;
  align-items : flex-start;
  justify-content : flex-start;
  flex-wrap : wrap;
  width : 40%;
}

#product-image-container > * {
  width : 100px;
  height : 100px;
  object-fit : cover;
  margin : 5px;
}


#product-image-container > :first-child {
  width : 100%;
  height : 80vh!important;
  object-fit : cover;
  height : auto;
  margin : 5px;
  background-color : white;
}

#product-info-container > span > input, #product-info-container > span > select {
  padding : 5px 10px;
  background-color : #304235;
  color : white;
  font-family : var(--bodyFont);
  text-align : left;
  border : 0;
  width : 200px;
  margin-right : 5px;
  font-size : 20px;
}

select > option {
  color : var(--black)!important;
}

button > span {
  font-size : 20px;
  color : #304235!important;
}

button {
  padding : 10px 10px 5px 10px;
  margin : 0;
}

.empty-button {
    background-color : #24332A!important;
}





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

  #product-container {
    flex-direction : column;
    width : 98vw;
    left : 1vw;
    padding : 70px 0 0 0;
  }

  #product-container > * {
    width : 100%;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : space-around;
    padding : 20px;
  }



  #product-info-container {
    width : 90%;
    display : flex;
    align-items : flex-start;
    justify-content : center;
    flex-direction : column;
  }

  #product-info-container > * {
    margin : 5px 0;
    text-align : left;
  }

  #product-info-container > span {
    display : flex;
    align-items : flex-start;
    justify-content : center;
    flex-direction : row;
  }

  #product-info-container > * {
    color : white;
    font-size : 20px;
  }

  #product-info-container:nth-child(3) {

  }

  p:has(#price) {
    font-weight: bold;
  }


  #product-image-container {
    display : flex;
    flex-direction : row;
    align-items : flex-start;
    justify-content : space-between!important;
    flex-wrap : wrap;
    width : 90%;
  }

  #product-image-container > * {
    width : 40vw;
    height : 40vw;
    object-fit: cover;
    margin : 1.5px 0 1.5px 0;
    background-color : white;
  }

  #product-image-container > :first-child {
    width : 100%;
    height : 70vh!important;
    object-fit : cover;
    margin : 0 0 1.5px 0;
    padding : 0;
  }

  #product-info-container > span > input, #product-info-container > span > select {
    padding : 5px 10px;
    background-color : #304235;
    color : white;
    font-family : var(--bodyFont);
    text-align : left;
    border : 0;
    width : 50vw;
    margin-right : 5px;
    font-size : 20px;
  }

  #product-info-container > span > input {
    width : 20vw;
  }

}