/* styles.css */

body {
    background-color: #1f1f2e;
    color: #ffffff;
}

.card {
    background-color: #282a36;
}

.card-header {
    background-color: #44475a;
}

.btn-primary {
    background-color: #bd93f9;
    border-color: #bd93f9;
      margin-top: 10px;
}

.btn-primary:hover {
    background-color: #ca9eff;
    border-color: #ca9eff;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(189, 147, 249, 0.5);
}

.btn-primary:active {
    background-color: #ca9eff;
    border-color: #ca9eff;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #ca9eff;
    border-color: #ca9eff;
      margin-left: 10px;
  margin-top: 10px;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.25rem rgba(189, 147, 249, 0.5);
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

hr {
    border-top: 2px solid #44475a;
}

a {
    color: #bd93f9;
}

a:hover {
    color: #ca9eff;
}

.converted-image-container {
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Horizontally center content */
  align-items: center; /* Vertically center content */
  margin-top: 2rem; /* Add some space below the upload button */
}

.converted-image-container img {
  max-width: 100%; /* Allow image to adapt to container width */
}