.btn-cta-at-end {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    align-items: center;
    gap: 32px;
}


.btn-highlighted,
.btn-underemphasized {
    margin: 0px;
}

.btn-highlighted a,
.btn-highlighted a:hover,
.btn-highlighted a:focus,
.btn-underemphasized a,
.btn-underemphasized a:hover,
.btn-underemphasized a:focus {
    /* 
      Use display:block.
      Otherwise it can happen that, for example, 
      other a-tags are positioned within the div-tag 
      of the button and the size of the button is 
      not taken into account. 
    */
    display: block;

    font-size: 1.5rem;
    text-decoration: none;
    padding: 16px 28px 16px 28px;

    border-radius: 8px;
    white-space: nowrap;
}



/* 
  ========================================================================
  =========================== Highlighted Button =========================
  ======================================================================== 
*/
.btn-highlighted a {
    background-color: var(--md-sys-color-custom-color-1-container);
    color: var(--md-sys-color-on-secondary-container);
}

.btn-highlighted a:hover,
.btn-highlighted a:focus {
    background-color: var(--md-sys-color-on-secondary-container);
    color: var(--md-sys-color-custom-color-1-container);
}



/* 
  ========================================================================
  ======================= Underemphasized Button =========================
  ======================================================================== 
*/
.btn-underemphasized a,
.btn-underemphasized a:hover,
.btn-underemphasized a:focus {
    /* 
      To ensure that underlined and highlighted buttons are the same size, 
      the thickness of the border must also be taken into account when padding. 
    */
    padding: 15px 27px 15px 27px;
}

.btn-underemphasized a {
    background-color: transparent;
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-on-surface);
}

.btn-underemphasized a:hover,
.btn-underemphasized a:focus {
    background-color: var(--md-sys-color-on-secondary-container);
    color: var(--md-sys-color-custom-color-1-container);
}



/* 
  ========================================================================
  ============================= Nav-Button ===============================
  ======================================================================== 
*/
.btn-nav-small a {
    font-size: 0.9rem;
}

.btn-nav-normal a {
    font-size: 1.2rem;
}

.btn-nav a {
    color: var(--md-sys-color-on-primary-container);
    text-decoration: none;
    margin: 3px;
    padding: 18px;
    border-radius: 8px;
    white-space: nowrap;
}

.btn-nav a:hover,
.btn-nav a:focus {
    background-color: var(--md-sys-color-on-primary-container);
    color: var(--md-sys-color-primary-container);
}



/* 
  ========================================================================
  ====================== Mobile Responsiveness ===========================
  ======================================================================== 
*/
/* 
  Media Query Breakpoints are based on the sizes of the devices 
  in Google developer tools. 
*/
@media (max-width: 425px) {
    .btn-cta-at-end {
        gap: 16px;
    }
}

@media (max-width: 375px) {
    .btn-cta-at-end {
        flex-flow: column wrap;
        justify-content: center;
        align-items: start;
    }
}