/* Tool Container Styling for 1-99 Random Number Generator */
h2 {
  text-align: center;
  margin-bottom: 1rem; /* Optional: adds space below the h2 */
}

.random-number-generator-1-99 {
  background-color: #FAF7F0;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 900px; /* Adjust max-width for desktop */
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

/* Container for input and output boxes */
.random-number-generator-container {
  display: flex;
  flex-wrap: wrap; /* Allow elements to wrap in smaller screens */
  justify-content: space-between; /* Ensure inputs and output are spaced out */
  align-items: center; /* Center items vertically */
  gap: 1.5rem; /* Add space between the input and output boxes */
}

/* Input Box Styling */
.random-input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%; /* Give each input box 45% width to fit them horizontally */
}

.random-input-box input {
  width: 100%; /* Fill up the width of the container */
  height: 40px;
  text-align: center;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 8px;
}

/* Output Box Styling */
.random-output-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Match the width of the input box */
}

.random-output-box input {
  width: 100%; /* Fill up the width of the container */
  height: 40px;
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.random-output-box button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.random-output-box button:hover {
  background-color: #45a049;
}

/* Responsive Layout for Mobile and Tablet */
@media (max-width: 600px) {
  .random-number-generator-container {
    flex-direction: column; /* Stack vertically on smaller screens */
    align-items: center; /* Center the input boxes */
  }

  .random-input-box,
  .random-output-box {
    width: 100%; /* Full width for mobile */
  }

  .random-input-box input,
  .random-output-box input {
    width: 90%; /* Make inputs more flexible for mobile */
  }

  .random-output-box button {
    width: 90%; /* Make button flexible on mobile */
  }
}