body {
  font-family: Arial, sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 10vh; /* Ensure full viewport height */
  margin: 100;
  background: linear-gradient(to bottom, #007f00, #007f00); /* Grass-like gradient */
  overflow: hidden /*Prevent scrolling */
}

.title-header {
  width: 100%;
  padding: 20px 10;
  background-color: #f0f0f0;
  text-align: center; /* Center align the title */
  position: fixed;
  z-index: 10 /* Ensure the title is above other elements */
}

#ground-line {
  width: 100%;
  height: 20px; /*adjust line thickness as needed */
  background-color: #000;
  margin: 2px 200; /* Adjust margin to position the line */
}

h1 {
  margin: 0;
}

#container {
  max-width: 600px

}


#grid {
  position: relative;
  width: 100%;
  height: 100%;
}

.pixel {
  width: 20px;
  height: 20px;
  background-color: transparent; /* Make the pixels transparent to show grass */
}

.pixel:hover, .pixel.active {
  background-color: #000;
}

#character {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position relative to its own dimensions */
  width: 80px; /* Adjust size as needed */
  height: 80px;
  z-index: 1; /* Ensure the character is above the grid */
  transition: top 0.2s ease, left 0.2s ease; /* Smooth transition for movement */
}

 /* Style for the green dots */
 .green-dot {
   position: absolute;
   width: 20px;
   height: 20px;
   background-color: #50C878;
}


/* Style for the trees */
.tree {
  position: absolute;
  width: 200px; /* Adjust based on your character.png size */
  height: 200px; /* Adjust based on your character.png size */
  background-image: url('Tree.png');
  background-size: cover;
  z-index: 2; /* Ensure the trees are above the character */
}


/* Animation classes for different directions */
.move-up { animation: moveUp 0.3s steps(4) infinite; }
.move-down { animation: moveDown 0.3s steps(4) infinite; }
.move-left { animation: moveLeft 0.3s steps(4) infinite; }
.move-right { animation: moveRight 0.3s steps(4) infinite; }

@keyframes moveUp {
  from { background-position: 0px 0px; }
  to { background-position: 0px -80px; }
}

@keyframes moveDown {
  from { background-position: 0px -160px; }
  to { background-position: 0px -240px; }
}

@keyframes moveLeft {
  from { background-position: 0px -320px; }
  to { background-position: 0px -400px; }
}

@keyframes moveRight {
  from { background-position: 0px -480px; }
  to { background-position: 0px -560px; }
}