@font-face {
    font-family: "Luna";
    src: url(../fonts/Luna.ttf);
}

@font-face {
    font-family: "StartStory";
    src: url(../fonts/StartStory.otf);
}

body {
    font-family: "StartStory";
}

p.intro::first-letter {
    font-size: 300%;
    line-height: 1;
    margin-right: 0.25rem;
}

header {
    font-family: "Luna";
    border-top: 5px dashed #00cc00;
    background-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 5px 15px 10px rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    padding-top: 5px;
}

header #branding {
    padding-left: 25px;
    font-weight: bold;
    font-size: 1.5rem;
    color: #004400;
}

header a {
    text-decoration: none;
    color: #004400;
}

header .nav-link {
    color: rgb(0, 0, 0);
}

header .nav-link.active {
    font-weight: bold;
    letter-spacing: 0.25rem;
    text-decoration: underline;
}

#page-title {
    padding: 1rem 0 25px 2rem;
}

#page-title h1 {
    font-family: "Luna";
    font-size: 1.75rem;
    letter-spacing: 0.25rem;
}

#page-title h1 span {
    color: #006600;
    text-decoration: underline dotted #00cc00 5px;
}

.subhead {
    font-weight: bold;
    font-size: 2rem;
    background-image: url(../images/subhead-bg.png),
        linear-gradient(#ffffff, #ffffff, #ccffcc, #66ff66);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
    color: #006600;
    padding: 10px 20px 5px 10px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}

.coverPhoto,
.carousel-item img {
    border: 2px solid #66cc66;
    border-radius: 10px;
}

.carousel-inner {
    height: 0;
    padding-bottom: 25%; /* this sets carousel aspect ratio (4:1 here) */
}

.carousel-item {
    position: absolute !important; /* Bootstrap is insistent */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.carousel-item img {
    height: 100%; /* Bootstrap handles width already */
    object-fit: cover; /* or 'contain' if you want stretch instead of crop */
}
    
footer {
    background-image: url(../images/footer-bg.png);
    background-color: #99ff99;
    background-repeat: repeat-x;
    background-position-y: top;
    padding-top: 80px;
    padding-bottom: 20px;
}

.card {
    border: none;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 15px 0px,
        rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.card-header {
    background-color: #e0ffe0;
    color: rgb(0, 0, 0);
    box-shadow: 0 -2px 10px 5px rgba(183, 254, 183, 0.3) inset,
        rgba(0, 0, 0, 0.06) 0px -1px 0px 1px inset;
}

.btn-primary {
    background-color: #66cc66;
    border-color: #66cc66;
}

.btn-primary:disabled {
    background-color: #99de99;
    border-color: #55bb55;
}

.table-transparent {
    --bs-table-bg: transparent !important;
}

hr.separator {
    height: 32px;
    border: 0px;
    opacity: 100%;
    background-image: url(../images/separator.png);
    background-repeat: no-repeat;
    background-position: center center;
}