@font-face {
    font-family: 'Benighted';
    src: url(802d3b63cae706a58a87.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #121212;
    /* Dark background */
    color: #ffffff;
    /* Light text */
}

/* For Webkit browsers like Chrome and Safari */
::-webkit-scrollbar {
    width: 12px;
    /* Vertical scrollbars */
    height: 12px;
    /* Horizontal scrollbars */
}

::-webkit-scrollbar-track {
    background: black;
}

::-webkit-scrollbar-thumb {
    background: rgb(4, 43, 0);
}

/* For Firefox */
* {
    scrollbar-color: rgb(4, 43, 0) black;
}

/* For IE and Edge */
* {
    scrollbar-color: rgb(4, 43, 0) black;
}

/* For Opera */
* {
    scrollbar-color: rgb(4, 43, 0) black;
}

/* For Safari and Chrome */
* {
    scrollbar-color: rgb(4, 43, 0) black;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.tag {
    cursor: pointer;
    display: inline-block;
    padding: 6px 12px;
    margin: 2px 4px;
    background-color: #333333;
    /* Darker tag background */
    border: 1px solid #ffffff;
    /* White border */
    border-radius: 4px;
    font-size: 12px;
    color: #ffffff;
    /* White text */
}

.tag.selected {
    background-color: #ffffff;
    /* White background */
    border: 1px solid #333333;
    /* Darker border */
    color: #333333;
    /* Dark text */
}

.page-title {
    font-family: 'Benighted', sans-serif;
    color: rgb(184, 0, 0);
    /* Red text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* Horizontal shadow, vertical shadow, blur, color */
}

#main-layout {
    display: flex;
    background-image: url(3ab6463bf7c417e29aea.png);
    background-color: #121212;
    /* Dark background */
}

.minor-description {
    color: #ffffff;
    margin: 10px;
    border-style: double;
    /* White text */
}

.scrollable {
    overflow-y: auto;
    height: 100vh;
}

#sidebar {
    width: 480px;
    background-color: rgba(0, 0, 0, 0.6);
    /* Dark sidebar with 60% opacity */
}

#main-content {
    flex-grow: 1;
    background-color: rgba(0, 0, 0, 0.6);
    /* Dark main content with 60% opacity */
}

.grayed-out {
    opacity: 0.3;
    background-color: #666666;
    /* Dark gray background */
}

.selected-item-card {
    background-color: rgb(129, 0, 0);
    /* Black background with 100% opacity */
    margin: 10px;
}

.selected-item-card strong {
    color: #ffffff;
    /* White text */
}

.card-aspects {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(2736be99d6c73653fafc.png);
    background-color: rgba(0, 0, 0, 0.8);
    /* Dark card background with 80% opacity */
    color: #ffffff;
    /* White text */
    border: 1px solid #ffffff;
    /* White border */
    border-radius: 4px;
    /* Rounded corners */
    margin: 10px;
    /* Add some padding */
    padding: 10px;
}

.card-aspects h4 {
    display: inline;
}

.card-aspects i {
    float: right;
}

.card-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(2736be99d6c73653fafc.png);
    background-blend-mode: multiply;
    font-family: 'Benighted', sans-serif;
    font-size: 36px;
    color: rgb(184, 0, 0);
    /* Red text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* Horizontal shadow, vertical shadow, blur, color */
}

.card-footer {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(2736be99d6c73653fafc.png);
    background-blend-mode: multiply;
    font-family: sans-serif;
    font-size: 16px;
    color: rgb(184, 0, 0);
    /* Red text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* Horizontal shadow, vertical shadow, blur, color */
}

.card-footer a {
    color: rgb(255, 255, 255);
    /* Red text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* Horizontal shadow, vertical shadow, blur, color */
}

.row.d-flex.flex-row.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.col-4 {
    display: flex;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    /* Dark card background with 80% opacity */
}

.card-body {
    flex-grow: 1;
    background-color: rgba(0, 0, 0, 0.8);
    background-image: linear-gradient(rgba(0, 0, 0, 1.0), rgba(0, 0, 0, 0.5)), url(9d5fb88133085ac07866.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* Round the corers of the card body */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.icon-button {
    background: none;
    border: none;
    cursor: pointer;
}

.list-group {
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: aliceblue !important;
    /* Dark list item background with 80% opacity */
}

.list-group-item {
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: aliceblue !important;
    /* Dark list item background with 80% opacity */
}

.accordion-button {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-size: 36px;
    /* Red text */
    text-shadow: 2px 2px 4px rgba(23, 160, 214, 0.7);
    /* Horizontal shadow, vertical shadow, blur, color */
}

.accordion-item {
    background-color: #333333;
    /* Dark background */
    color: #ffffff;
    /* Light text */
    border: 1px solid #444444;
    /* Slightly darker border */
}

.accordion-item:not(.collapsed) {
    background-color: #555555;
    /* Even darker when expanded */
    color: #ffffff;
    /* Light text */
}

/* Accordion Content */
.accordion-body {
    background-color: #222222;
    /* Dark background */
    color: #ffffff;
    /* Light text */
}

#search-bar .container {
    background-color: #333333;
    /* Dark background */
    color: #ffffff;
    /* Light text */
    border: 1px solid #444444;
    /* Slightly darker border */
}

#search-input {
    background-color: #333333;
    color: #ffffff;
    border: 1px solid #444444;
}

.hidden {
    display: none;
}

.popup {
    background-color: rgba(0, 0, 0, 0.8);
    /* Same opacity and background color as your #main-content and .card */
}

.close-button,
#copy-button {
    background-color: rgba(129, 0, 0, 1);
    /* Similar to your .selected-item-card */
    color: #ffffff;
    /* White text */
    border: none;
    padding: 10px;
    cursor: pointer;
}

.close-button:hover,
#copy-button:hover {
    background-color: rgb(184, 0, 0);
    /* Similar to your .page-title */
}

.custom-modal-content {
    background-color: rgba(0, 0, 0, 0.8);
    /* Dark background with 80% opacity */
    border: 1px solid #ffffff;
    /* White border */
    color: #ffffff;
    /* Light text */
}

.custom-modal-header {
    background-color: rgba(0, 0, 0, 0.6);
    /* Darker header background */
    border-bottom: 1px solid #444444;
    /* Slightly darker border */
}

.custom-modal-body {
    background-color: rgba(0, 0, 0, 0.8) !important;
    /* Dark background with 80% opacity */
    display: flex;
    /* Flexbox layout */
    align-items: stretch;
    /* Stretch to full height */
}


.custom-textarea {
    width: 100%;
    /* Full-width */
    height: 100%;
    /* Full-height */
    background-color: #333333;
    /* Dark background */
    color: #ffffff;
    /* Light text */
    border: 1px solid #444444;
    /* Slightly darker border */
}


.custom-modal-footer {
    background-color: rgba(0, 0, 0, 0.6);
    /* Darker footer background */
    border-top: 1px solid #444444;
    /* Slightly darker border */
}

.custom-close-button {
    color: #ffffff !important;
    /* Light text */
}

.custom-copy-button {
    background-color: rgb(4, 43, 0);
    /* Copy button background */
    color: #ffffff;
    /* Light text */
}