/* Styling for Molecule Detail Page with CSS Grid */

  .mol-box-detail {
    grid-area: mol-box-detail;
    display: grid;
    justify-self: center;
    /* background-color: #f1f1f1; */
    margin: 2rem 1rem 1rem 1rem;
    grid-template-areas: 
    'catalog-number-detail catalog-number-detail catalog-number-detail' 
    'mol-image-detail mass-detail price-detail' 
    'mol-info-detail mol-info-detail mol-info-detail';
    grid-template-columns: 3fr 2fr 2fr;
    row-gap: 1rem;
}

#mol-info-detail {
    grid-area: mol-info-detail;
    justify-self: center;
    font-size: 1.6rem;
    margin-top: 1rem;
  }
  
  .catalog-number-detail {
    grid-area: catalog-number-detail;
    font-size: 30px;
    font-weight: bold;
    margin: 1rem;
    padding-top: 1rem;
  }
  
  .mol-image-detail {
    grid-area: mol-image-detail;
    margin: -3rem 0rem 2rem auto;
    align-self: center;
  }
  
  .mass-detail {
    grid-area: mass-detail;
    text-align: end;
    font-size: 1.7rem;
  }
  
  .mass-detail p {
    margin: 0rem 2rem 10px 0rem;
  }
  
  .price-detail p {
    margin: 0rem 0rem 10px 2rem;
  }
  
  .price-detail {
    grid-area: price-detail;
    font-size: 1.7rem;
    text-align: start;
  }
  
  .mol-name-detail {
    font-size: 2rem;
  }

  #ordering-button {
    margin: 0rem 0rem 3rem 0rem;
  }
  
  .footer {
    grid-area: footer;
    width: 90%;
    background-color: #f1f1f1;
    font-size: 1.6rem;
    margin: 1rem;
    padding: 10px;
    text-align: center;
  }
  
  /* Responsive layout break: search container shrinks */
  @media (max-width: 950px) {
  
  .search-container {
    transform: scale(0.8);
    width: 100%;
    margin: 1rem 1rem 1rem 1rem;
  }
  
  #search-grid {
    justify-self: end;
    justify-items: end;
  }
    
  #text-box {
    width: 200px;
    font-size: 15px;
    margin: 1rem 1rem 1rem 0rem;
    padding: 0.5rem;
    justify-self: end;
  }
   
  #submit-button {
    width: 100px;
    font-size: 15px;
    margin: 0.5rem;
    padding: 0.5rem;
    justify-self: end;
  }
    
  #search-by-structure {
    grid-area: search-by-structure;
    margin: 1rem 1rem 1rem 3rem;
    font-weight: bold;
    justify-self: end;
  }
  }
  
  /* Responsive layout break: all elements shrink */
  @media (max-width: 600px) {
    
    .mol-box {
      transform: scale(0.7);
    }
    
    .search-container {
    transform: scale(0.8);
    width: 90%;
  }
    
    .footer {
    transform: scale(0.8);
    width: 80%;
  }
  }