styles.css

body {
  background-color: #000; /* Set the background color of the body to dark black */
  font-family: Arial, sans-serif;
  color: #fff; /* Set font color to white */
}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  max-width: 800px;
  margin: 20px auto; /* Center the container */
  padding: 20px;
  background-color: #000; /* Black background color */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.scrollable-table {
  max-height: 400px; /* Set max height for the results table */
  overflow-y: auto; /* Add vertical scrollbar */
}

h1 {
  text-align: center;
  color: #fff; /* White font color */
}

.message-container {
  background-color: #fff; /* White background */
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.message {
  color: red; /* Red font color */
  text-align: center;
}

.search-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  background-color: #333;
  border: none;
  color: #fff; /* White font color */
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  border: none;
  color: #fff; /* White font color */
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #333;
  color: #fff; /* White font color */
}

td {
  color: #4CAF50; /* Green font color */
}

.loader {
  display: none; /* Initially hide the loader */
  border: 4px solid #f3f3f3; /* Light gray border */
  border-top: 4px solid #3498db; /* Blue border for the spinner */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite; /* Spin animation */
  margin: 0 auto; /* Center the loader */
  margin-top: 20px; /* Spacing from the content */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}