/* Include box-sizing for all elements */
* {
  box-sizing: border-box; /* Ensures padding/border are included in width */
}

.song-word-generator {
  margin: 0 auto; /* Center the container */
  padding: 20px; /* Add some padding around the container */
  border: 1px solid #ddd; /* Optional border */
  border-radius: 8px; /* Rounded corners */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff; /* Background color */
  text-align: center; /* Center align text */
  max-width: 600px; /* Maximum width */
  width: 100%; /* Full width of the container */
}

input[type="number"],
button {
  width: 80%; /* Set a fixed width of 80% */
  padding: 10px; /* Add padding for better spacing */
  margin: 10px 0; /* Add margin for spacing between elements */
  border: 1px solid #ccc; /* Border style */
  border-radius: 4px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional shadow */
  font-size: 16px; /* Font size */
}

button {
  background-color: #4CAF50; /* Button background color */
  color: white; /* Text color for the button */
  cursor: pointer; /* Pointer cursor on hover */
}

button:hover {
  background-color: #45a049; /* Darker shade on hover */
}

.result-side {
  margin-top: 0.3rem;
  max-height: 400px; /* Added for scroll bar control */
  overflow-y: auto; /* Only vertical scrolling */
}

h3 {
  margin-bottom: 0.5rem; /* Spacing below heading */
}

#word-list {
  list-style-type: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
}

#word-list li {
  background-color: #f0f0f0; /* Background color for list items */
  padding: 0.5rem; /* Padding inside list items */
  margin-bottom: 0.5rem; /* Spacing between list items */
  border-radius: 4px; /* Rounded corners for list items */
  text-transform: capitalize; /* Capitalizes each word */
}

/* Responsive design */
@media (max-width: 600px) {
  .song-word-generator {
    padding: 1rem; /* Adjust padding for smaller screens */
    width: auto; /* Ensure width adapts to the screen size */
  }
}