static/styles.css

/* General styling */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

/* Input and Autocomplete */
#movie-input {
  margin-top: 0.5em;
}

#autocomplete-list {
  z-index: 1000;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#autocomplete-list .list-group-item:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

/* Field Selection Checkboxes */
.form-check-label {
  margin-left: 5px;
}

/* Results */
#results ul {
  margin-top: 1em;
  padding-left: 0;
}

#results li {
  margin: 0.5em 0;
  border-radius: 8px;
}

#results .spinner-border {
  margin: 20px auto;
  display: block;
}

/* Visualizations */
#visualizations {
  margin-top: 2em;
}

#visualizations canvas {
  max-height: 300px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #visualizations .col-md-4 {
    margin-bottom: 1em;
  }
}