body {
  background-color : var(--pink);
}

* {
  color : var(--dark-purple)!important;
}

#title {
  font-size : 34px!important;
  letter-spacing: normal;
  width : auto;
  height : auto;
  padding : 0;
  line-height: normal;
  margin : 0 0 30px 0!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 : 50px 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;
}

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;
  margin : 5px;
  object-fit : cover;
}

#product-image-container > img:first-child {
  width : 100%;
  height : auto;
  margin : 5px;
  background-color : white;
}

#product-info-container > span > input, #product-info-container > span > select {
  background-color : #white;
  border-bottom : 3px solid var(--dark-purple);
  border-top : 0;
  border-left : 0;
  border-right : 0;
  color : black;
  font-family : var(--b);
  width : 200px;
  padding : 5px 0;
}

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


.button-container {
  width : 100%;
  align-items : flex-start!important;
  justify-content : flex-start!important;
}

button {
  width : 200px;
  padding : 10px 5px;
}

.button-container > * {
  margin-right : 50px;
}

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

  #product-container {
    flex-direction : column;
    width : 90vw;
    left : 5vw;
    padding : 100px 0 0 0;
  }

  #product-container > * {
    width : 90%;
    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;
  }


  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 : 90%;
  }

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

  #product-image-container > img:first-child {
    width : 100%;
    height : auto;
    margin : 5px;
    background-color : white;
  }

  #product-info-container > span > input, #product-info-container > span > select {
    padding : 5px 10px;
    background-color : rgb(255,255,255,0.05);
    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;
  }

  .button-container {
    width : 100%;
    flex-direction : column!important;
    align-items : flex-start!important;
    justify-content : flex-start!important;
  }

  .button-container > * {
    width : 100%;
    margin : 5px 0!important;
  }

  .button-container > a {
    margin : 0!important;
    padding : 0!important;
  }

}