/* Master CSS for Greater Oregon Camps
Author: Mike Cooke */

html {
  font-size: .9rem;
}

@media (min-width: 328px) {
  html {
    font-size: 1rem;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  background: #6B6CB4;
  color: #007398;
  overflow: visible;
  min-width: 300px;
}

/* Font weights: 300-light, 400-regular, 600-semi-bold,
700-bold, 800-extra-bold */

h1, .h1 {
  font-weight: 800;
  font-size: 36px;
  text-shadow: 3px 3px 3px #111;
}

h2, .h2 {
  font-weight: 800;
  font-size: 28px;
  text-shadow: 3px 3px 3px #111;
}

h3, .h3 {
  font-weight: 700;
  font-size: 24px;
  text-shadow: 3px 3px 3px #111;
  color: #DD5519;
}

/* Footer */
h4, .h4 {
  font-weight: 600;
  font-size: 15px;
  text-shadow: 1px 1px 2px #111;
  color: #FFE36D;
}

h5, .h5 {
  font-weight: 700;
  font-size: 15px;
  color: #DD5519;
}

h6, .h6 {
  font-weight: 600;
  font-size: 15px;
  font-style: italic;
}

p {
  font-weight: 400;
}

a {
  text-decoration: none;
}

q, blockquote {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.gold {color: #FFE36D;}
.green {color: #DBE23C;}
.orange {color: #FF773B;}
.blue {color: #02A6CB;}
.purple {color: #6B6CB4;}

.bg-gold {background-color: #FFE36D;}
.bg-green {background-color: #DBE23C;}
.bg-orange {background-color: #FF773B;}
.bg-blue {background-color: #02A6CB;}
.bg-purple {background-color: #6B6CB4;}

.nav-wrapper {
  background-color: #DBE23C;
}

.nav-border{
  height: 5px;
  background-color: #FF773B;
  box-shadow: 0px 4px 5px #111;
}

.nav-link {
  color: #494A92;
  font-weight: 600;
}

.nav-link:hover {
  color: #6B6CB4;
}

.bg-image {
  background-image: url('riverfront.jpg');
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;">
}

.flower-h2 {
  height: 28px;
  filter: drop-shadow(3px 3px 3px #111);
}

.btn {
  color: white;
  transition-duration: 0.2s;
  border-radius: 2rem;
  padding: .5rem 1rem;
  min-width: 10rem;
  filter: drop-shadow(3px 3px 3px #111);
}

.btn:hover {
  color: black;
  background-color: #FFE36D;
}

.mystery {
  filter: drop-shadow(0px 0px 30px #005890);
}