.alert {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.dark-mode {
  background: #111828 !important;
}

.dark-mode .small-text {
  background: transparent !important;
}

.dark-mode .navbar[class*="headroom--not-top"] {
  background: #111828 !important;
}

.navbar[class*="headroom--not-top"] {
  padding: 5px;
}

.dark-mode .timeline-info small a:link {
  color: #ffc200;
}

.dark-mode .timeline-info small a:visited {
  color: #ffc200;
}

.dark-mode .text-muted {
  color: #ffc200 !important;
}

.dark-mode .contact-form .submit-btn {
  color: #111828;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dark-mode .card {
  border: 1px solid rgb(255 255 255);
}

.dark-mode .navbar-collapse {
  background: #111828 !important;
}

.dark-mode .navbar-toggler .navbar-toggler-icon {
  background: white;
}

.card {
  border-radius: 0.5rem;
}

.contact-form .form-control {
  border-radius: 0.5rem;
}

.full-screen {
  padding-bottom: 3rem;
}

@media (max-width: 768px) {
  .max-width-mobile {
    max-width: 50px;
  }
}

@media (max-width: 1200px) {
  .max-width-mobile {
    min-width: 50px;
    padding: 0;
  }
}

li {
  color: #5b5b5b;
}

/* Inline "height: 50px !important" from the original markup; React style props cannot express !important. */
.skeleton .square.circle.skeleton-avatar {
  display: inline-table;
  width: 50px;
  height: 50px !important;
}