#page-footer {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 15px 80px 15px 80px;

  /* To let footer stick to bottom */
  position: sticky;
  top: 100%;


  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

#page-footer>* {
  flex: 1;
}

#page-footer-right {
  /* 
      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: end;
}



/* 
  ========================================================================
  ================================ Text ==================================
  ======================================================================== 
*/
#page-footer p {
  font-size: 0.9rem;
  margin: 12px 0px 12px 0px;
}



/* 
  ========================================================================
  ====================== Mobile Responsiveness ===========================
  ======================================================================== 
*/
/* 
  Media Query Breakpoints are based on the sizes of the devices 
  in Google developer tools. 
*/
@media (max-width: 1024px) {
  #page-footer {
    gap: 20px;
    padding: 15px 30px 15px 40px;
  }
}

@media (max-width: 425px) {
  #page-footer {
    padding: 15px 8px 15px 8px;
  }

  #page-footer p,
  #page-footer a {
    font-size: 0.8rem;
  }


  #page-footer-left {
    padding: 0px 0px 0px 15px;
  }
}