/* Target hyperlinks only inside markdown content */
.markdown-content a {
    color: #66d9ef;  /* Material purple accent color */
    text-decoration: none;
    transition: background-color 0.3s ease;  /* Smooth transition for the background color */
}

/* Hover effect for links */
.markdown-content a:hover {
    background-color: rgba(211, 211, 211, 0.1);  /* Light gray background with opacity */
    color: #f2f2f2;  /* Change text color to white on hover for contrast */
}



p {
    display: block;
    color: #e2e2e2 !important;
    font-size: 11pt; 
 }

p a:link {
  color: #acbd78;
 }


h3 {
    color: #ff8d3f !important;
    margin: 0 !important;
    padding: 0 !important;
}

h4 {
    color: #acbd78 !important;
    padding-top:30px !important;
    padding-bottom:10px !important;
 }

/* Target hyperlinks only inside markdown content */
.markdown-content h5 a {
    color: #BB86FC !important;
    font-size: 18px !important;
 }

 /* Style for h5 block with background opacity */
.markdown-content h5 {
    display: inline-block;  /* Ensure it's treated as a block-level element */
    padding: 10px;  /* Add some padding for spacing */
    background-color: rgba(255, 255, 255, 0.1);  /* Semi-transparent black background */
    color: #fff;  /* White text for visibility */
    border-radius: 8px;  /* Optional: rounded corners for a smoother look */
}


 /* Card/Container styles */
.card, .container {
    background-color: #333333;  /* Dark card background */
    border-radius: 8px;  /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Subtle shadow for depth */
    padding: 16px;
    margin: 16px;
}

/* Buttons */
button {
    background-color: #6200EE;  /* Material button color */
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #3700B3;  /* Darker shade for hover effect */
}

/* Form inputs */
input[type="text"], input[type="password"], textarea {
    background-color: #333333;  /* Dark input background */
    color: #E0E0E0;  /* Light text for inputs */
    border: 1px solid #444444;  /* Subtle border */
    padding: 12px;
    border-radius: 4px;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: #6200EE;  /* Material purple accent on focus */
    outline: none;
}

/* Accent colors */
.accent {
    color: #BB86FC;  /* Light purple for accents */
}

/* Material dark theme with floating action button (FAB) */
.fab {
    background-color: #03DAC6;  /* Material teal color */
    border-radius: 50%;
    width: 56px;
    height: 56px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.fab:hover {
    background-color: #018786;  /* Darker teal shade */
}

/* Transitions for smooth hover effect */
button, input, textarea {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

button:active {
    background-color: #3700B3;  /* Active button color */
}