#title {
  margin-top: 5px;
  font-family: "Cowboy", sans-serif;
  font-size: 30px;
  background-color: rgba(240, 255, 255, 0.664);
}
#character_title {
  font-family: "Cowboy", sans-serif;
  background-color: rgba(240, 255, 255, 0.705);
  font-size: 30px;
}
#character_list {
  background-color: rgba(240, 255, 255, 0.61);
}
#character_list li {
  margin-bottom: 60px;
  list-style: none;
  font-family: "Cowboy", sans-serif;
  font-size: 30px;
}
#story {
  background-color: rgba(240, 255, 255, 0.616);
  margin-top: 5px;

  font-family: "Cowboy", sans-serif;
  font-size: 30px;
}
body {
  background-image: url("Background.png");
}
@font-face {
  font-family: "Cowboy";
  src: url("./Western Cowboy.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

#main_window {
  list-style: none;
  display: flex;
  background-color: rgba(240, 255, 255, 0.527);
  font-family: "Cowboy", sans-serif;
}
#secondary_window {
  margin-top: 20px;
  list-style: none;
  display: flex;
  background-color: rgba(240, 255, 255, 0.425);
  font-family: "Cowboy", sans-serif;
}
#about_me {
  list-style: none;
  display: flex;
  background-color: rgba(240, 255, 255, 0.705);
  font-family: "Cowboy", sans-serif;
}
#ralphgame {
  width: 300px;
}
.red {
  color: red;
}

#skill_list {
  margin-top: 30px;
  margin-left: 30px;
}

#header {
  background-color: #f4f4f483;
  padding: 15px;
  display: flex;
  list-style: none;
  justify-content: space-between;
  align-items: center;
}
.white_background {
  margin-bottom: 60px;
  background-color: #f4f4f483;
  list-style: none;
  font-family: "Cowboy", sans-serif;
  font-size: 30px;
}

.item_image {
  width: 200px;
}

/* styles.css */
.grid-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* Responsive columns */
  gap: 20px; /* Space between grid items */
  padding: 20px;
  max-width: 1200px; /* Optional: Limit container width */
  margin: 0 auto; /* Center the grid */
}

.grid-item {
  text-align: center; /* Center text and image */
}

.grid-item img {
  max-width: 100%; /* Ensure images are responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Optional: Rounded corners */
}

.grid-item p {
  margin: 10px 0 0; /* Space above text */
  font-size: 16px; /* Text size */
  color: #333; /* Text color */
}
.green {
  color: green;
}