/* Import Cinzel Decorative font (https://fonts.google.com/specimen/Cinzel+Decorative) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');

/* Import Cinzel font (https://fonts.google.com/specimen/Cinzel) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');

.navbar-moonlight-brand {
    font-family: 'Cinzel Decorative', 'cursive';
    color: #230066;
}

.font-image-overlay-decorative {
    font-family: 'Cinzel Decorative', 'cursive', 'Georgia', 'Times New Roman', 'Times', 'serif';
}

.font-image-overlay {
    font-family: 'Cinzel', 'Georgia', 'Times New Roman', 'Times', 'serif';
}

/* Override accordion button color */
.accordion-button.collapsed:hover::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg)
}

.accordion-button[aria-expanded="true"] {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
    box-shadow: 0 0 0 .25rem rgba(130, 138, 145, .5)
}

/* Override btn-primary color */
.btn-primary {
    color: #fff;
    background-color: #230066;
    border-color: #230066
}

.btn-primary:hover {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
    box-shadow: 0 0 0 .25rem rgba(130, 138, 145, .5)
}

.btn-check:active+.btn-primary,
.btn-check:checked+.btn-primary,
.btn-primary.active,
.btn-primary:active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #565e64;
    border-color: #51585e
}

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(130, 138, 145, .5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #230066;
    border-color: #230066
}

/* Change box shadow on inputs */
.form-control.active,
.form-control:active,
.form-control.focus,
.form-control:focus,
.form-control.active:focus,
.form-control:active:focus {
    box-shadow: 0 0 0 .25rem rgba(130, 138, 145, .5)
}

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    /*height: 11vw;*/
    width: 100%;
    object-fit: contain;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .card-img-top {
        height: 19vw;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .card-img-top {
        height: 16vw;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
}