.btn.custom-outline-btn {
    color: var(--custom-color); /* Text color */
    border-color: var(--custom-color); /* Border color */
}

.btn.custom-outline-btn:hover {
    color: #fff; /* Text color on hover */
    background-color: var(--custom-color); /* Background color on hover */
    border-color: var(--custom-color); /* Border color on hover */
}

.btn.custom-outline-btn:focus, .btn.custom-outline-btn.focus {
    color: #fff; /* Text color on focus */
    background-color: var(--custom-color); /* Background color on focus */
    border-color: var(--custom-color); /* Border color on focus */
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5); /* Optional: Adjust the shadow color */
}

/* Example Custom Color */
:root {
    --custom-color: #902923; /* Custom color example: blue */
}

.app-body{
    font-family: sans-serif; /* Example: 'Arial', sans-serif; */
    background-color: #D6D5C9;
    color: #0A100D;
}

.app-a {
    color: #A22C29;
    text-decoration: none;
}

.app-a:hover, .app-a:focus {
    color: #902923;
    text-decoration: underline;
}

.app-h1,.app-h2,.app-h3, .app-h4, .app-h5, .app-h6 {
    color: #902923;
}

.app-p {
    color: #0A100D;
    margin-bottom: 1em;
}

.app-button {
    background-color: #A22C29;
    color: #D6D5C9;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

.app-button:hover {
    background-color: #902923;
}


.app-input-field {
    background-color: #D6D5C9;
    color: #0A100D;
    border: 2px solid #B9BAA3;
    padding: 5px 10px;
}

.app-input-field:focus {
    border-color: #A22C29;
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #D6D5C9;
    padding: 20px;
}

.app-sidebar {
    background-color: #B9BAA3;
}

.app-footer, .app-header {
    background-color: #0A100D;
    color: #D6D5C9;
}

.app-divider {
    border-bottom: 2px solid #902923;
    margin: 20px 0;
}

mark, .app-highlight-text {
    background-color: #A22C29;
    color: #D6D5C9;
}


.app-footer-title {
    color: white;
    font-weight: bold;
    margin-bottom: 15px;
}

.app-footer-links a {
    color: white;
    text-decoration: underline;
    margin-right: 15px;  /* spacing between links; adjust as needed */
}

.app-footer-links a:hover {
    color: #A22C29;
}

.app-footer-paragraph {
    color: white;
}

.app-floating-effect {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.app-floating-effect:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.09);
}