@import url("https://fonts.googleapis.com/css2?family=Archivo&display=swap");
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100dvh;
    font-family: var(--primary-font);
    font-weight: var(--font-weight-n);
    font-size: var(--font-size-text);
    letter-spacing: var(--text-tracking);
    color: var(--primary-dark-color);
}



a {
    font-family: var(--secondary-font);
}


.page {
  display: block;
  min-height: 100%;
  background: #d22b8a;
  background: linear-gradient(
    180deg,
    rgba(210, 43, 138, 1) 0%,
    rgba(199, 87, 128, 1) 40%,
    rgba(47, 72, 126, 1) 100%
  );

    .language-modal{
      position: fixed;  /* Blijft op dezelfde plaats, zelfs als de pagina scrollt */
      z-index: 100;  /* Zorg ervoor dat de modal boven andere inhoud staat */
      top: 0;
      left:0;
      width: 100%;  /* Dek het volledige scherm af */
      height: 100%;  /* Dek het volledige scherm af */
      overflow: auto;  /* Zorg ervoor dat je kunt scrollen als de modal groot is */
      background: rgba(0, 0, 0, 0.4);  /* Semi-transparante zwarte achtergrond */
       
    }

}

.container {
    display: flex;
    color: var(--primary-dark-color);
    padding: min(3%, 2rem);
    max-width: 78rem;
    margin: auto;
}

.card {
    padding: min(7%, 2rem);
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 0 auto;
    background: #e3efe9;
}