/* variables */

:root {

    --prime1: #13a47b;
    --prime2: #108665;
    --prime3: #136b52;
    --lightgreen: #E1F1D015;

    --light: #f5f5f5;
    --fadelight03: rgba(255, 255, 255, 0.3);
    --fadelight05: rgba(255, 255, 255, 0.5);
    --fadelight07: rgba(255, 255, 255, 0.7);

    --fadeblack03: rgba(0, 0, 0, 0.3);
    --fadeblack05: rgba(0, 0, 0, 0.5);
    --fadeblack07: rgba(0, 0, 0, 0.7);

    --orange: #e1ad12;

}

body {
    padding: 0;
    margin: 0;
    position: relative;
}

/**/

.heading {
    font-family: 'Sen', sans-serif;
    font-weight: bolder;
}

.col-p1 {
    color: var(--prime1);
}

.col-p2 {
    color: var(--prime2);
}

.col-p3 {
    color: var(--prime3);
}

.col-light {
    color: var(--light);
}

.col-orng {
    color: var(--orange);
}

a.col-light:hover,
a.col-light:active,
a.col-light:focus {
    color: var(--orange);
}

.bg-g1 {
    background-color: var(--prime1);
}

.bg-g2 {
    background-color: var(--prime2);
}

.bg-g3 {
    background-color: var(--prime3);
}

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

.bg-dark {
    background: #333;
}

.bg-lightgreen {
    background-color: var(--lightgreen);
}

.bg-fb,
.bg-fb-hov {
    background-color: var(--fadeblack05);
}

.bg-fb3 {
    background-color: var(--fadeblack03);
}

.bg-fb-hov:hover,
.bg-fb-hov:active {
    background-color: var(--light);
    border-color: var(--orange);
}

.bg-fb-hov:hover a,
.bg-fb-hov:active a {
    color: var(--prime3);
}

/* borders */

.bdb {
    border-bottom: 4px solid var(--prime1);
}

.bdl {
    border-left: 4px solid var(--prime1);
}

.bdr {
    border-right: 4px solid var(--prime1);
}

.bdt {
    border-top: 4px solid var(--prime1);
}

.bd {
    border: 4px solid var(--prime1);
}

/* box shadows */

.bxs1 {
    box-shadow: 0 0 3px var(--fadeblack03);
}

.bxs2 {
    box-shadow: 0 0 6px var(--fadeblack03);
}

.bxs3 {
    box-shadow: 0 0 9px var(--fadeblack03);
}

/**/

.box {
    height: 250px;
    width: 100%;
    margin: 1rem 0;
    position: relative;
    overflow: hidden;
}

.box .heading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    letter-spacing: -0.8px;
}

.box--img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.box--img-img {
    object-fit: cover;
    filter: blur(5px) brightness(0.7);
    transform: scale(1.05);
    transition: filter 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.box:hover .heading,
.box:active .heading {
    opacity: 0;
    color: var(--light);
}

.box:hover .box--img-img,
.box:active .box--img-img {
    filter: blur(0px) brightness(1);
    transform: scale(1);
}

/* list stuff */

#refList {
    width: calc(100% - 2em);
    border-width: 0.25ch;
    color: var(--prime2);
    background: transparent;
}

#refList:focus {
    border-color: var(--prime3);
    background: #fff;
}

.list--item {
    position: relative;
    transition: display 0.2s ease-in-out;
}

.page-title {
    position: relative;
}

.page-title--previous-page {
    font-size: 0.9rem;
    position: absolute;
    top: -1rem;
    left: 0;
    background: #333;
    width: max-content;
}

.page-title--title-wrap .heading {
    color: var(--prime3);
}

.list--item--heading h5,
.list--item--heading h6 {
    letter-spacing: -0.8px;
    text-transform: none;
    user-select: all;
}

.list--item--heading h5::selection,
.list--item--heading h6::selection {
    background: var(--orange);
    color: #333;
}

.list--item--links,
.list--item--int-links {
    display: flex;
    flex-direction: row;
}

.list--item--links {
    position: absolute;
    bottom: -1rem;
    right: 0.5rem;
}

.location-wrap {
    background: var(--light);
    color: #444;
    border-width: 0.1ch;
    border-radius: 1em;
}

.link-btn {
    display: flex;
    background: var(--prime3);
    border-color: var(--prime3);
    color: var(--light);
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1rem;
    border-radius: 50%;
    overflow: hidden;
    border-width: 0.25ch;
}

.link-btn:hover,
.link-btn:active {
    background: var(--light);
    color: var(--prime3);
}

.link-btn-alex {
    background: var(--orange);
    border: 1px solid var(--orange);
    color: #333;
}

.link-btn-alex:hover,
.link-btn-alex:active {
    background: var(--light);
    color: var(--prime1);
    border-color: var(--prime1);
}

.link-btn span.fa-step-forward {
    margin-top: -1px;
}

#ff-submit-root {
    border-radius: 0 !important;
    background: var(--prime1);
    border: 0.2ch solid var(--prime1);
    transition:
        background 0.2s ease-in-out,
        border 0.2s ease-in-out,
        color 0.2s ease-in-out;
}

#ff-submit-root:hover,
#ff-submit-root:active {
    background: transparent;
    border-color: var(--prime1);
    color: var(--prime1);
}

#ff-submit-root:focus {
    background: transparent;
    border: 0.2ch solid #333;
    color: #333;
}

.modal-content,
.modal-header {
    border-radius: 0 !important;
}

span.out-of-print_::before,
span.unavailable_::before {
    display: inherit;
    font-style: italic;
    filter: opacity(0.8);
}

span.out-of-print_::before {
    display: inherit;
    content: 'Out of Print.';
    font-style: italic;
    filter: opacity(0.8);
}

span.unavailable_::before {
    display: inherit;
    content: 'Temporarily Unavailable.';
    font-style: italic;
    filter: opacity(0.8);
}

#queryModalBtn {
    background: var(--orange);
    color: #333;
    border-width: 0.2ch;
    border-color: var(--orange);
    border-radius: 0;
    transition: background 0.2s ease-in-out, border 0.2s ease-in-out, color 0.2s ease-in-out;
}

#queryModalBtn:hover,
#queryModalBtn:active {
    background:transparent;
    border-color: #333;
}

#queryModalBtn:focus {
    background: #333;
    border: 0.2ch solid #333;
    color: var(--light);
}

#queryModalBtnFloat {
    display: flex;
    position: fixed;
    background: var(--orange);
    border: 0.2ch solid var(--orange);
    color: #333;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    bottom: 5.5em;
    left: -5rem;
    z-index: 2;
    cursor: pointer;
    transition: 
        left 0.5s ease-in-out,
        background 0.2s ease-in-out,
        color 0.2s ease-in-out,
        border 0.2s ease-in-out;
}

#queryModalBtnFloat:hover,
#queryModalBtnFloat:active {
    background: var(--light);
    border-color: #333;
}

/* queries */

@media screen and (min-width: 992px) {
    #linkList {
        padding: 0;
    }
}