:root {
  --red: #b24d3d;
  --blue: #367ec1;
  --orange: #f5831f;
  --dark: #333333;
  --light: #f1f1f1;
  --dark-blue: #2c3e50;
}

#mainNav .navbar-brand {
  color: var(--red);
  font-weight: 900;
  font-size: 2rem;
  border-bottom: solid 10px #f5831f;
  border-top: solid 10px var(--blue);
}
#mainNav .navbar-nav li.nav-item a.nav-link {
  color: var(--dark);
}
.orange {
  color: #f5831f;
}
.blue {
  color: #367ec1;
}
.bg-white {
  background-color: white;
}
.bg-blue {
  background-color: var(--blue);
}
.navbar {
  border-bottom: solid 3px var(--light);
}
.masthead {
  background-color: white;
}
h1 {
  color: var(--dark);
}
.push-down {
  margin-top: 10%;
}
.large-text {
  font-size: 4.5rem;
  color: var(--blue);
}
.dark-background {
  background-color: var(--dark-blue);
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .large-text {
    font-size: 3rem;
  }
  .push-down {
    margin-top: 35%;
  }
  #mainNav .navbar-brand {
    font-size: 1.5rem;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  ...;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  ...;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  ...;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  ...;
}