body {
  background: #262930;
}

#outerdiv {
  width: 100dvw;
  height: 100dvh;
}

@media (min-width: 1400px) {
  #brandImg {
    width: 30%;
  }
}

.card {
  width: 95%;
  margin: auto;
  border: 2px dashed #007bff;
  box-shadow: 0 0 2em 0.3em #007bff;
  border-radius: 1em;
}

@media (min-width: 768px) {
  .card {
    width: 75%;
    margin: auto;
  }
}

@media (min-width: 992px) {
  .card {
    width: 65%;
    margin: auto;
  }
}

@media (min-width: 1200px) {
  .card {
    width: 60%;
    margin: auto;
  }
}

@media (min-width: 1400px) {
  .card {
    width: 55%;
    margin: auto;
  }
}

.card-title {
  color: #007bff;
}

input {
  border: var(--bs-border-width) var(--bs-border-style) #007bff !important;
}

.btn {
  background: #00e1ff;
  color: #f4f6f8;
}

.btn:hover {
  background: #f4f6f8;
  color: #00e1ff;
  box-shadow: 0 0 2em -0.5em #007bff;
}

#outerdiv .card-header {
  background: #262930;
  border-radius: 1em 1em 0 0 !important;
  padding: 0;
}