@font-face {
  font-family: "rat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf");
}

@font-face {
  font-family: "round";
  src: url("fonts/Somatic-Rounded.otf");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "rat", sans-serif;
  color: #302c38;
}

/* Flex utility classes */
.flexContainer {
  display: flex;
  justify-content: center;
}

.centeredColumn {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

h1 {
  font-family: "rat";
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  line-height: 1.2;
  margin: 20px 0;
}

/* Optional: smooth transitions for UI changes */
body {
  transition: background 0.3s ease, color 0.3s ease;
}

body {
  background: linear-gradient(
    135deg,
    #fff0f5,
    #e0f7fa
  ); /* zacht pastel verloop */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

/* Optioneel: wrapper rond content voor max breedte en centrering */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Optioneel: achtergrondkleur voor tabellen */
.mainTable {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}