/*
 * Globals
 */

:root {
  --light-blue: #acf2ff;
  --yellow: #d8c442;
  --gray: #737373;
  --dark-gray: #585a63;
  --maroon: #805765;
  --blue: #02b3cf;
  --lighter-blue: #eefdff;
  --bright-blue: #6ef4ff;
  --dark-blue: #3E4C78;
}

.bg-yellow { background-color: var(--yellow); }
.bg-maroon { background-color: var(--maroon); }
.bg-gray { background-color: var(--gray); }
.bg-dark-gray { background-color: var(--dark-gray); }
.bg-bright-blue { background-color: var(--bright-blue); }
.bg-dark-blue { background-color: var(--dark-blue) !important; }

.color-blue { color:var(--dark-blue); }

/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}

.amatic-regular {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.amatic-bold {
  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.water-brush-regular {
  font-family: "Water Brush", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem !important;
  color: #3F4D79;
}

.josefin-sans-<uniquifier> {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.charm {
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 5px;
  font-size: 40px;
}

.source-serif-4-400 {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.brush-border-yellow { 
  background: var(--yellow) url(brush-border.svg) no-repeat left;
}
/*
 * Base structure
 */

body {
  color: #fff;
  font-family: "Amatic SC", sans-serif;
}

.announcements {
  color: #3E4C78;
  background-color: var(--light-blue);
}
.announcements a { color: #3E4C78; }

.submit-a-dream { text-shadow: 4px 2px 10px rgba(61,76,120); }

/*
 * Header
 */

.logo { width:180px; }

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

.nav-link { color: #fff !important; }

.text-xl { font-size: 2rem; }
.text-lg { font-size: 1.85rem; }
.text-italic { font-style: italic; }

h1,h2,h3 { font-family: "Source Serif 4", serif; }

a:hover { cursor: pointer; }

.bio a {
  text-underline-offset: 4px;
  text-decoration: underline 1px;
  color:#fff;
}

.bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    .b-example-divider {
      width: 100%;
      height: 3rem;
      background-color: rgba(0, 0, 0, .1);
      border: solid rgba(0, 0, 0, .15);
      border-width: 1px 0;
      box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }

    .b-example-vr {
      flex-shrink: 0;
      width: 1.5rem;
      height: 100vh;
    }

    .bi {
      vertical-align: -.125em;
      fill: currentColor;
    }

    .nav-scroller {
      position: relative;
      z-index: 2;
      height: 2.75rem;
      overflow-y: hidden;
    }

    .nav-scroller .nav {
      display: flex;
      flex-wrap: nowrap;
      padding-bottom: 1rem;
      margin-top: -1px;
      overflow-x: auto;
      text-align: center;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .btn-bd-primary {
      --bd-violet-bg: #712cf9;
      --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

      --bs-btn-font-weight: 600;
      --bs-btn-color: var(--bs-white);
      --bs-btn-bg: var(--bd-violet-bg);
      --bs-btn-border-color: var(--bd-violet-bg);
      --bs-btn-hover-color: var(--bs-white);
      --bs-btn-hover-bg: #6528e0;
      --bs-btn-hover-border-color: #6528e0;
      --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
      --bs-btn-active-color: var(--bs-btn-hover-color);
      --bs-btn-active-bg: #5a23c8;
      --bs-btn-active-border-color: #5a23c8;
    }

    .bd-mode-toggle {
      z-index: 1500;
    }

    .bd-mode-toggle .dropdown-menu .active .bi {
      display: block !important;
    }

    .text-shadow { text-shadow: 0px 1px 12px rgba(243,151,182,0.8); }
    .border-end { border-color: #dac7da !important; }
    footer .nav-link { 
      padding-top: 0; 
      padding-bottom: 0;
    }

.modal-title { font-size:2rem; }
.modal-content,
.modal-content a { 
  color: var(--dark-blue);
  font-size: 1.5rem;
  text-shadow: none; 
  background-color: #fcfaff;
}

.btn-default,
.btn-primary,
.btn-primary:hover {
  color: var(--dark-blue);
  background-color: #acf2ff;
  border: none;
  margin: 12px auto;
  text-shadow: none;
  font-weight: 700;
  font-size: 1.5rem;
}

.btn-primary:hover { text-decoration: underline; }

.form-control {
  text-shadow:none; 
  color: #333;
  font-family: "Source Serif 4", serif;
}

.btn-link, 
.btn-link:hover,
.btn-link:active,
.btn-link:visited { color: rgba(254,241,255,.9); text-decoration: none; }

.btn-link:hover { text-decoration: underline; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .submit-a-dream { height:72vh; }
  h1,.h1 { font-size: calc(2rem + 1.5vw); }
}

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

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

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

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