body {
  font-family: 'Fira Mono', monospace;
  /* Grid properties removed for predictable top-down layout */
  min-height: 100vh;
  margin: 0;
  background-color: rgb(106, 124, 131);
  padding: 50px 20px;
}

.page-wrapper {
  max-width: 900px;
  margin: 0 auto; /* Center the wrapper horizontally */
}



a {
  text-decoration: none;
}


/* THE BARRIER — your neat box that keeps everything inside and looks cool */
.barrier {
  border: 6px double black;
  padding: 10px 30px; /* Reduced top/bottom padding */
  max-width: 900px; /* limit width to force wrapping */
  width: 100%;
  background: rgb(100, 116, 122);
  box-shadow: 12px 12px 0 #111;
  box-sizing: border-box;
}

/* FLEX CONTAINER FOR YOUR BOXES */
.container {
  display: flex;
  flex-wrap: wrap; /* THIS MAKES THE BOXES WRAP DOWN WHEN NEEDED */
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
}

/* YOUR BOXES */
.box {
  outline: 5px solid black;
  box-shadow: 10px 10px 0 5px #080808;
  padding: 20px;
  background: rgb(209, 232, 240);
  flex: 1 1 280px;  /* flex-grow, flex-shrink, base width */
  max-width: 400px;
  min-width: 240px;  /* max width so they don't blow up */
  box-sizing: border-box;
}

.container2 {
  display: flex;
}

/* Fira Mono font helpers if you want */
.fira-mono-regular {
  font-family: "Fira Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.fira-mono-medium {
  font-family: "Fira Mono", monospace;
  font-weight: 500;
  font-style: normal;
}

.fira-mono-bold {
  font-family: "Fira Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.container-stacked {
  flex-direction: column;
  align-items: center;
}

/* NAVIGATION STYLES */
.nav-barrier {
  border: 6px double black;
  padding: 10px;
  background: rgb(100, 116, 122);
  box-shadow: 12px 12px 0 #111;
  margin-bottom: 20px; /* Controlled space between nav and main content */
  text-align: center;
}

.nav-links a {
  font-size: 1.2em;
  color: black;
  margin: 0 15px;
  font-weight: bold;
}

.nav-links a:hover {
  text-decoration: underline;
}