.mermaid {
    width: 50%; /* Adjust the width to scale down the graph */
    max-width: 100%; /* Prevents overflow on larger screens */
    height: auto; /* Maintains aspect ratio of the graph */
    margin: 0 auto; /* Centers the graph horizontally */
    display: block; /* Ensures the graph is displayed as a block element */
    padding: 10px; /* Adds some padding around the graph */
    box-sizing: border-box; /* Ensures padding does not increase the size of the graph container */
}

.mermaid svg {
    width: 100% !important; /* Ensures SVG scales responsively */
    height: auto !important; /* Maintains the SVG aspect ratio */
}

@media (max-width: 768px) {
    .mermaid {
        width: 80%; /* Adjust width for smaller screens */
        padding: 5px; /* Reduce padding for smaller screens */
    }
}


/*
body a {
    color: #FFFFFF !important; /
}

body a:hover {
    color: #CCCCCC !important; 
}
*/