/* Global Styles */
html {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Choose a modern sans-serif font */
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f9f9f9; /* Light gray background */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensure full viewport height */
}

/* Wrapper Styles */
#wrapper {
  width: 90%; /* Adjust width for responsiveness */
  max-width: 500px; /* Limit maximum width */
  background-color: #091a1f; /* White background */
  color: #f7f7f7eb; /* Dark text color */
  border-radius: 20px; /* Rounded corners */
  padding: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
}

h1 {
  background: linear-gradient(to top, rgb(1, 28, 35), rgba(12, 183, 71, 1));
  color: #fff;
  padding: 20px; /* Add vertical padding */
  text-align: center; /* Center align text */
  border-radius: 20px 20px 0 0; /* Rounded top corners */
  margin-top: 0; /* Remove default margin */
}

/* Input Field Styles */
#guessField {
  width: calc(100% - 20px); /* Full width with padding */
  height: 50px;
  font-size: 18px; /* Adjust font size */
  border: none;
  border-radius: 25px;
  padding: 0 20px; /* Add horizontal padding */
  margin-top: 30px; /* Increase top margin */
  outline: none; /* Remove default input focus outline */
  background-color: #f0f0f0; /* Light gray background */
  transition: background-color 0.3s; /* Smooth transition */
}

#guessField:focus {
  background-color: #e0e0e0; /* Darker gray on focus */
}

/* Button Styles */
button, #subt {
  width: 100%; /* Full width */
  height: 50px;
  background: linear-gradient(to top, rgb(9, 39, 18), #0cb647);
  color: #fff;
  font-size: 18px;
  border: none;
  border-radius: 25px;
  margin-top: 30px;
  cursor: pointer;
  transition: background-color 0.3s; /* Smooth transition */
}

button:hover, #subt:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* Result Styles */
.lastResult, .guesses {
  margin-top: 30px; /* Add spacing between results */
  padding: 7px;
  background-color: #0e2628c5; /* Light gray background */
  border-radius: 7px;
  line-height: 35px;
  box-shadow: 1px 2px 10px rgba(31, 253, 11, 0.269); /* Soft shadow effect */
}

/* Additional Styling */
p {
  margin-top: 20px; /* Add space below paragraphs */
  line-height: 1.5; 
  text-align: center; 
}