/* === Base Styles === */
body {
  background-image: url('images/bgpattern.png'); 
  background-repeat: repeat;
  font-family: Tahoma, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

/* === Page Content Box === */
.page-content {
  max-width: 43.75rem;       /* 700px */
  margin: 3.75rem auto;      /* 60px */
  padding: 1.875rem 1.563rem;/* 30px 25px */
  background-color: #fefefe;
  border-radius: 0.625rem;   /* 10px */
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.05); /* 2px 10px */
  color: #2e3a59;
  text-align: center;
}

.page-content h1 {
  font-family: Georgia, serif;
  font-size: 2.5rem;
  margin-bottom: 2.5rem;     /* 40px */
  color: #2e3a59;
}
.page-content h2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 2rem;
  margin-bottom: 2rem;     /* 40px */
  color: #2e3a59;
  text-align: center;
}
.page-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.875rem;   /* 30px */
  color: #2e3a59;
}

/* === Button Grid Layout === */
.button-grid {
  display: grid;
  grid-template-columns: 1fr, 1fr;
  gap: 1.25rem;              /* 20px */
  max-width: 37.5rem;        /* 600px */
  margin: 1.875rem auto;     /* 30px */
  padding: 0 1.25rem;        /* 20px */
}

/* === Navigation Buttons === */
.nav-button {
  background-color: #8042b7;
  color: #ffffff;
  border: none;
  padding: 0.2rem 1.25rem;   
  font-size: 0.875rem;       
  font-family: Georgia, serif;
  border-radius: 1.563rem;   
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);  
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3.5rem;
}

.nav-button:hover {
  background-color: #9250c1;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 0.75rem rgba(0,0,0,0.3);
}

.nav-button:active {
  transform: translateY(0);
}

.nav-button:nth-child(1),
.nav-button:nth-child(2) {
  background-color: #8042b7; /* donkerpaars */
}

.nav-button:nth-child(3),
.nav-button:nth-child(4) {
  background-color: #9963cc; /* iets lichter */
}

.nav-button:nth-child(5),
.nav-button:nth-child(6) {
  background-color: #b985e0; /* nog lichter */
}

.nav-button:nth-child(7),
.nav-button:nth-child(8) {
  background-color: #d5acef; /* lichtpaars */
}


/* === Footer === */
.footer {
  text-align: center;
  margin-top: 2.5rem;        /* 40px */
  padding-top: 1.25rem;      /* 20px */
  border-top: 0.063rem solid #ddd; /* 1px */
  font-size: 0.875rem;       /* 14px */
  color: #888;
}

/* === Responsive === */
@media (max-width: 37.5rem) { /* 600px */
  .button-grid {
    grid-template-columns: 1fr;
    padding: 0 0.625rem;     /* 10px */
  }

  .page-content h1 {
    font-size: 2rem;
  }
}