* {
  margin: 0;
  padding: 0;
  cursor: default;
}
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  vertical-align: center;
  flex-wrap: wrap;
  align-content: center;

  color: #ffffff;
  background-color: #f8f9fa;
  font-family: 'Roboto', sans-serif;
}
img {
  width: auto;
  max-width: 100%;
}
.card {
  background-color: #1e1e1e;
  width: 768px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-header {
  background-color: #007bff;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
}
.card-title {
  font-size: 1.1rem;
  font-weight: 400;
}
.input-group-text {
  background-color: #007bff;
  color: #fff;
}
.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}
.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}
.btn-success, .btn-danger, .btn-info {
  border-radius: 20px;
}
.modal-content {
  border-radius: 15px;
}
.modal-header {
  background-color: #007bff;
  color: #fff;
}
.modal-footer .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}
.modal-footer .btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}
.fade {
  transition: opacity 0.15s linear;
}
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -25%);
}
.modal.show .modal-dialog {
  transform: translate(0, 0);
}
.form-control {
  cursor: auto;
  background-color: #333;
  color: #fff;
  border-color: #444;
}
.btn {
  background-color: #333;
  color: #fff;
  border-color: #444;
}
.img-thumbnail {
  max-height: 320px;
}
.list-group-item {
  font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace;
}
@media (max-width: 769px) {
  .card {
    width: 80%;
  }
}
@media (max-width: 420px) {
  .card {
    width: 95%;
  }
}
@media (prefers-color-scheme: dark) { 
  body {
    color: #d9d9d9; 
    background: #1b1b1b;
  }
  .card {
    background-color: #252d38;
  }
} 

/* Pd695 */
@media (max-width: 1200px) {
  .card {
    width: 90%;
  }
}

@media (max-width: 992px) {
  .card {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .card {
    width: 100%;
    padding: 10px;
  }
}

/* P5c92 */
@media (max-width: 768px) {
  .form-control {
    font-size: 1rem;
  }
  .btn {
    font-size: 1rem;
  }
}