/* I guess this will be bootstrap? */
header {
  max-width: 99% !important;
}
label {
  font-size: 1.5em;
  font-weight: 900;
}
nav {
  background: rgb(72, 95, 202);
  background: -moz-linear-gradient(
    90deg,
    rgba(72, 95, 202, 1) 0%,
    rgba(9, 9, 121, 1) 35%,
    rgba(7, 2, 89, 1) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    rgba(72, 95, 202, 1) 0%,
    rgba(9, 9, 121, 1) 35%,
    rgba(7, 2, 89, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(72, 95, 202, 1) 0%,
    rgba(9, 9, 121, 1) 35%,
    rgba(7, 2, 89, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#485fca",endColorstr="#070259",GradientType=1);
}

section {
  max-width: 95% !important;
}
h4 {
  font-size: 1.5em;
  font-weight: 900;
}

.custom-btn-primary {
  background-color: #667ad3;
  border-color: #667ad3;
}
.custom-btn-primary:hover {
  background-color: #485fca;
  border-color: #485fca;
}
.custom-btn-secondary {
  background-color: #969696;
  border-color: #969696;
  color: black;
}
.custom-bg-dark {
  background-color: #040133 !important;
}

.custom-navbar-brand {
  font-weight: 900;
  font-size: 2rem;
}
.custom-city-card {
  font-weight: 900;
  font-size: 1.7rem;
}
.custom-card-header {
  font-weight: 900;
  font-size: 1.2rem;
}

.card-title {
  font-weight: 400;
  font-size: .5rem;
}
/* media queries at 900px .card-deck changes to column and hide btn-secondary */
@media (max-width: 900px) {
  main {
    display: block !important;
  }
  .card-deck {
    display: block !important;
  }
  .btn-secondary {
    display: none !important;
  }
  .custom-navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
  }
}