body {
  /* 1. Link to your PNG image */
  background-image: url('https://nature-planet.neocities.org/bg%20block.png');

  /* 2. Set it to repeat in both directions (this is the default) */
  background-repeat: repeat;

  /* 3. Keep the pixel art sharp (CRITICAL for pixel art) */
  image-rendering: pixelated;

  /* 4. Optional: Set the size of the tiles */
  background-size: 64px; 
}

.navbar {
  display: flex;
  justify-content: space-between; /* Pushes items to opposite ends */
  align-items: center;
  padding: 10px 50px;
  
  /* Gaming Theme Styles */
  background-image: url('https://nature-planet.neocities.org/nav%20bar.png'); /* Or use a solid color like #333 */
  background-size: 64px;
  image-rendering: pixelated;
  border-bottom: 4px solid #000;
  
  /* Keeps it at the top when you scroll */
  position: sticky;
  top: 0;
  z-index: 1000; 
}

.nav-links {
  display: flex;
  list-style: none; /* Removes bullet points */
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-family: 'Courier New', Courier, monospace; /* Blocky font */
  font-weight: bold;
  text-transform: uppercase;
}

.nav-links a:hover {
  color: #ffaa00; /* Changes color when you hover over it */
}

.site-header {
  /* This centers the logo inside the header */
  display: flex;
  justify-content: center;
  padding: 20px 0;
  
  /* Adding the dirt/wood background behind the logo */
  background-image: url('dirt-texture.png'); 
  background-size: 64px;
  image-rendering: pixelated;
  border-bottom: 5px solid #000;
}

.main-logo {
  /* 1. Limit the width so it doesn't take over the screen */
  max-width: 600px; 
  width: 90%; /* Makes it responsive on smaller screens */
  
  /* 2. Keep the height proportional */
  height: auto; 
  
  /* 3. Keep the pixels sharp */
  image-rendering: pixelated;
}