/* style.css */

h1.title {
    font-size: 60pt;
}

h2.small-header {
    font-size: 40pt;
}

h2.very-small-header {
    font-size: 20pt;
}

/* Mermaid container background and sizing */
.mermaid {
    background-color: white; /* Withe background color (adjust as needed) */
    padding: 10px;            /* Adds space inside the container */
    border-radius: 8px;       /* Optional rounded corners */
    width: 90%;               /* Adjust diagram width */
    max-width: 800px;         /* Set maximum width */
    margin: auto;             /* Center align the diagram */
    display: inline-block;
}

/* Custom font and scaling for diagram content */
.mermaid svg {
    /* font-size: 12pt !important; */ /* Adjust font size */
    transform: scale(1.0);    /* Scale up the diagram */
}

/* Center the Mermaid container */
.mermaid.mermaid-container {
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;     /* Vertical alignment (optional) */
    margin: 20px auto;       /* Center with margins */
}

pre.sourceCode {
    color: black;
    background-color: white;
    border-radius: 4px;
}

/* Bash code with copy to clipboard button */
.pre.sourceCode.bash {
    margin: 0 !important;
}

.copy-button {
    position: absolute;
    top: 10px;               /* Adjust as needed to align with padding */
    right: 10px;             /* Adjust as needed to align with padding */
    cursor: pointer;
    padding: 2px 3px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;         /* Adjust font size as needed */
}

.copy-button:hover {
    background-color: #0056b3;
}

/* Bash code with copy to clipboard button */
.code-container {
    color: black;
    background-color: white; /* White background color (adjust as needed) */
    /*padding: 5px;*/            /* Adds space inside the container */
    border-radius: 8px;       /* Optional rounded corners */
    width: 100%;               /* Adjust diagram width */
    /*max-width: 800px;*/         /* Set maximum width */
    margin: 0;             /* Center align the diagram */
    display: inline-block;   
    position: relative;       /* Ensure .sourceCode.bash is the positioning reference */
}

.code-container.p {
    margin: 0;
}