/* 
  ========================================================================
  ========================== Details & Summary 1 =========================
  ======================================================================== 
*/
.details1 {
  background-color: var(--md-sys-color-on-secondary-container);
  color: var(--md-sys-color-secondary-container);
  /* 
      Use of start instead of left for better accessibility for different
      kinds of languages that are not read e. g. from left-to-right
    */
  text-align: start;

  border-radius: 8px;
  padding: 12px 12px 12px 0px;
  margin: 4px 0px 4px 0px;
}

.details1 summary {
  background-color: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
  border-radius: 8px;
  font-size: 1.7rem;
  cursor: pointer;
  padding: 16px 16px 16px 32px;
}

.details1 summary:hover,
.details1 summary:focus {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.details1 p {
  margin: 16px 24px 16px 24px;
}

.details1 h4 {
  margin: 12px 24px 12px 24px;
}

.details1 a,
.details1-sub-details a {
  color: var(--md-sys-color-custom-color-1-container);
}

.details1 a,
.details1-sub-details a {
  color: var(--md-sys-color-custom-color-1-container);
}

.details1 ul,
.details1 ol,
.details1-sub-details ul,
.details1-sub-details ol {
  font-size: 1.3rem;
  line-height: 1.5;

  /* 
    Set max width for better UI readability.
    Wide Paragraphs are difficult to read.
  */
  max-width: 50rem;
  padding: 0px 0px 0px 80px;
  margin: 12px 0px 32px 0px;
}



.details1-sub-details {
  padding: 0px 0px 0px 48px;
  margin: 16px 0px 16px 0px;
}

.details1-sub-details summary {
  /* Sub-summary should have smaller font-size to make hierarchy more visible for user. */
  font-size: 1.7rem;
}

.details1-sub-details li {
  margin: 0px 0px 10px 0px;
}



/* 
  ========================================================================
  ====================== Mobile Responsiveness ===========================
  ======================================================================== 
*/
/* 
  Media Query Breakpoints are based on the sizes of the devices 
  in Google developer tools. 
*/
@media (max-width: 768px) {

  .details1 summary {
    font-size: 1.8rem;
  }

  .details1-sub-details {
    padding: 0px 0px 0px 24px;
  }

  .details1-sub-details summary {
    font-size: 1.5rem;
  }
}



@media (max-width: 425px) {

  .details1 ul,
  .details1 ol,
  .details1-sub-details ul,
  .details1-sub-details ol {
    padding: 0px 0px 0px 40px;
  }

  .details1-sub-details h4 {
    margin: 12px 0px 12px 0px;
  }

  .details1 p {
    margin: 16px 0px 16px 0px;
  }
}