@media { /* Root */
  :root {
    --dl-size-size-large: 144px;
    --dl-size-size-small: 48px;
    --dl-size-size-medium: 96px;
    --dl-size-size-xlarge: 192px;
    --dl-size-size-xsmall: 16px;
    --dl-space-space-unit: 16px;
    --dl-size-size-xxlarge: 288px;
    --dl-size-size-maxwidth: 1400px;
    --dl-color-theme-accent1: #AFD8F5;
    --dl-color-theme-accent2: #9DC4F5;
    --dl-radius-radius-round: 50%;
    --dl-color-theme-primary1: #0060B9;
    --dl-color-theme-primary2: #193EBD;
    --dl-space-space-halfunit: 8px;
    --dl-space-space-sixunits: 96px;
    --dl-space-space-twounits: 32px;
    --dl-radius-radius-radius2: 2px;
    --dl-radius-radius-radius4: 4px;
    --dl-radius-radius-radius8: 8px;
    --dl-space-space-fiveunits: 80px;
    --dl-space-space-fourunits: 64px;
    --dl-color-theme-secondary1: #E5F0FF;
    --dl-color-theme-secondary2: #D9E3F2;
    --dl-space-space-threeunits: 48px;
    --dl-color-theme-neutral-dark: #141A22;
    --dl-radius-radius-cardradius: 8px;
    --dl-color-theme-neutral-light: #FFFFFF;
    --dl-radius-radius-imageradius: 8px;
    --dl-radius-radius-inputradius: 24px;
    --dl-radius-radius-buttonradius: 24px;
    --dl-space-space-oneandhalfunits: 24px;
  }
}

@media {/* Logos TEST*/
  .headerlogo {
    width: 200px;
    height: 100px;
    object-fit: contain;
    text-decoration: none;
  }

  .footerlogo {
    width: 425px;
    height: 125px;
    object-fit: contain;
  }
}

