/* Ensure the main content sits below the header and takes full width */
main {
  width: 100%; /* Make sure the main content takes up full width */
  padding: 20px;
  margin: 0; /* Remove any potential margin that could push it right */
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  overflow: hidden;
}

/* Body and HTML styling to ensure proper layout */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

/* Sticky footer: push footer to bottom when content is short */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

html,
body,
button,
select {
  font-family: "Playpen Sans", cursive;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  main {
    padding: 10px; /* Reduce padding on smaller screens for a more compact layout */
  }
}