:root {
    --main-bg-color: #f8f4e4;
    --main-btn-color: #f0ebd7;
}

html {
    font-size: 14px;
}

@font-face {
    font-family: FiraSansMedium;
    src: url(../fonts/FiraSans-Medium.ttf);
}

@font-face {
    font-family: FiraSansItalic;
    src: url(../fonts/FiraSans-LightItalic.ttf);
}

body {
    /* background-image: url("/public/images/vintage-concrete.png"); */
    background: var(--main-bg-color);
    background-repeat: repeat;
    font-family: FiraSansMedium, Arial, Helvetica, sans-serif;
    line-height: 1rem;
}

a {
    text-decoration: none;
    color: #0064b4;
}

p {
    line-height: 1rem;
}

.bg-custom-badge, .bg-custom-badge:focus {
    background-color: var(--main-btn-color);
}

.bg-custom {
    background-color: #0064b4;
}

.text-custom {
    color: #0064b4;
}

.side-nav {
    list-style: none;
    padding: 0;
}

.side-nav li {
    padding: 12px 8px;
    margin: 2px 0;
    text-align: left;
    border-radius: 3px;
    background-color: var(--main-btn-color);
}

.side-nav a {
    color: #000000;
}

.side-nav li:hover {
    background: #dcdee0;
    cursor: pointer;
    border-left: 2px solid #0064b4;
}

/* .side-nav li:hover ::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: " \f56b ";
    margin-right: 4px;
} */

/* width */

::-webkit-scrollbar {
    width: 2px;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #0064b4;
}

.accordion-item:last-of-type .accordion-collapse {
    border-bottom-width: 0px;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.accordion-button:not(.collapsed) {
    color: #000000;
    background-color: #e7f1ff;
}

.accordion-button {
    border: none;
}

.nav-image {
    width: 32px;
    height: 32px;
    background-image: url("../images/quill-ink.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.tag {
    font-family: FiraSansItalic;
    cursor: pointer;
}

.header {
    background-image: url("../images/header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 53%;
    height: 200px;
}

footer {
    background: var(--main-bg-color)
}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: var(--main-btn-color);
}

.cover {
    background-image: url("../images/cover2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    box-shadow: 1px 3px 10px 1px rgb(0 0 0 / 20%);
    box-sizing: border-box;
}

.poemBody p {
    line-height: 1.6rem;
    margin-bottom: 0;
}