@media { /* Buttons & HBF Elements */
  @media { /* Buttons */
    .button{
      display: flex;
      flex-direction: row;
      text-decoration: none;
    }

    .buttona{
      display: flex;
      flex-direction: row;
      text-decoration: none;
      color: var(--dl-color-theme-secondary1);
    }

    .buttonanimate:hover::before {
      color: var(--dl-color-theme-neutral-light);
      z-index: -1;
      transform: scaleX(1);
    }

    .buttonanimate:before {
      top: 0;
      left: -20%;
      color: var(--dl-color-theme-neutral-light);
      width: 200%;
      height: 101%;
      content: "";
      z-index: 1;
      position: absolute;
      transform: scaleX(0);
      transition: transform 0.5s;
      border-radius: var(--dl-radius-radius-buttonradius);
      background-color: var(--dl-color-theme-neutral-dark);
      transform-origin: 0 0;
      transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
    }

    .buttonanimate {
      outline: none;
      z-index: 1;
      overflow: hidden;
      position: relative;
      border-width: 2px;
    }

    .buttonoutline {
      gap: var(--dl-space-space-halfunit);
      fill: var(--dl-color-theme-primary1);
      color: var(--dl-color-theme-primary1);
      border: 1px solid;
      cursor: pointer;
      display: flex;
      transition: 0.3s;
      align-items: center;
      font-weight: bold;
      padding-top: var(--dl-space-space-halfunit);
      white-space: nowrap;
      border-color: var(--dl-color-theme-primary1);
      padding-left: var(--dl-space-space-oneandhalfunits);
      border-radius: var(--dl-radius-radius-buttonradius);
      padding-right: var(--dl-space-space-oneandhalfunits);
      padding-bottom: var(--dl-space-space-halfunit);
      justify-content: center;
    }

    .buttonoutline:hover {
      fill: var(--dl-color-theme-secondary2);
      color: var(--dl-color-theme-secondary2);
      border-color: var(--dl-color-theme-primary2);
      background-color: var(--dl-color-theme-primary2);
    }

    .buttonfill {
      gap: var(--dl-space-space-halfunit);
      fill: var(--dl-color-theme-secondary1);
      color: var(--dl-color-theme-secondary1);
      cursor: pointer;
      display: flex;
      transition: 0.3s;
      align-items: center;
      font-weight: bold;
      padding-top: var(--dl-space-space-halfunit);
      white-space: nowrap;
      border-color: var(--dl-color-theme-primary1);
      border-width: 1px;
      padding-left: var(--dl-space-space-oneandhalfunits);
      border-radius: var(--dl-radius-radius-buttonradius);
      padding-right: var(--dl-space-space-oneandhalfunits);
      padding-bottom: var(--dl-space-space-halfunit);
      justify-content: center;
      background-color: var(--dl-color-theme-primary1);
    }

    .buttonfill:hover {
      fill: var(--dl-color-theme-secondary2);
      color: var(--dl-color-theme-secondary2);
      border-color: var(--dl-color-theme-primary2);
      background-color: var(--dl-color-theme-primary2);
    }


  }
  @media { /* Input (Generated by AI:ChatGPT 4o mini) */
    .inputfield {
      display: inline-block; /* Allows input to sit inline without flex */
      position: relative;
      border-width: 2px;
      padding: var(--dl-space-space-halfunit) var(--dl-space-space-oneandhalfunits); /* Adjust padding */
      border: 1px solid var(--dl-color-theme-primary1); /* Border color */
      border-radius: var(--dl-radius-radius-buttonradius); /* Same radius as the button */
      background-color: transparent; /* No background color */
      color: var(--dl-color-theme-primary1); /* Text color */
      font-weight: bold; /* Same as button text */
      font-family: inherit; /* Inherit font family */
      font-size: inherit; /* Inherit font size */
      outline: none; /* Remove outline */
      transition: border-color 0.3s, background-color 0.3s, color 0.3s; /* Smooth transitions */
      white-space: nowrap; /* Prevent text from wrapping */
    }

    /* Input Field Animation on Hover (similar to the button animation) */
    .inputfield:focus {
      border-color: var(--dl-color-theme-primary2); /* Change border color when focused */
      color: var(--dl-color-theme-primary2); /* Change text color when focused */
      background-color: var(--dl-color-theme-neutral-light); /* Light background on focus */
    }

    .inputfield:focus::before {
      content: ""; /* Create pseudo-element like the button */
      position: absolute;
      top: 0;
      left: -20%;
      width: 200%;
      height: 101%;
      background-color: var(--dl-color-theme-neutral-dark);
      z-index: -1;
      transform: scaleX(1);
      transition: transform 0.5s;
      transform-origin: 0 0;
      border-radius: var(--dl-radius-radius-buttonradius);
      transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
    }

    .inputfield:hover::before {
      color: var(--dl-color-theme-neutral-light); /* Change pseudo-element color */
      transform: scaleX(1);
    }
  }
  @media { /* Header Elements */

    .headerformat {
      top: 0;
      width: 100%;
      display: flex;
      z-index: 1000;
      position: fixed;
      justify-content: center;
      background-color: #D9D9D9;
    }

    .headerbuttons {
      width: 100%;
      display: flex;
      z-index: 100;
      max-width: var(--dl-size-size-maxwidth);
      align-items: center;
      padding-top: var(--dl-space-space-oneandhalfunits);
      padding-left: var(--dl-space-space-threeunits);
      padding-right: var(--dl-space-space-threeunits);
      padding-bottom: var(--dl-space-space-oneandhalfunits);
      justify-content: right;
      background-color: #D9D9D9;
    }

  }
  @media { /* Body Elements */

    .bodyfull {
      width: 100%;
      display: flex;
      padding: var(--dl-space-space-fiveunits);
      position: relative;
      align-items: center;
      flex-direction: column;
      height: auto;
      background-color: #D9D9D9;
    }

    .bodytext {
      height: auto;
      min-height: 1000px;
      max-width: 1000px;
    }

  }
  @media { /* Footer Elements */

    .footer {
      width: 100%;
      height: auto;
      max-height: 200px;
      display: flex;
      overflow: hidden;
      position: relative;
      align-items: center;
      flex-shrink: 0;
      flex-direction: column;
      justify-content: center;
      background-color: #D9D9D9;
    }

    .footerdiv {
      gap: var(--dl-space-space-threeunits);
      height: auto;
      max-height: 200px;
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
    }

    .footerdivimage {
      gap: var(--dl-space-space-twounits);
      height: auto;
      max-height: 65px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .footerbar {
      width: 100%;
      height: 1px;
      background-color: var(--dl-color-theme-neutral-dark);
    }

    .footerlinks {
      gap: 300px;
      display: flex;
      align-items: flex-start;
    }



  }

}

@media { /* Fonts */

  .font20 {
    font-size: 20px;
  }

  .link {
    color: var(--dl-color-theme-primary2);
    text-decoration: underline;
  }

  .font48 {
    font-size: 48px;
    font-family: Lato;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }

  .font18 {
    font-size: 18px;
    font-family: Roboto;
    line-height: 1.5;
    text-align: center;
  }

  .centeredfont16 {
    font-size: 16px;
    font-family: Roboto;
    line-height: 1.5;
    text-align: center;
  }

  .centered {
    text-align: center;
  }

}

@media { /* Other */

  .form {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .bodylistlegaltext {
    flex: 0 0 auto;
    display: flex;
    align-self: stretch;
    align-items: center;
    padding-bottom: var(--dl-space-space-unit);
    flex-direction: column;
  }

}