/* Styling for the entire page */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #000000; /* Set entire background to black */
  color: white; /* White text for readability */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the content horizontally */
  justify-content: flex-start; /* Align content to the top */
  height: 100vh;
}

/* Header styling */
header {
  background-color: #000000; /* Header background set to black */
  color: white;
  padding: 20px;
  text-align: center;
}

header .logo {
  width: 100px; /* Adjust this value based on your logo size */
  height: auto;
  margin-bottom: 15px; /* Space between logo and title */
}

/* Styling for the logo title with color animation */
h1 {
  font-size: 36px;
  font-weight: 600;
  color: rgb(52, 152, 219); /* Initial blue color */
  animation: colorChange 5s infinite; /* Continuous color change */
  transition: color 1s ease-in-out; /* Smooth transition between colors */
}

@keyframes colorChange {
  0% {
    color: rgb(255, 99, 71); /* Tomato red */
  }
  25% {
    color: rgb(52, 152, 219); /* Blue */
  }
  50% {
    color: rgb(46, 204, 113); /* Green */
  }
  75% {
    color: rgb(155, 89, 182); /* Purple */
  }
  100% {
    color: rgb(255, 99, 71); /* Tomato red */
  }
}

/* Main content area */
main {
  width: 100%;
  max-width: 800px; /* Limit the max width to keep it neat */
  text-align: center; /* Center text */
  padding: 20px;
  margin-top: 30px;
}

/* Input container styling */
.input-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
  align-items: center;
}

/* Styling for API Key and CX fields */
#api-key, #cx {
  width: 90%; /* Make the input fields responsive */
  max-width: 350px; /* Max width for input fields */
  padding: 15px;
  font-size: 1.1rem;
  border: 2px solid #34495e; /* Dark border */
  border-radius: 10px; /* Rounded corners */
  background-color: #000000; /* Black background */
  color: #2ecc71; /* Green text */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: all 0.3s ease;
}

/* Focus effect for inputs */
#api-key:focus, #cx:focus {
  border-color: #3498db; /* Blue border on focus */
  background-color: #ecf0f1; /* Light background on focus */
  outline: none;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); /* Stronger shadow on focus */
}

/* Search container styling */
.search-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

/* Styling for search field */
#search-query {
  width: 70%; /* Make search bar responsive */
  max-width: 300px;
  padding: 10px;
  font-size: 1rem;
  border: 2px solid #34495e;
  border-radius: 10px;
  background-color: #000000; /* Black background */
  color: #2ecc71; /* Green text */
  margin-right: 10px;
  transition: all 0.3s ease;
}

/* Focus effect for search input */
#search-query:focus {
  border-color: #3498db; /* Blue border on focus */
  background-color: #ecf0f1; /* Light background on focus */
  outline: none;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); /* Stronger shadow on focus */
}

/* Styling for search button */
.search-btn {
  padding: 12px 20px;
  font-size: 1rem;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect for search button */
.search-btn:hover {
  background-color: #2980b9;
}

.search-btn:active {
  background-color: #1f6f8b;
}

/* Styling for the results section */
.results-container {
  margin-top: 20px;
  width: 100%;
}

.results-container a {
  font-size: 1rem;
  color: #3498db; /* Blue font for results */
  text-decoration: none;
  display: block;
  margin: 10px 0;
}

.results-container a:hover {
  text-decoration: underline;
}

/* Loading spinner styling */
.loading-spinner {
  display: none;
  text-align: center;
  font-size: 1.5rem;
}

#copy-button-container {
  margin-top: 20px;
}

/* Copy All Links button styling */
.copy-btn {
  padding: 10px 20px;
  background-color: #87cefa; /* Sky blue for Copy button */
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.copy-btn:hover {
  background-color: #00bfff;
}

.copy-btn:active {
  background-color: #1f8c4b;
}

/* Footer text styling */
footer p {
  text-align: center;
  padding: 15px;
  background-color: #000000;
  color: white;
  margin-top: 30px;
  font-size: 1.2rem;
}

/* Animation for only "GOKU'S SEARCH ENGINE." part */
#footer-animated-text {
  font-size: 1.2rem;
  animation: footerColorChange 5s infinite;
}

/* Keyframes for the footer text RGB color change */
@keyframes footerColorChange {
  0% {
    color: rgb(255, 99, 71); /* Tomato red */
  }
  25% {
    color: rgb(52, 152, 219); /* Blue */
  }
  50% {
    color: rgb(46, 204, 113); /* Green */
  }
  75% {
    color: rgb(155, 89, 182); /* Purple */
  }
  100% {
    color: rgb(255, 99, 71); /* Tomato red */
  }
}

/* Silent notification styling */
.silent-notification {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 10px;
  margin-top: 10px;
  font-size: 14px;
  border-radius: 5px;
}