@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--bs-gray-900);
    color: var(--bs-white);
  }
}

@media (prefers-color-scheme: dark) {
  .navbar-brand {
    color: white!important;
  }
}

@media (prefers-color-scheme: dark) {
  #input {
    background: var(--bs-gray-dark);
    border: 3px solid var(--bs-gray-700)!important;
    color: white;
  }
}

.navbar-brand {
  font-size: 16px;
}

.navbar-brand {
  font-size: 14px;
}

#input {
  width: 95%;
  height: 50vh;
  border-radius: 15px;
  border: 3px solid var(--bs-gray-500);
  padding: 15px;
  margin-bottom: 15px;
}

div {
  border-color: var(--bs-gray-dark);
}

h1 {
  margin-bottom: 15px;
}

h2 {
  margin-bottom: 15px;
}

.progress {
  margin-bottom: 25px;
}

#returnCode {
  color: var(--bs-teal);
}

#btnGp {
  margin-bottom: 15px;
}

.navbar {
  min-height: 5vh;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

section {
  min-height: 90vh;
}

.btn {
  border-style: none;
}

#reqToken {
  background: var(--bs-indigo);
  border-style: none;
}

#modalContent {
  border-radius: 25px;
  background-color: transparent;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  background-color: #ffffff;
  border: none;
}

@media (prefers-color-scheme: dark) {
  #modalContent {
    background-color: #000;
  }
}

@media (prefers-color-scheme: dark) {
  #agreeBtn {
    background-color: var(--bs-gray-dark);
    color: white;
  }
}

.modal-header {
  border-style: none;
}

.modal-footer {
  border-style: none;
}