/* Document Color Variables */
:root {
    --primary-blue: #92A2A6;
    --good-surf-t: #F6CEC6;
    --secondary-blue: #6777B6;
    --pea-flower-t: #C3D6FF;
    --grey: #2B2B23;
    --night-forest-t: #D8C7D7;
    --light-grey: #D3C2CD;
    --lilac-grey-t: #2C5140;
    --yellow: #EFCE7B;
    --butter-yellow-t: #CB7836;
    --light-pink: #F8CABA;
    --brink-o-pink-t: #6972B7;
    --dark-pink: #D17089;
    --dusty-berry-t: #FBC690;
    --green: #849E15;
    --spring-leaves: #F6D07D;
    --light-green: #CBD183;
    --pistachio-t: #542923;
    --orange: #e1903E;
    --florida-oranges-t:#F5C191;
    --dark-orange: #D8560E;
    --poppy-t: #DFC475;
    --mustard: #B28622;
    --gold-velvet-t:#FbC8A0;

}

/* Typography */
.primary {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: normal;
}

.primary-italic {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-style: italic;
}

.canon {
  font-family: "IM Fell French Canon", serif;
  font-weight: 400;
  font-style: normal;
}

.canon-italic {
  font-family: "IM Fell French Canon", serif;
  font-weight: 400;
  font-style: italic;
}

.jacquard {
  font-family: "Jacquard 12 Charted", system-ui;
  font-weight: 400;
  font-style: normal;
}


h1 {
    font-weight: 700;
}

h2 {
    font-weight: 600;
}

h3 {
    font-weight: 500;
}

h1,
h2,
h3 {
    line-height: 1em;
    margin-bottom: 1px;
}

h1,
h2 {
    color: var(--secondary-blue)
}

p {
    font-weight: 300;
    line-height: 1.75em;
}

mark.green {
    background-color: var(--green);
}

mark.yellow {
    background-color: var(--yellow);
}

mark.pink {
    background-color: var(--light-pink);
}

/* Header */
.header-container {
    background-color: white;
    overflow: visible !important;
}

.nav-link {
    font-weight: 700;
    color: var(--primary-blue);
}

.nav-link:hover {
    color: var(--secondary-blue);
}

.nav-link:active {
    color: var(--secondary-blue);
}

.active {
    color: var(--secondary-blue);
    /* border-radius: 25px;
    border: 1px solid var(--secondary-blue); */
}

.logo {
    font-size: 28px;
}

/* Adding Background Colors */
.bg-body-primary {
    background-color: var(--primary-blue);
}

.bg-body-primary * {
    color: var(--good-surf-t);
}

.bg-body-primary li {
    color: var(--good-surf-t);
}

.bg-body-primary li * {
    color: black;
}

.bg-body-secondary {
    background-color: var(--secondary-blue) !important;
}

.bg-body-secondary * {
    color: black;
}

.bg-body-tertiary {
    background-color: rgba(235, 235, 235, 1) !important;
}

.bg-body-red {
    background-color: var(--light-red) !important;
}

.bg-body-red * {
    color: black;
}

.bg-body-green {
    background-color: var(--light-green) !important;
}

.bg-body-green * {
    color: black;
}

.bg-body-yellow {
    background-color: var(--light-yellow) !important;
}

.bg-body-yellow * {
    color: black;
}


/* Styling Buttons */
.btn {
    font-weight: 600;
}

.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-outline-primary:hover,
.btn-primary:hover {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
    color: white;
}

.btn-outline-primary {
    background-color: white;
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-secondary {
    background-color: var(--secondary-blue);
    color: black;
    border-color: var(--secondary-blue);
}

.btn-secondary:hover {
    background-color: white;
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-success {
    background-color: var(--light-green);
    color: black;
    border-color: var(--light-green);
}

.btn-success:hover {
    background-color: white;
    color: var(--green);
    border-color: var(--green);
}

.btn-danger {
    background-color: var(--light-red);
    color: black;
    border-color: var(--light-red);
}

.btn-danger:hover {
    background-color: white;
    color: var(--red);
    border-color: var(--red);
}

.btn-warning {
    background-color: var(--light-yellow);
    color: black;
    border-color: var(--light-yellow);
}

.btn-warning:hover {
    background-color: white;
    color: var(--yellow);
    border-color: var(--yellow);
}

.btn-camo {
    background: none;
    border: none;
    cursor: pointer;
    display: inline;
    font: inherit;
    margin: 0;
    padding: .25rem 1rem;
    text-decoration: none;
}

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

.form-camo {
    margin-bottom: 0;
}