:root {
  --color-bg-light: #e4f0f7;
  --color-text-light: #000000;
  --color-primary-light: #009bed;
  --color-secondary-light: #ff0066;
  --color-primary-light-20: rgba(0, 155, 237, 0.2);
  --color-secondary-light-20: rgba(255, 0, 102, 0.2);

  --color-bg-dark: #000000;
  --color-text-dark: #e4f0f7;
  --color-primary-dark: #009bed;
  --color-secondary-dark: #ff0066;
  --color-primary-dark-20: rgba(0, 155, 237, 0.2);
  --color-secondary-dark-20: rgba(255, 0, 102, 0.2);

  --color-bg: var(--color-bg-light);
  --color-text: var(--color-text-light);
  --color-primary: var(--color-primary-light);
  --color-secondary: var(--color-secondary-light);
  --color-primary-20: var(--color-primary-light-20);
  --color-secondary-20: var(--color-secondary-light-20);

  --font-size: clamp(18px, 2cqmin, 60px);
  --padding: 0.6cqmin;
  --gap: 1.2cqmin;
  --border: 0.3cqmin;
  --border-radius: 0.6cqmin;
}

[data-theme="dark"] {
  --color-bg: var(--color-bg-dark);
  --color-text: var(--color-text-dark);
  --color-primary: var(--color-primary-dark);
  --color-secondary: var(--color-secondary-dark);
  --color-primary-20: var(--color-primary-dark-20);
  --color-secondary-20: var(--color-secondary-dark-20);
}

* {
  box-sizing: border-box;
  margin: 0; /*Google auto adds margin for some items to avoid problems*/
  padding: 0; /*Some items automaticly get padding*/

  /* Default text settings */
  font-family: Ebrima, sans-serif;
  font-size: var(--font-size);
  color: var(--color-text);

  @media (max-width: 1025px) {
    font-size: clamp(18px, 2cqmax, 60px);
  }
}

a {
  /*Removes default link color, underlined and such*/
  text-decoration: none;
  color: var(--color-text);
}

ul {
  /*Removes markers from the li items*/
  list-style-type: none;
}

body {
  /* makes sure the body is full size */
  width: 100vw;
  min-height: 100vh;
  padding: var(--padding);

  /* Desktop version */
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;

  display: grid;
  grid-template-areas:
    "header header"
    "menu main";

  @media (max-width: 1025px) {
    /* mobile version */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;

    display: grid;
    grid-template-areas:
      "header header"
      "menu menu"
      "main main";
  }
}

/* HEADER +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
header {
  grid-area: header;
  background-color: var(--color-primary);
  padding: var(--padding);
  border-radius: var(--border-radius);

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

header .imageContainer img {
  width: clamp(300px, 24cqmin, 900px);
}

/* MENU +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
menu {
  grid-area: menu;
  background-color: var(--color-bg);
  padding: var(--padding);
  border-radius: var(--border-radius);
}

menu nav {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 15cqmin;
}

menu nav .navElement {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

menu nav .navElement span {
  font-size: 100%;
}

menu nav .navElement:hover {
  padding-left: var(--padding);
}

menu nav .navElement:hover a {
  font-weight: bold;
}

menu nav .navElement:hover .material-symbols-outlined {
  font-weight: bold;
}

@media (max-width: 1025px) {
  /* mobile version */
  menu nav {
    flex-direction: row;
  }

  menu nav .navElement {
    flex: 1;
    justify-content: center;
  }
}

/* Main +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
main {
  /*algemeen*/
  grid-area: main;
  padding: var(--padding);
}

main form table {
  border-spacing: var(--gap);
}

/* Main Toevoegen +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
main form .checkboxFormControl {
  display: flex;
}

main form input[type="checkbox"] {
  width: clamp(3.2cqmin, 1em, 1.6cqi);
  height: clamp(3.2cqmin, 1em, 1.6cqi);

  padding: var(--padding);
  border-radius: var(--border-radius);
  border: var(--border) solid var(--color-text);
}

main input[type="text"],
main form input[type="number"],
main form input[type="locatie"] {
  padding: var(--padding);
  border-radius: var(--border-radius);
  border: var(--border) solid var(--color-text);
  display: flex;
}

main form input[type="submit"],
main form button[type="submit"] {
  padding: calc(var(--padding) / 2);
}

/* Main index +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
main .mainContainer {
  display: flex;
  flex-direction: column;
  padding: var(--padding);
  gap: var(--gap);
}

/* Main search +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
main .tablePadding {
  padding: var(--padding);
}

main .searchTable {
  border-collapse: collapse;
}

main .searchTable tbody {
  border-radius: var(--border-radius);
  border: var(--border) solid var(--color-text);
}

main .searchTable tr {
  border-bottom: calc(var(--border) / 2) solid var(--color-text);
}

main .searchTable th,
main .searchTable td {
  padding: var(--padding) calc(var(--padding) * 2);
  text-align: left;
}

main .searchTable tr:nth-of-type(2n) {
  background-color: var(--color-primary-20);
}