:root{

    --clr-green-900: #344e41;
    --clr-green-600: #3a5a40;
    --clr-green-300: #588157;

    --clr-green-900-op: rgba(51, 79, 65, 0.85);
    --clr-green-600-op: rgba(70, 112, 77, 0.85);
    --clr-green-300-op: rgba(87, 127, 87, 0.85);

    --clr-light: #f3f3f3;
    --clr-blue: #16697a;
    --clr-accent: #c1121f;
    --clr-dark: #151c14;
    --clr-dark-op: rgba(33, 23, 27, 0.8)

}

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

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

.text-accent{
    color: var(--clr-accent);
}

.text-dark{
    color:var(--clr-dark);
}


html,
body{
    height:100vh;
    margin:0;
}

body{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

*,
::before,
::after{
    box-sizing: border-box;
}

main{
    padding: 55px 0 0;
    margin: 0.25rem 0;
}

.hero{
    background-color: #f2f5f3;
    color: var(--clr-dark);
    padding: 1rem;
}

.hero-logo{
    font-size: 3rem;
}

.b-text{
    font-weight: 700;
}

.em-text{
    color: var(--clr-green-900);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.em-text--lower{
    text-transform: lowercase;
}

.modal-backdrop {
    --bs-backdrop-zindex: 6 !important;
}

/* Stylings for pagination */
span#active{
    background-color: var(--clr-green-600) !important;
    border: 1px solid var(--clr-green-600) !important;
    color: var(--clr-light) !important ;
}

.pagination{
    --bs-pagination-color: var(--clr-green-600) !important;
    --bs-pagination-hover-color: var(--clr-green-600) !important;
    --bs-pagination-focus-box-shadow:  -1px -1px 4px var(--clr-green-600),
                                        1px 1px 4px var(--clr-green-600) !important;
}
/*  */

.fav-link{
    text-decoration: none;
    cursor: pointer;
}

.fav-link:hover{
    font-weight: 500;
    text-decoration: underline !important;
}