:root {
    --bg-en: #000000;
    --text-en: #ffffff;
    --bg-fr: #ffffff;
    --text-fr: #000000;
    --bg-lu: #1f2a44;
    --text-lu: #f6c343;
    --bg-de: #f9e8c0;
    --text-de: #16324f;
    --text-color: #0b0b0b;
    --transition-time: 0.8s;
    --font-main: "Estimated Regular", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    --font-title: "Break", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
@font-face {
        font-family: "Break";
        src: url("./Break.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
}

@font-face {
    font-family: "Estimated Regular";
    src: url("./Estimated-Regular_web.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
  * {
      box-sizing: border-box;
  }

  body {
      margin: 0;
      font-family: var(--font-main);
      color: var(--text-color);
      transition: background-color var(--transition-time) ease;
      background-color: var(--bg-en);
      line-height: 1.7;
  }

body.lang-en {
        background-color: var(--bg-en);
        color: var(--text-en);
}

header.lang-en {
        background-color: var(--text-en);
        color: var(--bg-en);
}

body.lang-fr {
        background-color: var(--bg-fr);
        color: var(--text-fr);
}

header.lang-fr {
        background-color: var(--text-fr);
        color: var(--bg-fr);
}

body.lang-lu {
        background-color: var(--bg-lu);
        color: var(--text-lu);
}

header.lang-lu {
        background-color: var(--text-lu);
        color: var(--bg-lu);
}

body.lang-de {
        background-color: var(--bg-de);
        color: var(--text-de);
}

header.lang-de {
        background-color: var(--text-de);
        color: var(--bg-de);
}

  header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      /* background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(6px); */
      text-align: center;
      padding: 12px 14px;
      font-weight: 600;
      letter-spacing: 0.05em;
      z-index: 10;
  }

  header a {
      margin: 0 10px;
      /* opacity: 0.6;
      transition: opacity 0.3s; */
      text-decoration: none;
      color: inherit;
  }

  header a.active,
  header a[aria-current="page"] {
      opacity: 1;
      text-decoration: underline;
  }

  header a:hover {
      /* opacity: 0.9; */
  }

  main {
      max-width: 800px;
      margin: 120px auto 80px;
      padding: 0 20px;
      
  }

h1 {
        font-family: var(--font-title);
        font-size: clamp(2.8rem, 8vw, 4.5rem);
        margin: 0 0 0.25em;
        letter-spacing: 0.02em;
        text-align: center;
}

  h2, .links {
      text-align: center;
      font-size: clamp(1.1rem, 3.2vw, 1.5rem);
      margin-top: 0;
  }

  section {
      margin: 72px 0;
      text-align: left;
  }

  section p {
      margin: 0 0 1.1em;
      font-size: 1.05rem;
  }

 .links {
      margin: 72px 0;
    text-align: center;

 }

  .cta a {
      /* display: inline-block; */
      text-decoration: none;
        color: inherit;
      /* border-bottom: 2px solid ;
      padding-bottom: 1px; */
      /* transition: opacity 0.25s; */
  }

  .cta a:hover {
      opacity: 0.75;
  }

  footer {
      font-size: 0.95rem;
      margin-top: 100px;
      
  }

  .fade {
      animation: fadeIn 0.7s ease both;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(6px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }