:root {
  /* Base Colors */
  --bg-color: #121212;
  --text-color: #FFFFFF;

  /* Accent Colors (subtle, less contrast) */
  --accent-color: #657bad;
  --accent-hover-color: #4d5e8f;

  /* Boxes & Inputs */
  --box-bg-color: #1F1F1F;
  --box-shadow-color: rgba(0, 0, 0, 0.6);
  --input-bg-color: #2A2A2A;

  /* Brand Name Gradient */
  --brand-gradient-start: #657bad;
  --brand-gradient-end: #a3b1c9;

  --glow-color: rgba(101, 123, 173, 0.3);
}

/* Global Styles */
body {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--box-bg-color);
}
.navbar-brand a {
  background: linear-gradient(to right, var(--brand-gradient-start), var(--brand-gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}
.navbar-links a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  margin-left: 1rem;
}

/* Content Wrapper */
.content {
  padding: 2rem;
}

/* Home Page Form Container */
.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

/* Form Styling */
#shorten-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 500px;
}
#url-input {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 50px;
  margin-bottom: 1rem;
  font-size: 1rem;
  background-color: var(--input-bg-color);
  color: var(--text-color);
  box-shadow: 0 2px 5px var(--box-shadow-color);

  /* Subtle glowing animation */
  animation: glow 3s infinite ease-in-out;
  box-shadow: 0 0 6px var(--glow-color);
}
#shorten-form button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 50px;
  background-color: var(--accent-color);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#shorten-form button:hover {
  background-color: var(--accent-hover-color);
}

/* Loading Indicator */
#loading {
  margin-top: 2rem;
  font-size: 1.1rem;
  color: var(--text-color);
}

/* Short URL Result Box */
#result-box {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 50px;
  background-color: var(--box-bg-color);
  box-shadow: 0 2px 5px var(--box-shadow-color);
  width: 100%;
  max-width: 500px;
}
#result-box input {
  border: none;
  background: transparent;
  font-size: 1rem;
  flex-grow: 1;
  padding: 0 1rem;
  color: var(--text-color);
}
#copy-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 50px;
  background-color: var(--accent-color);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#copy-button:hover {
  background-color: var(--accent-hover-color);
}
#copy-button:focus {
  outline: none;
}
.hidden {
  display: none;
}
#short-url {
  user-select: none;  /* Disables highlighting the text on click/drag */
  cursor: default;    /* Makes it clear the text is not editable */
}

/* Terms & Conditions Page */
.terms-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}
.terms-box {
  background-color: var(--box-bg-color);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px var(--box-shadow-color);
  max-width: 600px;
  text-align: left;
  color: var(--text-color);
}