/* Everforest Dark Medium Color Palette */
:root {
  --bg: #000000;
  --fg: #ffb000;
  --green: #b37b00;
  --yellow: #ffb000;
  --blue: #804d00;
  --red: #d93b00;
  --purple: #a65c00;
}

body {
  color: var(--fg);
  background-color: var(--bg);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.25rem; /* Prevents text from sticking to mobile screen edges */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  text-align: left;
  /* ... rest of your body styles */
}


h1 {

  color: var(--green);
  text-align: center;
}
h2 {
  color: var(--yellow);
  text-align:center;
}


em {
  font-size: normal;
  color: var(--purple);
}

li {
  color: var(--fg);
}
/* Optional: styling links to match the palette */
a {
  color: var(--red);
}

a:visited {
  color: var(--purple);
}


p {

  text-align:left;

}

nav ul {
  list-style-type: none;
  padding: 0;
}


nav li {

margin-bottom: 50px;

}
a {
  text-decoration: none;
}

.container {
  display: flex;
  flex-wrap: wrap; /* Allows items to drop to the next line on small screens */
  gap: 16px;       /* Spacing between items */
}

.item {
  flex: 1 1 300px; /* Grow to fill space, shrink if needed, but aim for a 300px base width */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}